SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

World Current Time

This sample demonstrates the side-by-side display and comparison of the current time in different countries around the world.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Aug 30, 2024

World Current Time formatting preview
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.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "relative",
        "min-width": "100%",
        "display": "flex",
        "align-items": "center",
        "white-space": "nowrap"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "width": "95%",
            "position": "absolute",
            "display": "flex",
            "flex-direction": "row",
            "justify-content": "space-around",
            "border": "2px solid",
            "font-size": "15px"
          },
          "attributes": {
            "class": "ms-fontColor-themePrimary"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "width": "=if([$UTC]>0,((1-abs([$UTC]%1)) *100)+'%',(abs([$UTC]%1)*100)+'%')",
                "display": "=if([$UTC]%1==0,'none','')"
              },
              "attributes": {
                "class": "=if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=5||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=22,'ms-bgColor-themePrimary ms-fontColor-white',if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=8||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=19,'ms-bgColor-themeLight',''))"
              }
            },
            {
              "elmType": "div",
              "forEach": "hour in split('0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23',',')",
              "txtContent": "=ceiling(abs((24+Number([$UTC])+Number([$hour]))%24))",
              "style": {
                "width": "=if(Number([$hour])==23,if(Number([$UTC])%1==0,'100%',if(Number([$UTC])>0,(abs(Number([$UTC])%1)*100)+'%',((1-abs(Number([$UTC])%1))*100)+'%')),'100%')",
                "text-align": "center"
              },
              "attributes": {
                "class": "=if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=5||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=22,'ms-bgColor-themePrimary ms-fontColor-white',if(abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)<=8||abs(ceiling(24+Number([$UTC])+Number([$hour]))%24)>=19,'ms-bgColor-themeLight',''))"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "position": "absolute",
            "width": "7px",
            "height": "43px",
            "left": "=((Number(@now)%86400000)/3600000)/24*100+'%'",
            "cursor": "pointer"
          },
          "attributes": {
            "class": "ms-bgColor-neutralTertiary ms-bgColor-neutralPrimary--hover"
          },
          "customCardProps": {
            "openOnEvent": "hover",
            "directionalHint": "rightCenter",
            "isBeakVisible": true,
            "formatter": {
              "elmType": "div",
              "style": {
                "padding": "10px 20px",
                "font-weight": "bold",
                "font-size": "20px"
              },
              "children": [
                {
                  "elmType": "span",
                  "txtContent": "=padStart(toString(floor(((Number(@now)+Number([$UTC])*3600000)%86400000)/3600000)),2,'0')"
                },
                {
                  "elmType": "span",
                  "txtContent": ":"
                },
                {
                  "elmType": "span",
                  "txtContent": "=padStart(toString(floor(((Number(@now)+Number([$UTC])*3600000)%86400000)%3600000/60000)),2,'0')"
                }
              ]
            }
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitiongeneric-world-time.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /children/0/children/0/children/1/forEach must match pattern "^[^\]\$@\. ]+ in (\@currentField|\[\$.+\])$"

From the contributor

How to use this sample

Summary

This sample demonstrates the side-by-side display and comparison of the current time in different countries around the world.

screenshot of the sample

View requirements

This format can be applied to any column type but expects the following columns to be part of the view:

Type Internal Name Required
Number UTC Yes

Sample

Solution Author(s)
generic-world-time.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 April 17, 2022 Initial release
1.1 March 3, 2023 Fixed to the method using the split operator.
1.2 August 30, 2024 Fixed that the right border was no longer displayed.

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.

Keep exploring

More formats like this

File Preview Callout with the embed Action

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

Explore format

People Name Avatar Card

This SharePoint column formatting sample provides a modern, interactive People card for list items using JSON formatting.

Explore format

Yearly Gantt Chart

This sample demonstrates the display of a yearly Gantt chart.

Explore format