Microsoft Lists Calendar Color Coding with View Formatting

[@cptcavernicola]

I have been waiting for a sample like this, thank you 🙏 April

[@AprilDunnam]

You're welcome! Thanks for watching :)

[@shawnenvik3721]

Great video! A tip for troubleshooting if this doesn't work right away for a viewer; make sure you are referencing the column's "internal name" which may not be the same as how you named it in your list view. I ran into this and it took me a bit to resolve it. You can find the internal name by: 1. Go to "All Items" view 2. Filter the column you want to color code (filter by any entry in the list, it doesn't matter) 3. Look in the web URL link at the top of your window and look for "FilterField1=xxxxxxx". Your internal name will be shown instead of the x's and keep in mind that it IS case sensitive. 4. Use this internal name instead of your column name when you're switching out the Title field in your calendar conditional formatting JSON section.

[@timklimavicz6313]

Thanks for this tip!

[@jdd1070]

THANK YOU, Shawn, for posting this! I thought I was going crazy trying this a few times with no color coding changing, the internal column name was different because I started from a list template. It works now, thank you again! :)

[@shawnenvik3721]

@@jdd1070 glad it helped!

[@r0ricker]

I am still having trouble...

[@LauraLuisaRosenberg]

I tried to do this, but it still not works for me. I checked even the columns internal names with microsoft graph. Funny it is working for 2 columsn (Title and a Choice Column) and not for any other column, doesnt matter if choice or string.

[@GuyBerthiaume-ScaleModels]

A better and simpler solution is to go into the list settings, edit the calendar view (bottom of the list settings page), enable the display option for the field you want to use, and save. Now when you add a condition the field will appear in the dropdown without the need to play with JSON code.

[@robynpatrick8528]

GENIUS! I appreciate you

[@יהודהונסובר]

@@robynpatrick8528 Awesome!! Thanks a lot!!!

[@rodeolove]

Yeah... I'm wondering if that wasn't available when she made this... otherwise it seemed really out of the way.

[@chrisslc1106]

this is the way.

[@MoodyMolavi]

I learned more about MS Lists doing it both ways, but the JSON edit way does not show the color coding every time we view the calendar. We have to tap between views to get it to show as designed. When I did it through the List settings, it works every time we look at the calendar view. Thanks to both of you for taking time to share your knowledge!

[@martylewis.operations]

Thanks April :) this was mega helpful. Accidentally, I also found another user friendly work around formatting. If you go List settings from the site cog in top right > then select the view you want to edit > you can then add fields to show. When you add these (technology say) you can then filter on them directly and means you don't have to edit the JSON. Thanks again

[@jenniferlycke1695]

Nice! Yes, would love more list formatting videos

[@AprilDunnam]

Noted!

[@EJA1969]

For example, can we now create hover cards from Calendar events? Or at least beef up the tool tips?

[@bigjonradio]

@@EJA1969 take a look at Chris Kent's site & videos. He's a master of JSON formatting. Has a few videos about how you can reformat events cards, so might put you on the right track!

[@dougydoe]

Awesome! Another cool and handy tip there. Having moved away from SharePoint and focusing on the Power Platform in recent years, I haven't kept up with SP that much but good to pickup these tips every now and then. Yes, more of List formatting and handy SharePoint tips would be extremely welcomed.

[@thatmattwade]

Thanks for coming in clutch for my users once again!

[@AprilDunnam]

Glad I could help ☺

[@stefancochrane2723]

At 5:40, instead of using the "Title" field to add the rules, you could have added the "Technology" column into the calendar view first. This would have added the "Technology" option when selecting the color codes. This way, there's no need to update JSON code directly.

[@InesKondor]

Brilliant! Many thanks, April. I also would love the ability to show multiple fields in the calendar view. While hopefully Microsoft will enable this functionality sooner or later, would you know a "workaround" until then, please?

[@nadinemcmahon3770]

Perfect, great workaround, and love to see the formatting there on the calendar. That's been putting me off using it more. Thank you!

[@BulbDigital]

Great video April! Kind of silly Microsoft doesn't have a more user-friendly way to do this, but we're glad there's at least a workaround.

[@AprilDunnam]

Thank you! It is a bit silly but glad there is a way around it :)

[@andrenalinarg]

Thank you a lot for your video! However, it's 2024 now and apparently there is an option if you go to your calendar list (where All items and the Calendar view can be set) and at the bottom of the list there's an option called: Add or remove fields. If you select the field you want to color and click on apply on the top of the menu, you will find later in the formatting menu the option of the field you selected (as shows the video). All this without the workaround of the video. I found it out by chance and I decided to share it so it can be useful for others. @@AprilDunnam

[@rdoublya]

Awesome video April! I am learning so much from yopur videos!

[@AprilDunnam]

I'm so glad!

[@andrenalinarg]

Thank you a lot for your video! However, it's 2024 now and apparently there is an option if you go to your calendar list (where All items and the Calendar view can be set) and at the bottom of the list there's an option called: Add or remove fields. If you select the field you want to color and click on apply on the top of the menu, you will find later in the formatting menu the option of the field you selected (as shows the video). All this without the workaround of the video. I found it out by chance and I decided to share it so it can be useful for others.

[@StephenFulton-n7i]

I have tried both ways and i still cant get the calender to apply the conditional formatting!

[@mce8183]

Perfect!!! I really appreciate you sharing these to everyone. I do have one request, I was asked to show a column when that is not showing in the calendar box. How do i do that, example, a column called "room number" is in the SharePoint List but in the calendar view or in the Event List it only shows the start date, and the title.

[@SeoKayo]

Brilliant! I've watch tons of tutorial and yours standout by making a complex tasks easy. I created a leave request calendar and set the Calendar View - the only problem I have is that we can only choose one Filed yo use (example, Title or Technology Field) - It would be nice if the List in a Calendar View allows t wo or more Fields to Display.

[@leanneedwards4530]

Hi April, I tried the JSON cheat tips you provided. Loved this, however, my calendar didn't change colours? I've matched everything you've provided and it seemed like there's no differences. I use a different category name and used this to replace the "title" field. On preview and saving I just have the grey colour throughout. I've cancelled and retried with no luck. Any other workarounds you can suggest?

[@gatorhd732]

Sometimes I think you can read my mind 😂 you post exactly things I‘m currently dealing with

[@morgantitus248]

Thanks April that was very helpful! Do you know a way to display more than one column value as the display title in the calendar view?

[@babukurapati80]

Great ,Thank you so much April!

[@AprilDunnam]

You are so welcome!

[@EJA1969]

If you add the field you want to reference to the view through the old Edit View interface (by clicking on the view name in List Settings) it becomes available as a choice in the simple conditional formatting, and you never need to edit the JSON!

[@EJA1969]

Also, if it's a Choice column, you get to select from your list of choices.

[@KellyBeck-lk8kg]

Very helpful! Thank you!!!

[@AprilDunnam]

Glad it was helpful!

[@pawanmishra6549]

Very helpful, thanks April !!

[@AprilDunnam]

You're so welcome!

[@kjaconsulting1383]

Good stuff April!! Thanks!

[@AprilDunnam]

Thanks for watching!

[@RichardNievesNY]

Great tip. I subscribed!! Thank you

[@AprilDunnam]

Thanks for the sub!

[@paulinacieloch8529]

Thank you! It's very useful:)

[@AprilDunnam]

Glad it was helpful!

[@spen2431]

Brilliant 💥 Thanks April

[@AprilDunnam]

You're welcome!

[@challasubrahmanyam2900]

Thank you so much for this April.

[@AprilDunnam]

You are so welcome!

[@carlamurray1349]

Thanks April. Any idea how to have this colour coding carry over to the List embedded as a tab in Teams? Colour coding disappears when the calendar is surfaced here.

[@יהודהונסובר]

See comments above. You will find your answer

[@73827935]

Hi April, Great resource, thank you. One question I have is to add to visual formatting, is it possible for you to add additional information from the list to the events in the calendar view? In your example, the Technology column, would it be possible to add the words to the 'event card' on the right using JSON or other methods?

[@littlepuns]

I'm also interested in this!

[@rielevinzon3410]

Thank you for the helpful video. I have a problem showing the color code when using the list web part to show the calendar view. As soon as I publish the page, color codes disappear and revert back to the default color. Any suggestions?

[@Aristotin]

Excellent, thanks!

[@AprilDunnam]

Thank you!

[@nottodaythankyou-gr8]

Love this feature, does anyone know how to swap out the sp-css colours for hex codes instead? I've tried everything I know of, it's beaten Copilot as well :(

[@davidforbes72]

Cool, it works, I just tried it out! But there is one flaw: When setting it as default view it doesn't show the colours. You need to first change view and then back to the calendar view to see the colours. But maybe something that can be fixed via JSON

[@davidforbes72]

By adding the field with the color-coding information to the view itself it is solved! 🙂

[@AprilDunnam]

Oooh that's an interesting quirk. I didn't try making it the default view. Good to know that the field with color coding info has to be there in the default view. I'll add that to my video description for clarification. Thanks for that!

[@davidforbes72]

@@AprilDunnam Glad to help! 👍

[@ForzaJonesy]

wow thank you so much April! Sharepoint can be so good so why do they make it so difficult to use! maybe theyve tried to give as much functionality with a tight deploy date and are working on all these front end issues as we speak. getting into JSON shouldnt be normal practice for a team calendar! my colour coding didnt work even when switching views. I had to make a new view by Type of Time Off rather than the Title. make the colour coding , and then go back to edit view and change back to Title. Looks great now, but takes so much time fiddling and researching how to's. thanks!

[@יהודהונסובר]

@@davidforbes72 It was happen to me too. But the only way I can see the colors is only of the main column is equal to the filed in the JSON

[@annatesta4196]

Dear April, thank you so much for your terrific and inspiring video tutorials. Would you perhaps, please, know if and how we could change a condition to "field contains" vs. "==" which does not seem to work for me for a text field (choice does work)?

[@lawnsandthings5991]

I changed "==" to "startsWith" and it worked for me, but you may need something else depending on what you're trying to exclude.

[@rauseomo]

Hi, thanks for your videos,. I have a question do you know or you have a video using app calendar? A need to change names, remove items from add new element in calendar. No a calendar from list, I need that from addig a new app calendar . Helpppp

[@eduardoaraya7092]

awesome!! thank you!

[@AprilDunnam]

You're welcome!

[@rodeolove]

Can you add a filter to this calendar to only see Power Automate or Power Apps? I need to do something similar for my company but would like them to have the option to only view by "Specific Technology"

[@91freckles]

Is it possible to have multiple dates associated with a single item and have them each show as a single calendar entry rather than a range of dates on a calendar?

[@eeja5795]

Hi April, do you know how to add in Public Holiday in the calendar? Tks

[@kerenferrisandco]

how can you add the start time? and can you click on it to download to outlook calendar?

[@LauraLuisaRosenberg]

When I am refreshing the page is going back to the grey color for all entries. Any idea why? Same on my Sharepoint Page I embedded the calender.

[@flip530]

THANK YOU!!!

[@spartanwarr5935]

Hello April - SharePoint have only "equal to" or "not equal to" - is there a way to do "contains" a certain type of string?

[@LauraLuisaRosenberg]

Hey I am really struggling, It works for 2 columns (Title and a choice column) but not all the others (string or choice columns). I checked for the internal names even with the microsoft graph. But still running into this issuse, dont know how to fix it. I have a normal SP List.

[@sastreaj]

Hi, Tried it and it worked fine on the Windows desktop app but it’s not working when I view the same calendar view in Teams. Any idea?

[@Loremaster69]

Strange, even though I set the colors for my Categories, one of the colors is different in both List and Calendar view, also how do you get a Legend on the side like the Classic Calendars had so you KNOW what you are doing???

[@michaeldavis9954]

Fantastic!

[@AprilDunnam]

Many thanks!

[@lovidyahelmi5937]

Woww thank you so much!

[@AprilDunnam]

You're welcome!

[@lovidyahelmi5937]

@@AprilDunnam Hi April, is it possible to adjust lengths in calendar views? And what should I check (probably the formatting) if the coding that you give couldn’t works in our calendar? Thank you so much once again.

[@יהודהונסובר]

@@lovidyahelmi5937 See comments above. You will find the solution

[@jdanderson0261]

Close, but yet so far! Works great for something like this example where you use a text or choice field for the conditional formatting and a text or choice field to display on the calendar. Strangely, if you use a choice field for the conditional formatting and display a person field on the calendar the formatting doesn’t work. Using this to format a leave calendar requires you to copy the display name from the person field into a text field and use it to display. Also, the conditional formatting does not display when the calendar is on a Teams tab. Hopefully I am wrong and someone will correct me. Otherwise, the functionality will likely improve in future releases.

[@evav.5169]

THANK YOUUU !

[@AprilDunnam]

You're welcome!!

[@markjohnston2827]

I tried this but I had to go into the classic list settings and add the columns that I substituted into the JSON to the list view. If I didn't do that, it would work when switching views but fail on a refresh (SharePoint online environment).

[@יהודהונסובר]

See comments above.

[@WELUVYOU-REDD]

Can we map multiple list to one calendar

[@baldytyre]

Brilliant

[@AprilDunnam]

Thank you!

[@nandnandan8313]

ALERT!! After the refresh, every color code reset back to Default. How to troubleshoot that?

[@bobblandeburgo3842]

While this is great, the lack of recurring events on the modern calendar is reason enough to not use it, so I'm forced to use the classic calendar in my environment.

[@Nwvet]

Why are the color choices so bland/few?