Formatting Number/Date-Type column by 7 segments display

A lot of column formatting using SVG has been created so far.

Check amazing samples from てっちゃん.

mynote365.hatenadiary.com

In this post, I will show you how to format a number-type column using 7segment display made with SVG and also the JSON of applying this to a date column.

SVG path for 7 seg

7 segment display is constructed by "dark segments" and "glow segments", and it can be represented by a combination of two SVG path elements.

Formatting for Number-type column

To apply 7seg svg for number-type, it requires highly-nested IF statement switching path of segments depending on number though, JSON for this format can be written as below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {},
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(@currentField),0,1)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(@currentField),0,1)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(@currentField),0,1)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(@currentField),0,1)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(@currentField),0,1)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(@currentField),0,1)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='8','',if(substring(toString(@currentField),0,1)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(@currentField),0,1)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(@currentField),0,1)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(@currentField),0,1)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(@currentField),0,1)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(@currentField),0,1)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    }
  ]
}

• note : This works only for first decimal of given number. For any N-digits number, you need copy & paste second div element N times.

Apply to Date column

I will not go detail but JSON for Date-type column is below:

Or you can download json file from my repo

github.com

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(getYear(@currentField)=='','none','')",
    "margin-top": "10px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),0,1)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(getYear(@currentField)),0,1)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),0,1)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),0,1)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),0,1)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(getYear(@currentField)),0,1)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='8','',if(substring(toString(getYear(@currentField)),0,1)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),0,1)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),0,1)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),0,1)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),0,1)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),0,1)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),1,2)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(getYear(@currentField)),1,2)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),1,2)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),1,2)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),1,2)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(getYear(@currentField)),1,2)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='8','',if(substring(toString(getYear(@currentField)),1,2)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),1,2)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),1,2)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),1,2)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),1,2)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),1,2)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),2,3)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(getYear(@currentField)),2,3)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),2,3)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),2,3)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),2,3)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(getYear(@currentField)),2,3)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='8','',if(substring(toString(getYear(@currentField)),2,3)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),2,3)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),2,3)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),2,3)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),2,3)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),2,3)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),3,4)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(getYear(@currentField)),3,4)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),3,4)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),3,4)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(getYear(@currentField)),3,4)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(getYear(@currentField)),3,4)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='8','',if(substring(toString(getYear(@currentField)),3,4)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(getYear(@currentField)),3,4)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),3,4)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),3,4)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(getYear(@currentField)),3,4)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(getYear(@currentField)),3,4)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "8px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "-2 2 6 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "M 0,25 L 3,25 L 3,28 L 0,28 Z"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='8','',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),0,1)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='8','',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getMonth(@currentField)<10,'0'+getMonth(@currentField),getMonth(@currentField))),1,2)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "8px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "-2 2 6 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "M 0,25 L 3,25 L 3,28 L 0,28 Z"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='8','',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),0,1)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "margin": "2px",
        "width": "20px",
        "height": "60px"
      },
      "children": [
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-neutralQuaternaryAlt"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='0','M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='1','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='2','M5,4 L8,7 L8,16 L5,19 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='3','M5,4 L8,7 L8,16 L5,19 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='4','M6,3 L21,3 L18,6 L9,6 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='5','M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='6','M22,4 L22,19 L19,16 L19,7 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='7','M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='8','',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='9','M5,21 L8,24 L8,33 L5,36 Z','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z'))))))))))"
              }
            }
          ]
        },
        {
          "elmType": "svg",
          "style": {
            "fill": "currentColor",
            "position": "absolute",
            "top": "0",
            "right": "0"
          },
          "attributes": {
            "viewBox": "4 2 19 36",
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "path",
              "attributes": {
                "d": "=if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='0','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='1','M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='2','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='3','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='4','M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='5','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='6','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='7','M6,3 L21,3 L18,6 L9,6 Z M22,4 L22,19 L19,16 L19,7 Z M22,21 L22,36 L19,33 L19,24 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='8','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M5,21 L8,24 L8,33 L5,36 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',if(substring(toString(if(getDate(@currentField)<10,'0'+getDate(@currentField),getDate(@currentField))),1,2)=='9','M6,3 L21,3 L18,6 L9,6 Z M5,4 L8,7 L8,16 L5,19 Z M22,4 L22,19 L19,16 L19,7 Z M6,20 L8,18 L19,18 L21,20 L19,22 L8,22 Z M22,21 L22,36 L19,33 L19,24 Z M6,37 L9,34 L18,34 L21,37 Z',''))))))))))"
              }
            }
          ]
        }
      ]
    }
  ]
}

( I know it's too lengthy expression..)

That's all.