Column formattingSharePoint Online

Compressed Date

This sample provide a different style to provide Date in a compress way such us align days and month and display year parallel as vertical.

Get this format View on GitHub

Shared by André Lage
Updated Mar 23, 2024

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "padding": "10px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "width": "50px",
        "height": "50px",
        "float": "left"
      },
      "inlineEditField": "@currentField",
      "children": [
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "2px",
            "left": "0",
            "width": "32px",
            "height": "24px"
          },
          "txtContent": "=if(getMonth(@currentField)==0, 'Jan', if(getMonth(@currentField)==1, 'Feb', if(getMonth(@currentField)==2, 'Mar', if(getMonth(@currentField)==3, 'Apr',  if(getMonth(@currentField)==4, 'May', if(getMonth(@currentField)==5, 'Jun', if(getMonth(@currentField)==6 , 'Jul', if(getMonth(@currentField)==7, 'Aug', if(getMonth(@currentField)==8 , 'Sep', if(getMonth(@currentField)==9, 'Oct', if(getMonth(@currentField)==10, 'Nov', if(getMonth(@currentField)==11, 'Dec', ''))))))))))))",
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-16 ms-fontColor-themeTertiary--hover"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "display": "flex",
            "justify-content": "center",
            "align-items": "center",
            "top": "25px",
            "left": "0",
            "width": "32px",
            "height": "25px",
            "border": "1px"
          },
          "txtContent": "=getDate(@currentField)",
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-20 ms-fontColor-themeTertiary--hover"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "35px",
            "width": "10px",
            "height": "48px",
            "border": "1px"
          },
          "txtContent": "=getYear(@currentField)",
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-10 ms-fontColor-themeTertiary--hover"
          }
        }
      ]
    }
  ]
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "padding": "10px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "width": "50px",
        "height": "50px",
        "float": "left"
      },
      "inlineEditField": "@currentField",
      "children": [
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "2px",
            "left": "0",
            "width": "32px",
            "height": "24px"
          },
          "txtContent": "=if(getMonth(@currentField)==0, 'Jan', if(getMonth(@currentField)==1, 'Feb', if(getMonth(@currentField)==2, 'Mar', if(getMonth(@currentField)==3, 'Apr',  if(getMonth(@currentField)==4, 'May', if(getMonth(@currentField)==5, 'Jun', if(getMonth(@currentField)==6 , 'Jul', if(getMonth(@currentField)==7, 'Aug', if(getMonth(@currentField)==8 , 'Sep', if(getMonth(@currentField)==9, 'Oct', if(getMonth(@currentField)==10, 'Nov', if(getMonth(@currentField)==11, 'Dec', ''))))))))))))",
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-16 ms-fontColor-themeTertiary--hover"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "display": "flex",
            "justify-content": "center",
            "align-items": "center",
            "top": "25px",
            "left": "0",
            "width": "32px",
            "height": "25px",
            "border": "1px"
          },
          "txtContent": "=getDate(@currentField)",
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-20 ms-fontColor-themeTertiary--hover"
          }
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "top": "0",
            "left": "35px",
            "width": "10px",
            "height": "48px",
            "border": "1px"
          },
          "txtContent": "=getYear(@currentField)",
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-10 ms-fontColor-themeTertiary--hover"
          }
        }
      ]
    }
  ]
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample provide a different style to provide Date in a compress way such us align days and month and display year parallel as vertical.

screenshot of the sample

View requirements

This format can be applied to any date time Column

Sample

Solution	Author(s)
date-compress-format.json	André Lage

Version history

Version	Date	Comments
1.0	December 6, 2021	Initial release
1.1	March 23, 2024	Fixed to use `@currentField` instead of column specific name `[$DueDate]`

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

More formats like this

Country Flag

Row Actions

Assign to Me