{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": "true",
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "float": "left",
      "width": "400px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "margin-top": "300px",
          "margin-left": "70px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "position": "relative",
              "width": "50px",
              "height": "50px",
              "float": "left"
            },
            "inlineEditField": "[$[$DueDate]]",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "top": "2px",
                  "left": "0",
                  "width": "32px",
                  "height": "24px",
                  "color": "#897f42"
                },
                "txtContent": "=if(getMonth([$DueDate])==0, 'Jan', if(getMonth([$DueDate])==1, 'Feb', if(getMonth([$DueDate])==2, 'Mar', if(getMonth([$DueDate])==3, 'Apr',  if(getMonth([$DueDate])==4, 'May', if(getMonth([$DueDate])==5, 'Jun', if(getMonth([$DueDate])==6 , 'Jul', if(getMonth([$DueDate])==7, 'Aug', if(getMonth([$DueDate])==8 , 'Sep', if(getMonth([$DueDate])==9, 'Oct', if(getMonth([$DueDate])==10, 'Nov', if(getMonth([$DueDate])==11, 'Dec', ''))))))))))))",
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-16"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "display": "flex",
                  "justify-content": "center",
                  "align-items": "center",
                  "top": "25px",
                  "left": "0",
                  "width": "32px",
                  "height": "25px",
                  "color": "#897f42",
                  "border": "1px"
                },
                "txtContent": "=getDate([$DueDate])",
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-20"
                }
              },
              {
                "elmType": "div",
                "style": {
                  "position": "absolute",
                  "top": "0",
                  "left": "35px",
                  "width": "10px",
                  "height": "48px",
                  "color": "#897f42",
                  "border": "1px"
                },
                "txtContent": "=getYear([$DueDate])",
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-10"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "font-family": "cursive",
          "position": "absolute",
          "font-size": "18px",
          "margin-top": "30px",
          "margin-left": "80px",
          "width": "240px",
          "height": "180px"
        },
        "txtContent": "=if(lastIndexOf([$Description]+'.','.')<= 130,[$Description], substring([$Description], 0, 127))",
        "inlineEditField": "[$Description]",
        "children": [
          {
            "elmType": "div"
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "20px",
          "position": "absolute",
          "margin-top": "340px",
          "margin-left": "300px",
          "color": "#897f42",
          "cursor": "pointer",
          "display": "=if(lastIndexOf([$Description]+'.','.')<= 130, 'none', 'block')"
        },
        "attributes": {
          "iconName": "ActionCenter"
        },
        "customCardProps": {
          "formatter": {
            "elmType": "div",
            "txtContent": "=if(lastIndexOf([$Description]+'.','.')<= 130,'empty' ,[$Description])",
            "style": {
              "font-size": "14px",
              "padding": "10px",
              "width": "160px",
              "color": "black",
              "background-color": "white"
            }
          },
          "openOnEvent": "click",
          "directionalHint": "rightCenter",
          "isBeakVisible": true,
          "beakStyle": {
            "backgroundColor": "white"
          }
        }
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "20px",
          "position": "absolute",
          "margin-top": "340px",
          "margin-left": "=if(lastIndexOf([$Description]+'.','.')<= 130, '290px', '275px')",
          "color": "#897f42",
          "cursor": "pointer"
        },
        "attributes": {
          "iconName": "Edit"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "style": {
          "font-size": "20px",
          "position": "absolute",
          "margin-top": "340px",
          "margin-left": "=if(lastIndexOf([$Description]+'.','.')<= 130, '260px', '250px')",
          "color": "#897f42",
          "cursor": "pointer"
        },
        "attributes": {
          "iconName": "Delete"
        },
        "customRowAction": {
          "action": "delete"
        }
      },
      {
        "elmType": "svg",
        "style": {
          "fill": "#897f42",
          "cursor": "pointer"
        },
        "attributes": {
          "viewBox": "0 0 2048 2048",
          "class": "ms-fontColor-themePrimary"
        },
        "children": [
          {
            "elmType": "path",
            "attributes": {
              "d": "m1792,256l0,1792l-1536,0l0,-1792l512,0q0,-53 20,-99t55,-82t81,-55t100,-20q53,0 99,20t82,55t55,81t20,100l512,0zm-1152,128l0,128l768,0l0,-128l-256,0l0,-128q0,-27 -10,-50t-27,-40t-41,-28t-50,-10q-27,0 -50,10t-40,27t-28,41t-10,50l0,128l-256,0zm1099.00025,-82.00017l-200.50025,0l-2.5,338.00017l-1024,0l0,-332.50022l-201.50027,0l0.50001,1690.00047l1428.0005,0l0,-1695.50042z"
            }
          }
        ]
      }
    ]
  }
}