"View Events" items color does not follow the same color of the calendar view

Question

Hello,

I have a SharePoint list and a calendar view formatted with JSON, I want the event list items have same color of the calendar.

Is there any way to have the same color?

Answer 1

Hi @Ling Zhou_MSFT ,

Thanks for your reply. I am using SharePoint Online and here is the JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$Bureau]",
          "2020"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgLightPurple30 sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$Bureau]",
              "2020 RB-R5"
            ]
          },
          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgLightPurple sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$Bureau]",
                  "Anjou"
                ]
              },
              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-blockingBackground30 sp-css-color-PeachFont')+' sp-field-fontSizeSmall'",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$Bureau]",
                      "Anjou - formation"
                    ]
                  },
                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown'  , 'sp-css-backgroundColor-blockingBackground50 sp-css-color-PeachFont')+' sp-field-fontSizeSmall'",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$Bureau]",
                          "St-H"
                        ]
                      },
                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-successBackground sp-css-color-SageFont')+' sp-field-fontSizeSmall'",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$Bureau]",
                              "St-H - formation"
                            ]
                          },
                          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-successBackground50 sp-css-color-SageFont')+' sp-field-fontSizeSmall'",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$Bureau]",
                                  "QC"
                                ]
                              },
                              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgOrange' , 'sp-css-backgroundColor-warningBackground ms-fontColor-sharedOrange20')+' sp-field-fontSizeSmall'",
                              {
                                "operator": ":",
                                "operands": [
                                  {
                                    "operator": "==",
                                    "operands": [
                                      "[$Bureau]",
                                      "QC - formation"
                                    ]
                                  },
                                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgOrange', 'sp-css-backgroundColor-warningBackground50 ms-fontColor-sharedOrange20')+' sp-field-fontSizeSmall'",
                                  ""
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 2

Hi @Parham Sotoodeh-Anvari,

I tested your Json on my side.

I am afraid that we can't customize the events pane in SharePoint online modern experience calendar list view. The view formatting only applies to the view and Events pane is not part of the view. It was designed by SharePoint, and we can't modify it. Thank you for your understanding and tolerance！

---

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.