{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-white ms-borderColor-neutralLight ms-borderColor-neutralTertiary--hover"
    },
    "style": {
      "border-width": "1px",
      "border-style": "solid",
      "display": "block",
      "margin-bottom": "16px"
    },
    "children": [
      {
        "elmType": "a",
        "attributes": {
          "href": "=@currentWeb + '/_layouts/15/Event.aspx?ListGuid=' + '81d00db2-89f6-45d7-b303-c0125a6bba69' + '&ItemId=' + [$ID]"
        },
        "style": {
          "text-decoration": "none",
          "outline": "none"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "row",
              "justify-content": "flex-start",
              "align-items": "center",
              "padding-left": "16px"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-borderColor-neutralLight ms-fontColor-neutralPrimary"
                },
                "style": {
                  "width": "80px",
                  "height": "80px",
                  "border-width": "1px",
                  "border-style": "solid",
                  "display": "=if([$fAllDayEvent]=='Yes', 'none', 'flex')",
                  "flex-direction": "column",
                  "align-items": "center",
                  "text-align": "center",
                  "justify-content": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "=if(getMonth([$EventDate]) == 0, 'JAN', if(getMonth([$EventDate]) == 1, 'FEB', if(getMonth([$EventDate]) == 2, 'MAR', if(getMonth([$EventDate]) == 3, 'APR',if(getMonth([$EventDate]) == 4, 'MAY',if(getMonth([$EventDate]) == 5, 'JUN',if(getMonth([$EventDate]) == 6, 'JUL',if(getMonth([$EventDate]) == 7, 'AUG',if(getMonth([$EventDate]) == 8, 'SEP',if(getMonth([$EventDate]) == 9, 'OCT',if(getMonth([$EventDate]) == 10, 'NOV','DEC')))))))))))",
                    "style": {
                      "font-size": "15px",
                      "font-weight": "400"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "=getDate([$EventDate])",
                    "style": {
                      "font-size": "28px",
                      "font-weight": "600"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-borderColor-neutralLight ms-fontColor-neutralPrimary"
                },
                "style": {
                  "width": "80px",
                  "height": "80px",
                  "border-width": "1px",
                  "border-style": "solid",
                  "display": "=if([$fAllDayEvent]=='Yes', 'flex', 'none')",
                  "flex-direction": "column",
                  "align-items": "center",
                  "text-align": "center",
                  "justify-content": "space-between"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "=if(getMonth([$EventDate]) == 0, 'JAN', if(getMonth([$EventDate]) == 1, 'FEB', if(getMonth([$EventDate]) == 2, 'MAR', if(getMonth([$EventDate]) == 3, 'APR',if(getMonth([$EventDate]) == 4, 'MAY',if(getMonth([$EventDate]) == 5, 'JUN',if(getMonth([$EventDate]) == 6, 'JUL',if(getMonth([$EventDate]) == 7, 'AUG',if(getMonth([$EventDate]) == 8, 'SEP',if(getMonth([$EventDate]) == 9, 'OCT',if(getMonth([$EventDate]) == 10, 'NOV','DEC'))))))))))) + ' ' + getDate([$EventDate])",
                    "style": {
                      "font-size": "12px",
                      "font-weight": "400",
                      "flex-grow": "1",
                      "display": "flex",
                      "flex-direction": "column",
                      "justify-content": "center"
                    }
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-borderColor-black"
                    },
                    "style": {
                      "width": "40px",
                      "border-bottom-width": "1px",
                      "border-bottom-style": "solid"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "=if(getMonth([$EndDate]) == 0, 'JAN', if(getMonth([$EndDate]) == 1, 'FEB', if(getMonth([$EndDate]) == 2, 'MAR', if(getMonth([$EndDate]) == 3, 'APR',if(getMonth([$EndDate]) == 4, 'MAY',if(getMonth([$EndDate]) == 5, 'JUN',if(getMonth([$EndDate]) == 6, 'JUL',if(getMonth([$EndDate]) == 7, 'AUG',if(getMonth([$EndDate]) == 8, 'SEP',if(getMonth([$EndDate]) == 9, 'OCT',if(getMonth([$EndDate]) == 10, 'NOV','DEC'))))))))))) + ' ' + getDate([$EndDate])",
                    "style": {
                      "font-size": "12px",
                      "font-weight": "400",
                      "flex-grow": "1",
                      "display": "flex",
                      "flex-direction": "column",
                      "justify-content": "center"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "0 16px 16px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Category]",
                    "attributes": {
                      "class": "ms-fontColor-neutralSecondary"
                    },
                    "style": {
                      "font-size": "12px",
                      "font-weight": "400",
                      "margin-bottom": "4px",
                      "overflow": "hidden",
                      "text-overflow": "ellipsis",
                      "white-space": "nowrap",
                      "word-wrap": "normal",
                      "height": "18px",
                      "padding-top": "8px"
                    }
                  },
                  {
                    "elmType": "div",
                    "txtContent": "[$Title]",
                    "attributes": {
                      "class": "ms-fontColor-black"
                    },
                    "style": {
                      "font-size": "17px",
                      "font-weight": "300",
                      "margin-bottom": "20px",
                      "overflow": "hidden",
                      "white-space": "nowrap",
                      "word-wrap": "break-word",
                      "word-break": "break-word",
                      "line-height": "22px"
                    }
                  },
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "=if(getMonth([$EventDate]) == 0, 'Jan', if(getMonth([$EventDate]) == 1, 'Feb', if(getMonth([$EventDate]) == 2, 'Mar', if(getMonth([$EventDate]) == 3, 'Apr',if(getMonth([$EventDate]) == 4, 'May',if(getMonth([$EventDate]) == 5, 'Jun',if(getMonth([$EventDate]) == 6, 'Jul',if(getMonth([$EventDate]) == 7, 'Aug',if(getMonth([$EventDate]) == 8, 'Sep',if(getMonth([$EventDate]) == 9, 'Oct',if(getMonth([$EventDate]) == 10, 'Nov','Dec'))))))))))) + ' ' + getDate([$EventDate]) + ', ' + if([$fAllDayEvent]=='Yes', 'All day', toLocaleTimeString([$EventDate]))",
                        "attributes": {
                          "class": "ms-fontColor-black"
                        },
                        "style": {
                          "font-size": "12px",
                          "font-weight": "400",
                          "overflow": "hidden",
                          "text-overflow": "ellipsis",
                          "white-space": "nowrap",
                          "word-wrap": "normal",
                          "height": "18px"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Location]",
                        "attributes": {
                          "class": "ms-fontColor-neutralSecondary"
                        },
                        "style": {
                          "font-size": "12px",
                          "font-weight": "400",
                          "overflow": "hidden",
                          "text-overflow": "ellipsis",
                          "white-space": "nowrap",
                          "word-wrap": "normal",
                          "height": "18px"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "tileProps": {
    "width": "286",
    "height": "352",
    "hideSelection": true,
    "formatter": {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-white ms-borderColor-neutralLight ms-borderColor-neutralTertiary--hover"
      },
      "style": {
        "border-width": "1px",
        "border-style": "solid",
        "margin-right": "16px",
        "display": "block"
      },
      "children": [
        {
          "elmType": "a",
          "attributes": {
            "href": "=@currentWeb + '/_layouts/15/Event.aspx?ListGuid=' + '81d00db2-89f6-45d7-b303-c0125a6bba69' + '&ItemId=' + [$ID]"
          },
          "style": {
            "text-decoration": "none",
            "outline": "none"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "height": "160px",
                "display": "flex",
                "flex-direction": "column",
                "justify-content": "center",
                "align-items": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "ms-borderColor-neutralLight ms-fontColor-neutralPrimary"
                  },
                  "style": {
                    "width": "80px",
                    "height": "80px",
                    "border-width": "1px",
                    "border-style": "solid",
                    "display": "=if([$fAllDayEvent]=='Yes', 'none', 'flex')",
                    "flex-direction": "column",
                    "align-items": "center",
                    "text-align": "center",
                    "justify-content": "center"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=if(getMonth([$EventDate]) == 0, 'JAN', if(getMonth([$EventDate]) == 1, 'FEB', if(getMonth([$EventDate]) == 2, 'MAR', if(getMonth([$EventDate]) == 3, 'APR',if(getMonth([$EventDate]) == 4, 'MAY',if(getMonth([$EventDate]) == 5, 'JUN',if(getMonth([$EventDate]) == 6, 'JUL',if(getMonth([$EventDate]) == 7, 'AUG',if(getMonth([$EventDate]) == 8, 'SEP',if(getMonth([$EventDate]) == 9, 'OCT',if(getMonth([$EventDate]) == 10, 'NOV','DEC')))))))))))",
                      "style": {
                        "font-size": "15px",
                        "font-weight": "400"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "=getDate([$EventDate])",
                      "style": {
                        "font-size": "28px",
                        "font-weight": "600"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "ms-borderColor-neutralLight ms-fontColor-neutralPrimary"
                  },
                  "style": {
                    "width": "80px",
                    "height": "80px",
                    "border-width": "1px",
                    "border-style": "solid",
                    "display": "=if([$fAllDayEvent]=='Yes', 'flex', 'none')",
                    "flex-direction": "column",
                    "align-items": "center",
                    "text-align": "center",
                    "justify-content": "space-between"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=if(getMonth([$EventDate]) == 0, 'JAN', if(getMonth([$EventDate]) == 1, 'FEB', if(getMonth([$EventDate]) == 2, 'MAR', if(getMonth([$EventDate]) == 3, 'APR',if(getMonth([$EventDate]) == 4, 'MAY',if(getMonth([$EventDate]) == 5, 'JUN',if(getMonth([$EventDate]) == 6, 'JUL',if(getMonth([$EventDate]) == 7, 'AUG',if(getMonth([$EventDate]) == 8, 'SEP',if(getMonth([$EventDate]) == 9, 'OCT',if(getMonth([$EventDate]) == 10, 'NOV','DEC'))))))))))) + ' ' + getDate([$EventDate])",
                      "style": {
                        "font-size": "12px",
                        "font-weight": "400",
                        "flex-grow": "1",
                        "display": "flex",
                        "flex-direction": "column",
                        "justify-content": "center"
                      }
                    },
                    {
                      "elmType": "div",
                      "attributes": {
                        "class": "ms-borderColor-black"
                      },
                      "style": {
                        "width": "40px",
                        "border-bottom-width": "1px",
                        "border-bottom-style": "solid"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "=if(getMonth([$EndDate]) == 0, 'JAN', if(getMonth([$EndDate]) == 1, 'FEB', if(getMonth([$EndDate]) == 2, 'MAR', if(getMonth([$EndDate]) == 3, 'APR',if(getMonth([$EndDate]) == 4, 'MAY',if(getMonth([$EndDate]) == 5, 'JUN',if(getMonth([$EndDate]) == 6, 'JUL',if(getMonth([$EndDate]) == 7, 'AUG',if(getMonth([$EndDate]) == 8, 'SEP',if(getMonth([$EndDate]) == 9, 'OCT',if(getMonth([$EndDate]) == 10, 'NOV','DEC'))))))))))) + ' ' + getDate([$EndDate])",
                      "style": {
                        "font-size": "12px",
                        "font-weight": "400",
                        "flex-grow": "1",
                        "display": "flex",
                        "flex-direction": "column",
                        "justify-content": "center"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "padding": "0 16px 16px",
                "height": "172px"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "[$Category]",
                  "attributes": {
                    "class": "ms-fontColor-neutralSecondary"
                  },
                  "style": {
                    "font-size": "12px",
                    "font-weight": "400",
                    "margin-bottom": "4px",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "word-wrap": "normal",
                    "height": "18px"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "[$Title]",
                  "attributes": {
                    "class": "ms-fontColor-black"
                  },
                  "style": {
                    "font-size": "17px",
                    "font-weight": "300",
                    "margin-bottom": "20px",
                    "overflow": "hidden",
                    "white-space": "nowrap",
                    "word-wrap": "break-word",
                    "word-break": "break-word",
                    "height": "44px",
                    "line-height": "22px"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=if(getMonth([$EventDate]) == 0, 'Jan', if(getMonth([$EventDate]) == 1, 'Feb', if(getMonth([$EventDate]) == 2, 'Mar', if(getMonth([$EventDate]) == 3, 'Apr',if(getMonth([$EventDate]) == 4, 'May',if(getMonth([$EventDate]) == 5, 'Jun',if(getMonth([$EventDate]) == 6, 'Jul',if(getMonth([$EventDate]) == 7, 'Aug',if(getMonth([$EventDate]) == 8, 'Sep',if(getMonth([$EventDate]) == 9, 'Oct',if(getMonth([$EventDate]) == 10, 'Nov','Dec'))))))))))) + ' ' + getDate([$EventDate]) + ', ' + if([$fAllDayEvent]=='Yes', 'All day', toLocaleTimeString([$EventDate]))",
                  "attributes": {
                    "class": "ms-fontColor-black"
                  },
                  "style": {
                    "font-size": "12px",
                    "font-weight": "400",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "word-wrap": "normal",
                    "height": "18px"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "[$Location]",
                  "attributes": {
                    "class": "ms-fontColor-neutralSecondary"
                  },
                  "style": {
                    "font-size": "12px",
                    "font-weight": "400",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "word-wrap": "normal",
                    "height": "18px"
                  }
                },
                {
                  "elmType": "a",
                  "attributes": {
                    "class": "ms-fontColor-black",
                    "href": "=@currentWeb + '/_vti_bin/owssvr.dll?CS=109&&Cmd=Display&List=' + '81d00db2-89f6-45d7-b303-c0125a6bba69' + '&CacheControl=1&ID=' + [$ID] + '&Using=event.ics'"
                  },
                  "style": {
                    "display": "flex",
                    "flex-wrap": "nowrap",
                    "justify-content": "flex-start",
                    "align-items": "center",
                    "margin-top": "20px",
                    "cursor": "pointer",
                    "text-decoration": "none",
                    "outline": "none"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "attributes": {
                        "class": "ms-fontColor-themePrimary",
                        "iconName": "AddEvent"
                      },
                      "style": {
                        "font-weight": "normal",
                        "font-size": "15px",
                        "height": "16px",
                        "line-height": "16px",
                        "display": "inline-block",
                        "margin-right": "8px"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "Add to my calendar",
                      "style": {
                        "font-size": "14px",
                        "font-weight": "400",
                        "display": "block"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ],
      "customCardProps": {
        "openOnEvent": "hover",
        "directionalHint": "bottomCenter",
        "isBeakVisible": true,
        "formatter": {
          "elmType": "div",
          "style": {
            "width": "272px",
            "box-sizing": "border-box",
            "font-size": "17px",
            "display": "flex",
            "flex-direction": "column",
            "align-items": "flex-start",
            "padding": "16px"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "Who",
              "style": {
                "font-weight": "600",
                "margin-bottom": "8px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "flex-start"
              },
              "children": [
                {
                  "forEach": "personIterator in [$ParticipantsPicker]",
                  "elmType": "div",
                  "style": {
                    "width": "64px",
                    "height": "64px",
                    "overflow": "hidden",
                    "border-radius": "50%",
                    "margin": "4px",
                    "display": "=if(loopIndex('personIterator') >= 3, 'none', '')"
                  },
                  "children": [
                    {
                      "elmType": "img",
                      "defaultHoverField": "[$personIterator]",
                      "attributes": {
                        "src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
                        "title": "[$personIterator.title]"
                      },
                      "style": {
                        "position": "relative",
                        "top": "50%",
                        "left": "50%",
                        "width": "100%",
                        "height": "auto",
                        "margin-left": "-50%",
                        "margin-top": "-50%",
                        "display": "=if(length([$ParticipantsPicker]) > 3 && loopIndex('personIterator') >= 2, 'none', '')",
                        "vertical-align": "baseline"
                      }
                    },
                    {
                      "elmType": "div",
                      "attributes": {
                        "title": "=join([$ParticipantsPicker.title], ', ')",
                        "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
                      },
                      "style": {
                        "width": "100%",
                        "height": "100%",
                        "text-align": "center",
                        "line-height": "30px",
                        "font-size": "14px",
                        "display": "=if(length([$ParticipantsPicker]) > 3 && loopIndex('personIterator') == 2, '', 'none')"
                      },
                      "children": [
                        {
                          "elmType": "span",
                          "txtContent": "='+' + toString(length([$ParticipantsPicker]) - (2))"
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "txtContent": "Not specified",
              "style": {
                "font-weight": "300",
                "display": "=if(length([$ParticipantsPicker])==0, 'block', 'none'"
              }
            }
          ]
        }
      }
    }
  }
}