{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-bgColor-info--hover"
    },
    "style": {
      "border-bottom": "1px solid #e0e0e0",
      "padding-left": "10px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "margin-top": "-20px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "inline-block",
              "position": "relative"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "80px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "inlineEditField": "[$AllDay]",
                    "style": {
                      "display": "=if([$AllDay]== false, 'none', '')",
                      "margin-top": "-40px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-16 ms-fontColor-black ms-fontWeight-semibold"
                    },
                    "txtContent": "ALL DAY"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "=if([$AllDay]!= false, 'none', '')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-16 ms-fontColor-black ms-fontWeight-semibold"
                    },
                    "inlineEditField": "[$StartDate]",
                    "txtContent": "=replace(toLocaleTimeString([$StartDate]), ':00', '')"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "=if([$AllDay]!= false, 'none', '')"
                    },
                    "attributes": {
                      "class": "ms-fontColor-gray100 ms-fontSize-12"
                    },
                    "txtContent": "=[$Difference]+'m'"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding-top": "5px",
                      "cursor": "pointer"
                    },
                    "attributes": {
                      "iconName": "=if([$Favorite]==true,'FavoriteStarFill','FavoriteStar')",
                      "class": "ms-fontColor-gray100 ms-fontSize-18"
                    },
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Favorite": "=if([$Favorite]==false,true,false)"
                      }
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "top": "=if([$AllDay]!= false, '33px', '68px')"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontColor-black ms-fontWeight-semibold",
                      "iconName": "calendar"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "inline-block",
                      "padding-left": "5px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-12 ms-fontColor-black ms-fontWeight-semibold"
                    },
                    "txtContent": "=toLocaleDateString([$StartDate])"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "50px",
          "margin-top": "-50px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "padding-left": "15px",
              "display": "inline-block"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "8px",
                  "border-radius": "50%"
                },
                "attributes": {
                  "class": "=if([$Categorize] == 'Red', 'ms-bgColor-red ms-fontColor-white', if([$Categorize] == 'Blue','ms-bgColor-blue ms-fontColor-white',if([$Categorize] == 'Green','ms-bgColor-green ms-fontColor-white',if([$Categorize] == 'Orange','ms-bgColor-orangeLighter ms-fontColor-white',if([$Categorize] == 'Purple','ms-bgColor-purple ms-fontColor-white',if([$Categorize] == 'Yellow','ms-bgColor-sharedYellow10 ms-fontColor-white', 'ms-bgColor-themePrimary ms-fontColor-white'))))))+' ms-fontSize-20 '",
                  "iconName": "=if([$Category] == 'Meeting', 'Calendar', if([$Category] == 'Work hours','Clock',if([$Category] == 'Business','CityNext2',if([$Category] == 'Holiday','AirplaneSolid',if([$Category] == 'Get-together','Cocktails',if([$Category] == 'Gifts','Giftbox', if([$Category] == 'Birthday','BirthdayCake','')))))))"
                },
                "inlineEditField": "[$Category]"
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "padding-left": "15px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "padding": "5px",
              "cursor": "pointer",
              "width": "180px",
              "white-space": "nowrap",
              "overflow": "hidden",
              "text-overflow": "ellipsis"
            },
            "attributes": {
              "class": "ms-fontSize-20 ms-fontColor-black ms-fontWeight-semibold",
              "title": "[$Title]"
            },
            "txtContent": "[$Title]",
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "inherit"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "padding": "10px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "0px 5px",
                          "display": "inline-block"
                        },
                        "attributes": {
                          "iconName": "blog",
                          "class": "ms-fontSize-16"
                        }
                      },
                      {
                        "elmType": "div",
                        "txtContent": "[$Title]",
                        "style": {
                          "padding": "0px 5px 5px 5px",
                          "display": "inline-block"
                        },
                        "attributes": {
                          "class": "ms-fontSize-20 ms-fontWeight-semibold"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "inlineEditField": "[$Description]",
                        "txtContent": "[$Description]",
                        "style": {
                          "padding": "0px 10px 10px 5px",
                          "margin-left": "35px",
                          "display": "inline-block",
                          "max-width": "600px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "attributes": {
                          "class": "ms-fontSize-14 ms-fontWeight-semibold"
                        },
                        "txtContent": "='Start date: '+ toLocaleDateString([$StartDate])",
                        "style": {
                          "padding": "10px",
                          "margin-left": "10px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "10px",
                          "display": "inline-block"
                        },
                        "inlineEditField": "[$TeamUrl]",
                        "attributes": {
                          "iconName": "Link",
                          "class": "ms-fontSize-20 ms-fontColor-blue"
                        }
                      },
                      {
                        "elmType": "a",
                        "style": {
                          "padding-left": "5px",
                          "display": "inline-block",
                          "cursor": "pointer",
                          "width": "200px"
                        },
                        "attributes": {
                          "src": "[$TeamUrl]",
                          "class": "ms-fontColor-blue"
                        },
                        "txtContent": "Link"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "forEach": "personIterator in [$Editor]",
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "= 'Last Modified ' + toLocaleDateString([$Modified]) + ' by ' + [$personIterator.title]",
                        "attributes": {
                          "class": "ms-fontSize-12 ms-fontColor-gray100"
                        },
                        "style": {
                          "padding": "0px 10px 10px 5px",
                          "margin-left": "5px",
                          "display": "inline-block"
                        }
                      }
                    ]
                  }
                ]
              },
              "openOnEvent": "click",
              "directionalHint": "topCenter",
              "isBeakVisible": true
            }
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "inlineEditField": "[$Attendees]",
                "style": {
                  "max-width": "100px",
                  "height": "40px",
                  "overflow": "hidden",
                  "display": "inline-block"
                },
                "children": [
                  {
                    "forEach": "personIterator in [$Attendees]",
                    "elmType": "div",
                    "style": {
                      "display": "inline-block",
                      "text-align": "center",
                      "width": "45px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "img",
                            "style": {
                              "width": "38px",
                              "border-radius": "50%"
                            },
                            "defaultHoverField": "[$personIterator]",
                            "attributes": {
                              "src": "=getUserImage('[$personIterator.email]','small')"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "=if(length([$Attendees])>2,'inline-block','none')",
                  "text-align": "center",
                  "cursor": "pointer",
                  "width": "25px",
                  "height": "25px",
                  "position": "absolute",
                  "border-radius": "50%",
                  "border": "1px solid #979593",
                  "padding": "5px"
                },
                "attributes": {
                  "class": "ms-fontSize-20 ms-fontColor-gray100"
                },
                "txtContent": "='+'+(length([$Attendees])-2)",
                "customCardProps": {
                  "openOnEvent": "click",
                  "formatter": {
                    "elmType": "div",
                    "children": [
                      {
                        "forEach": "personIterator in [$Attendees]",
                        "elmType": "div",
                        "style": {
                          "padding": "10px",
                          "text-align": "center"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "defaultHoverField": "[$personIterator]",
                            "children": [
                              {
                                "elmType": "img",
                                "style": {
                                  "width": "38px",
                                  "border-radius": "50%"
                                },
                                "attributes": {
                                  "src": "=getUserImage('[$personIterator.email]','small')"
                                }
                              },
                              {
                                "elmType": "div",
                                "attributes": {
                                  "title": "[$personIterator.title]"
                                },
                                "txtContent": "[$personIterator.title]"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                }
              },
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "inline-block"
                    },
                    "attributes": {
                      "iconName": "POI",
                      "class": "ms-fontColor-gray100 ms-fontSize-14"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "inline-block"
                    },
                    "attributes": {
                      "class": "ms-fontColor-gray100 ms-fontSize-14"
                    },
                    "txtContent": "=[$Location]",
                    "inlineEditField": "[$Location]"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "height": "100px",
          "position": "relative",
          "width": "100px",
          "border-left": "1px solid #498205"
        },
        "attributes": {
          "class": "ms-bgColor-greenLight"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "absolute",
              "width": "100px",
              "top": "45px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "margin-left": "10px",
                  "cursor": "pointer"
                },
                "attributes": {
                  "iconName": "Edit",
                  "class": "ms-fontColor-black ms-fontSize-24"
                },
                "customRowAction": {
                  "action": "defaultClick"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "margin-left": "20px",
                  "cursor": "pointer"
                },
                "attributes": {
                  "iconName": "Delete",
                  "class": "ms-fontColor-black ms-fontSize-24"
                },
                "customRowAction": {
                  "action": "delete"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}