JSON Format View for Sharepoint Modern Calendar

Copper Contributor

I'm trying to format my Sharepoint Modern Calendar to mark events yellow if there are anything was Modified that day.

 

I was able to format the Modified column in the List and am looking at the Advanced Mode JSON, however, I can't figure out how to get that JSON into the Format View of the Sharepoint Calendar to have the same formatting.

 

Can someone help me extract the needed JSON from below into the JSON for the calendar formatting?

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "padding": "0 2px",
    "overflow": "hidden",
    "text-overflow": "ellipsis"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "@currentField",
            ""
          ]
        },
        "",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "<",
              "operands": [
                {
                  "operator": "Date()",
                  "operands": [
                    {
                      "operator": "toDateString()",
                      "operands": [
                        "@currentField"
                      ]
                    }
                  ]
                },
                {
                  "operator": "Date()",
                  "operands": [
                    {
                      "operator": "toDateString()",
                      "operands": [
                        "@now"
                      ]
                    }
                  ]
                }
              ]
            },
            "sp-field-fontSizeSmall",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@currentField"
                          ]
                        }
                      ]
                    },
                    {
                      "operator": "Date()",
                      "operands": [
                        {
                          "operator": "toDateString()",
                          "operands": [
                            "@now"
                          ]
                        }
                      ]
                    }
                  ]
                },
                "sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": ">",
                      "operands": [
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@currentField"
                              ]
                            }
                          ]
                        },
                        {
                          "operator": "Date()",
                          "operands": [
                            {
                              "operator": "toDateString()",
                              "operands": [
                                "@now"
                              ]
                            }
                          ]
                        }
                      ]
                    },
                    "sp-field-fontSizeSmall",
                    ""
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "txtContent": "@currentField.displayValue"
}

 

 

2 Replies

As far as I got that thing with the JSON calender formatting, your "operand" always has to refer to a column, as it is by default [$Title], not "now" or another date stuff, but I maybe wrong :) so if you just use a calender formatting and change the JSON code on the part with [$Title] into a date column like [$due date], your other JSON code will detect, what your other conditions can fullfill then... greets from Eva.

 

As an example, I changed the advanced mode of my JSON calender formatting from [$Title] into a choice field called [$Service] and it chose exactly between the result "Take away" (Abholung) with a lilac background, and "delivery" (Lieferung) with a blue background. Sorry, it is all in german, never mind :)

Hi Eva,

Thank you. I understand the JSCON calendar formatting for the choice field, I need help with referencing the [$Modified] column and formatting whether the [$Modified] column was within that day.

 

So how to check date/time vs choice column I guess is what I'm asking :)