Calendar View formatting

[sympmarc]

What Kind of Sample (view or column format)

Calendar view formatting, specifically, the day's listing on the right side.

We're using a Calendar view in a list, which works well. But we'd like to be able to add:

1. More detail and perhaps color coding to individual items in the calendar on the left
2. More detail to the items in the day's listing to the right

I found this helpful article from @tecchan1107 explaining how to make additional columns available. There's also a good example of color coding in one of the links from the article: Calendar view customizations. What I'm not sure about is the syntax for changing what metadata is shown per event on the left or right sides. I may just need a quick example to help me along - or someone to tell me I can't change the content shown (which would be sad).

Are you Willing to Help?

Sure!

[Fedes365]

@sympmarc
Hello, as far as I remember, when I wrote that article, it wasn't possible to apply a custom formatting to the items listed on the right pane. However, I will have a deeper look as soon as possible to tell you if it's allowed or not.

[sympmarc]

Awesome, @Fedes365. It's something I've had multiple people ask for. If I can't do it on the right pane, being able to add additional content left in the left pane or on hover would be great.

[Fedes365]

Hello @sympmarc

to check if there is something new allowed by Microsoft Lists, first I've opened the calendar formatting schema.

If we read that schema, we can find two pieces of information regarding the calendar custom formatting:

1. we can customize the command bar
2. we can customize the class properties to be applied to the thin coloured raws and we can use expressions too.

... and nothing else 🤔

I've also made other attempts by adding some elements such as divs here and there but with no results. From my findings it's not possible to apply a custom formatting to the items on the right pane yet. Conversely, I would expect to find something like "eventTileFormatter" or similar in the JSON schema above, in order to add containers, styles etc... but this is not the case.

Anyway, this is just the result of my check and I could be wrong. Maybe @tecchan1107 or other Lists experts could have new suggestions and ideas.

[sympmarc]

Thank you, @Fedes365. That's consistent with what I've found as well. I've tried various approaches to get something different than just the Title to show in either panel, but with no success. This certainly feels like a gap in the list formatting capabilities. Hoping someone else has an idea!

[tecchan1107]

I did some research on my end, but that did not seem to be possible at this time...😣

[z3019494]

I've just shoved additional details into the Title column 😂 Though this list isn't manually populated, but rather it's populated as a result of filling out a Form, with a Power Automate flow doing the hard yards.

As for the colour coding, a crap load of JSON conditionals is required:

  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "additionalEventClass": {
    "operator": ":",
    "operands": [
      {
        "operator": "==",
        "operands": [
          "[$FacultyImpacted]",
          "English"
        ]
      },
      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont')",
      {
        "operator": ":",
        "operands": [
          {
            "operator": "==",
            "operands": [
              "[$FacultyImpacted]",
              "Mathematics"
            ]
          },
          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkRed' , 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont')",
          {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$FacultyImpacted]",
                  "Science"
                ]
              },
              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont')",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$FacultyImpacted]",
                      "CAPA"
                    ]
                  },
                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$FacultyImpacted]",
                          "PDHPE"
                        ]
                      },
                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$FacultyImpacted]",
                              "HSIE"
                            ]
                          },
                          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$FacultyImpacted]",
                                  "TAS"
                                ]
                              },
                              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgLavender' , 'sp-css-backgroundColor-BgLightPurple sp-css-color-LightPurpleFont')",
                              {
                                "operator": ":",
                                "operands": [
                                  {
                                    "operator": "==",
                                    "operands": [
                                      "[$FacultyImpacted]",
                                      "Music"
                                    ]
                                  },
                                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')",
                                  {
                                    "operator": ":",
                                    "operands": [
                                      {
                                        "operator": "==",
                                        "operands": [
                                          "[$FacultyImpacted]",
                                          "SASS"
                                        ]
                                      },
                                      "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkBlue' , 'sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont')",
                                      {
                                        "operator": ":",
                                        "operands": [
                                          {
                                            "operator": "==",
                                            "operands": [
                                              "[$FacultyImpacted]",
                                              "Student Wellbeing"
                                            ]
                                          },
                                          "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')",
                                          {
                                            "operator": ":",
                                            "operands": [
                                              {
                                                "operator": "==",
                                                "operands": [
                                                  "[$FacultyImpacted]",
                                                  "Senior Executive"
                                                ]
                                              },
                                              "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPink' , 'sp-css-backgroundColor-BgLilac sp-css-color-LilacFont')",
                                              {
                                                "operator": ":",
                                                "operands": [
                                                  {
                                                    "operator": "==",
                                                    "operands": [
                                                      "[$FacultyImpacted]",
                                                      "Administration (Careers/Library)"
                                                    ]
                                                  },
                                                  "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont')+' sp-field-fontSizeSmall'",
                                                  ""
                                                ]
                                              }
                                            ]
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}```

[AdaEddev]

Hello

is it possible to share the List Calendar to Outlook?

[z3019494]

Hello

is it possible to share the List Calendar to Outlook?

I think you may be able to open up the list in Outlook desktop classic. But don't expect calendar view formatting to work of course :P