Calendar view basic knowledge - Fedes365/Microsoft-Lists-Templates GitHub Wiki
This guide will help you to get a basic knowledge of Microsoft Lists custom JSON formatting for calendar views. The instructions provided here are focused on 3 main use cases:
1. Conditional formatting based on a single choice column
2. Conditional formatting with specific date/now comparison
3. Conditional formatting based on person column internal properties
In this case, we want to highlight and mark an event based on its assigned category. The following image shows an example of conditional formatting applied to a calendar view, based on a single choice column named PROJECT:
In this example, PROJECT column has the following options:
- Project A
- Project B
- Project C
- Project D
- Project E
The JSON code below makes use of SharePoint Online Modern UI classes to apply colors, borders and a hover effect through the Excel-style expression syntax:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
"additionalEventClass": "=if([$PROJECT] =='Project A' && @isSelected == false, 'sp-css-backgroundColor-successBackground50 sp-css-color-BlackText sp-css-borderColor-GreenText ms-bgColor-sharedGreenCyan10--hover ms-fontColor-white--hover', if([$PROJECT] =='Project A' && @isSelected == true, 'ms-bgColor-green sp-css-color-WhiteText', if([$PROJECT] =='Project B' && @isSelected == false, 'sp-css-backgroundColor-BgPeach sp-css-color-BlackText sp-css-borderColor-RedText ms-bgColor-sharedRed10--hover ms-fontColor-white--hover', if([$PROJECT] =='Project B' && @isSelected == true, 'sp-css-backgroundColor-redDark sp-css-color-WhiteText', if([$PROJECT] =='Project C' && @isSelected == false, 'sp-css-backgroundColor-BgGold sp-css-color-BlackText sp-css-borderColor-BrownText ms-bgColor-yellow--hover ms-fontColor-white--hover', if([$PROJECT] =='Project C' && @isSelected == true, 'ms-bgColor-sharedOrange10 sp-css-color-BlackText', if([$PROJECT] =='Project D' && @isSelected == false, 'ms-bgColor-communicationTint20 sp-css-color-BlackText sp-css-borderColor-BlueText ms-bgColor-sharedCyanBlue10--hover ms-fontColor-white--hover', if([$PROJECT] =='Project D' && @isSelected == true, 'sp-css-backgroundColor-BlueText sp-css-color-WhiteText', if([$PROJECT] =='Project E' && @isSelected == false, 'sp-css-backgroundColor-BgLilac sp-css-color-BlackText sp-css-borderColor-DarkPurpleText ms-bgColor-sharedBlueMagenta20--hover ms-fontColor-white--hover', if([$PROJECT] =='Project E' && @isSelected == true, 'sp-css-backgroundColor-BgPurple sp-css-color-WhiteText', if(@isSelected == false, 'sp-css-backgroundColor-neutralBackground20 sp-css-color-BlackText ms-bgColor-neutralTertiaryAlt--hover ms-fontColor-black--hover', 'sp-css-backgroundColor-neutralTertiary sp-css-color-WhiteText')))))))))))"
}
The image below breaks the JSON code into smaller parts and highlights each color block. As we can see, the code structure is the same for each color block, which makes use of the if operators to check progressively if a condition is met or not. The optional property @isSelected allows boolean values (true or false) and it's useful if we want to further apply a conditional formatting if an items (a calendar bar) is selected or not.
The gif image below shows the final result:
This use case implementation brings some new and interesting things. We can apply a conditional formatting by performing a comparison between a specific date, such as the end date and another specific date or even @now. To make everything works correctly, Microsoft introduced a new operator, not documented yet but used in OOTB formatting.
This new operator is toDateString() and when used, it will convert a date into a "short and friendly" format. For example, a date originally expressed as 07/07/2022 would be converted into Wed Jul 27 2022 thanks to this new operator. Apparently, the result will not vary based on user's locale.
In the following example, we want apply a conditional formatting by checking the end date along with @now.
* If the end date is before now (or today), the color will be red.
* If the end date is equal to now (or today), the color applied will be cyan.
* If the end date is after now (or today), the applied color will be green.
The JSON code below makes use of SharePoint Online Modern UI classes to apply colors, borders and a hover effect through the Excel-style expression syntax:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
"additionalEventClass": "=if(Date(toDateString(Date([$EndDate]))) > Date(toDateString(Date(@now))) && @isSelected == false, 'sp-css-backgroundColor-successBackground50 sp-css-color-BlackText ms-bgColor-sharedGreenCyan10--hover ms-fontColor-white--hover sp-css-borderColor-GreenText', if(Date(toDateString(Date([$EndDate]))) > Date(toDateString(Date(@now))) && @isSelected == true, 'ms-bgColor-green sp-css-color-WhiteText', if(Date(toDateString(Date([$EndDate]))) == Date(toDateString(Date(@now))) && @isSelected == false, 'ms-bgColor-communicationTint20 sp-css-color-BlackText ms-bgColor-sharedCyanBlue10--hover ms-fontColor-white--hover sp-css-borderColor-BlueText', if(Date(toDateString(Date([$EndDate]))) == Date(toDateString(Date(@now))) && @isSelected == true, 'sp-css-backgroundColor-BlueText sp-css-color-WhiteText', if(Date(toDateString(Date([$EndDate]))) < Date(toDateString(Date(@now))) && @isSelected == false, 'sp-css-backgroundColor-BgPeach sp-css-color-BlackText ms-bgColor-sharedRed10--hover ms-fontColor-white--hover sp-css-borderColor-RedText', if(Date(toDateString(Date([$EndDate]))) < Date(toDateString(Date(@now))) && @isSelected == true, 'sp-css-backgroundColor-redDark sp-css-color-WhiteText',''))))))"
}
The following image shows the final result, taking 27 of July as today:
Calendar view formatting allows to apply a conditional formatting based on a person internal metadata. For example, if we want to conditionally display an event based on the department a person is assigned to, first we should create a proper person column named MANAGER (this is the column name I used in this example, included in the JSON code below).
* If the department is Marketing, the color applied will be green.
* If the department is Finance, the color applied will be yellow.
The JSON code below makes use of SharePoint Online Modern UI classes to apply colors, borders and a hover effect through the Excel-style expression syntax:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
"additionalEventClass": "=if([$MANAGER.department] =='Marketing' && @isSelected == false, 'sp-css-backgroundColor-successBackground50 sp-css-color-BlackText ms-bgColor-sharedGreenCyan10--hover ms-fontColor-white--hover sp-css-borderColor-GreenText', if([$MANAGER.department] =='Marketing' && @isSelected == true, 'ms-bgColor-green sp-css-color-WhiteText', if([$MANAGER.department] =='Finance' && @isSelected == false, 'sp-css-backgroundColor-BgGold sp-css-color-BlackText sp-css-borderColor-BrownText ms-bgColor-yellow--hover ms-fontColor-white--hover', if([$MANAGER.department] =='Finance' && @isSelected == true, 'ms-bgColor-sharedOrange10 sp-css-color-BlackText', ''))))"
}
The following image shows the final result, based on Megan Bowen (Marketing department) and Adele Vance (Finance department):
