{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField,'flex','none')",
    "margin": "5px 0",
    "justify-content": "center"
  },
  "children": [
    {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-themePrimary"
      },
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "width": "54px",
        "border-radius": "8px",
        "box-shadow": "0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)",
        "background-color": "=if(toDateString(@currentField)==toDateString(@now),'#c43b33','')"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "=substring('JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC',getMonth(@currentField)*3,getMonth(@currentField)*3+3)",
          "style": {
            "display": "flex",
            "justify-content": "center",
            "letter-spacing": "1px",
            "padding": "2px 0 2px 0",
            "color": "white",
            "font-weight": "bold"
          }
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "background-color": "white",
            "border-radius": "0 0 7px 7px",
            "flex-direction": "column",
            "padding": "0px 2px 3px 2px",
            "line-height": "1.2"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "align-items": "flex-start",
                "justify-content": "space-between"
              },
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "display": "=if(Date(toDateString(@currentField))<Date(toDateString(@now)),'flex','none')",
                    "flex-direction": "column",
                    "align-items": "center",
                    "justify-content": "flex-start",
                    "color": "red",
                    "font-size": "10px"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=if(floor((@now-Date(toDateString(@currentField)))/86400000)>30,'30+',floor((@now-Date(toDateString(@currentField)))/86400000))"
                    },
                    {
                      "elmType": "div",
                      "txtContent": "←",
                      "style": {
                        "line-height": "0.5"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "flex-direction": "column",
                    "flex-grow": "1"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=getDate(@currentField)",
                      "style": {
                        "display": "flex",
                        "justify-content": "center",
                        "font-size": "22px",
                        "font-weight": "bold"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "style": {
                    "display": "=if(Date(toDateString(@currentField))>@now,'flex','none')",
                    "flex-direction": "column",
                    "align-items": "center",
                    "color": "green",
                    "font-size": "10px",
                    "justify-content": "flex-start"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=if(ceiling((Date(toDateString(@currentField))-@now)/86400000)>30,'30+',ceiling((Date(toDateString(@currentField))-@now)/86400000))"
                    },
                    {
                      "elmType": "div",
                      "txtContent": "→",
                      "style": {
                        "line-height": "0.5"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "justify-content": "center",
                "padding-bottom": "2px"
              },
              "children": [
                {
                  "elmType": "span",
                  "txtContent": "=substring('SUNMONTUEWEDTHUFRISAT',((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField))%7)*3,((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField))%7)*3+3)",
                  "style": {
                    "background-color": "#4c4c4c",
                    "color": "white",
                    "font-size": "10px",
                    "border-radius": "3px",
                    "padding": "0px 4px 1px 4px"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}