Forum Discussion

FlowTime1990's avatar
FlowTime1990
Brass Contributor
Jun 21, 2023

SharePoint Custom Formatting Help - ADD Month and Date

I found this code that does a cool timeline but I cannot figure out how to add the Month and Date to it. Here are my columns:

 

I want to show the date in the following format March 25th below the blue dot.

 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "absolute",
      "left": "= @rowIndex * 500 + 'px'",
      "display": "flex",
      "flex-direction": "column",
      "width": "500px",
      "height": "500px",
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "height": "45%",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "display": "=if(@rowIndex % 2 == 0, 'flex' ,'none')",
              "width": "100%",
              "height": "95%",
              "justify-content": "center",
              "align-items": "flex-end",
              "font-size": "20px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(@rowIndex % 2 == 0, 'none' ,'flex')",
              "flex-direction": "column",
              "align-items": "center",
              "height": "200px",
              "width": "100%",
              "margin-top": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "100%",
                  "width": "90%",
                  "border": "1px solid"
                },
                "attributes": {
                  "class": "ms-borderColor-neutralPrimary"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "align-items": "center",
                      "height": "15%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "padding-top": "3px",
                      "padding-bottom": "3px",
                      "margin-top": "-2px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "[$Title]",
                        "style": {
                          "margin-left": "15px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "height": "80%",
                      "width": "100%",
                      "overflow-y": "scroll",
                      "display": "flex",
                      "justify-content": "center"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "width": "90%",
                          "margin-top": "10px"
                        },
                        "children": [
                          {
                            "elmType": "img",
                            "style": {
                              "float": "left",
                              "max-width": "50%",
                              "max-height": "90%",
                              "margin-right": "20px",
                              "margin-bottom": "10px",
                              "display": "=if([$Image.serverRelativeUrl] == '' ,'none' ,'')"
                            },
                            "attributes": {
                              "src": "[$Image.serverRelativeUrl]"
                            }
                          },
                          {
                            "elmType": "span",
                            "style": {
                              "padding-top": "10px"
                            },
                            "txtContent": "[$Description]"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "width": "100%",
          "height": "10%",
          "align-items": "center"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "2px",
              "width": "50%"
            },
            "attributes": {
              "class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "height": "30px",
              "width": "30px",
              "border-radius": "50%",
              "cursor": "pointer",
              "outline": "none"
            },
            "attributes": {
              "class": "ms-bgColor-themePrimary"
            }
          },
          {
            "elmType": "div",
            "style": {
              "border-width": "2px",
              "border-style": "solid",
              "height": "2px",
              "width": "50%"
            },
            "attributes": {
              "class": "ms-bgColor-neutralSecondary ms-borderColor-neutralSecondary"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "height": "45%",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "display": "=if(@rowIndex % 2 == 0, 'none' ,'flex')",
              "width": "100%",
              "height": "95%",
              "justify-content": "center",
              "align-items": "flex-start",
              "font-size": "20px"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if(@rowIndex % 2 == 0, 'flex' ,'none')",
              "flex-direction": "column",
              "align-items": "center",
              "height": "200px",
              "width": "100%",
              "margin-top": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "height": "100%",
                  "width": "90%",
                  "border": "1px solid"
                },
                "attributes": {
                  "class": "ms-borderColor-neutralPrimary"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "align-items": "center",
                      "height": "15%",
                      "width": "100%",
                      "color": "white",
                      "font-size": "20px",
                      "padding-top": "3px",
                      "padding-bottom": "3px",
                      "margin-top": "-2px"
                    },
                    "attributes": {
                      "class": "ms-bgColor-themePrimary"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "txtContent": "[$Title]",
                        "style": {
                          "margin-left": "15px"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "height": "80%",
                      "width": "100%",
                      "overflow-y": "scroll",
                      "display": "flex",
                      "justify-content": "center"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "width": "90%",
                          "margin-top": "10px"
                        },
                        "children": [
                          {
                            "elmType": "img",
                            "style": {
                              "float": "left",
                              "max-width": "50%",
                              "max-height": "90%",
                              "margin-right": "20px",
                              "margin-bottom": "10px",
                              "display": "=if([$Image.serverRelativeUrl] == '' ,'none' ,'')"
                            },
                            "attributes": {
                              "src": "[$Image.serverRelativeUrl]"
                            }
                          },
                          {
                            "elmType": "span",
                            "style": {
                              "padding-top": "10px"
                            },
                            "txtContent": "[$Description]"
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

 

 

No RepliesBe the first to reply