Multiple Conditions/Colors for SharePoint List Calendar

Question

Multiple Conditions/Colors for SharePoint List Calendar

Hi, I have two sets of conditions that I would like to color code for in a SharePoint List Calendar. Conditional Formatting is great when coloring certain items based on one variable, however I haven't found a way to color code for multiple variables. As an example, let's say I have time off requests for employees and each type of request is color coded. Blue for Vacation, Red for Sick Day. I am also dealing with employees from different regions and want to color code for that as well without creating multiple views. Is there a way to color code both variables? Perhaps the borders of the entries for the Northeast region could be purple and the borders of the West Coast entries could be green. This example would yield four different color codes. Vacation (Northeast): Blue fill with purple border Sick Day (Northeast): Red fill with purple border Vacation (West): Blue fill with green border Sick Day (West): Red fill with green border Is this possible?

Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2024-02-13T02:12:29.0966667+00:00

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Accepted answer

1 additional answer

Your answer

Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2024-02-13T02:12:29.0966667+00:00

Thank you for your question.

We are currently looking into this issue and will give you an update as soon as possible.

Answer 1

Emily Du-MSFT 51,836 Microsoft External Staff

Go to the calendar view -> Format current view -> Apply formatting to Month -> Advanced mode -> Use following JSON codes.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/calendar-formatting.schema.json",
  "additionalEventClass": "=if([$Typeofrequest] == 'Vacation' && [$Region] == 'Northeast', 'sp-css-color-WhiteFont sp-css-backgroundColor-BgLightBlue sp-css-borderColor-PurpleText', if([$Typeofrequest] == 'Sick Day' && [$Region] == 'Northeast', 'sp-css-color-WhiteFont sp-css-backgroundColor-BgCoral sp-css-borderColor-PurpleText', if([$Typeofrequest] == 'Vacation' && [$Region] == 'West', 'sp-css-color-WhiteFont sp-css-backgroundColor-BgLightBlue sp-css-borderColor-GreenText','sp-css-color-WhiteFont sp-css-backgroundColor-BgCoral sp-css-borderColor-GreenText')))"
}

Result:

enter image description here

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Kaitlyn STEPHENS 0 Reputation points

2024-02-14T19:57:57.6833333+00:00

The JSON option isn't working, and I've validated the column name vs display name and still can't get the colors to show. Any recommendations?
Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2024-02-15T09:51:56.4766667+00:00

1.Go to List settings -> Click calendar view in the Views section -> Make sure select Type of request and Region in the Columns.

2.Go to List settings -> Click Type of request or Region in the Columns section -> Find the internal name of the column.
Kaitlyn STEPHENS 0 Reputation points

2024-02-15T15:14:23.3666667+00:00

Thanks! I've done this but when entered into the JSON it doesn't yield the desired result of changing the calendar color code.
Tepfer, Connor (RC-US SI EP BT SBO) 20 Reputation points

2024-02-15T16:10:15.96+00:00

Thanks @Emily Du-MSFT , your answer is very helpful and answers my example scenario. What I'm really getting at is to understand what all is possible with the json configuration for colors though. Is there documentation on what can be done? The border is one way to show 2 colors. Is it possible to do things like having a color stripe on an item? Or other possibilities? Is there a list of colors that can be used and the string that would need to be entered for each one?
Emily Du-MSFT 51,836 Reputation points Microsoft External Staff

2024-02-16T10:22:49.75+00:00

@Kaitlyn STEPHENS

JSON formatting can be used in the custom list with calendar view.

I also did a test: I created a classic calendar list, then I converted it into a modern list. After that, I created a modern calendar view and add JSON codes for the modern calendar view. The JSON formatting can be used.

So, in my opinion, due to it was converted by classic calendar list, so JSON codes do not work on it.

Answer 2

You could refer following documentation to know more about JSON formatting in the calendar view.

https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-calendar-formatting

Per my knowledge, a color stripe is not possible.

And you could through background color, font color, border color and hover color to do conditional formatting.

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Multiple Conditions/Colors for SharePoint List Calendar

1 additional answer

Your answer