Start time and End time values not showing in date/time column

Question

Hi Team

I have a date/time column in a Modern SharePoint list, which I've applied some JSON formatting to show the below value. The issue here is, it's not showing the time details as the JSON is only pulling the date details. The only way it'll show the time details is when the end user clicks on the calendar, which isn't ideal for my scenario.

Is there a way where the existing JSON formatting can be amended to show the time details as well, or would I need to create a calculated column to pull the time details separately? I'm using the JSON coding from the github website and here's the link to where I copied the JSON coding from. https://github.com/pnp/List-Formatting/tree/master/column-samples/date-page-a-day-calendar

If it can't be achieved, via the amending the existing JSON, can you please provide me the coding to pull the time details with a calculated column?

Cheers,
Harry

Answer 1

Hi @Harry N Nomikos ,

Thank you for posting in this community.

Sharepoint json formating can only use getDate() ,getMonth(), getYear() ,there is no parameter to get the time, so we need to use calculate column to get the specific time indirectly.

Here are steps：

1.You need to create a calculated column to pull the time details separately.

=TEXT([caltime], "hh:mm")

2.Modify a line of code in the existing JSON：

"txtContent": "=getDate(@currentField) + '\n' + [$caltime]",

Output:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-direction": "column",
    "width": "50px",
    "margin": "5px",
    "display": "=if(@currentField,'flex','none')"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=getYear(@currentField)",
      "style": {
        "margin": "2px"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontWeight-bold"
      }
    },
    {
      "elmType": "div",
      "forEach": "weekday in split('0,1,2,3,4,5,6',',')",
      "style": {
        "white-space": "nowrap"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-fontWeight-bold"
      },
      "children": [
        {
          "elmType": "div",
          "txtContent": "=if([$weekday]=='0','Saturday',if([$weekday]=='1','Sunday',if([$weekday]=='2','Monday',if([$weekday]=='3','Tuesday',if([$weekday]=='4','Wednesday',if([$weekday]=='5','Thursday',if([$weekday]=='6','Friday',''))))))",
          "style": {
            "margin-bottom": "2px",
            "display": "=if((getMonth(@currentField)+1)>2,if(((getDate(@currentField)+floor(26*(getMonth(@currentField)+1+1)/10)+Number(substring(toString(getYear(@currentField)),2,4))+floor(Number(substring(toString(getYear(@currentField)),2,4))/4)+floor(Number(substring(toString(getYear(@currentField)),0,2))/4)-2*Number(substring(toString(getYear(@currentField)),0,2)))%7)==Number([$weekday]),'','none'),if(((getDate(@currentField)+floor(26*(getMonth(@currentField)+1+12+1)/10)+Number(substring(toString(getYear(@currentField)-1),2,4))+floor(Number(substring(toString(getYear(@currentField)-1),2,4))/4)+floor(Number(substring(toString(getYear(@currentField)-1),0,2))/4)-2*Number(substring(toString(getYear(@currentField)-1),0,2)))%7)==Number([$weekday]),'','none')"
          }
        }
      ]
    },
    {
      "elmType": "div",
      "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',''))))))))))))",
      "style": {
        "display": "flex",
        "justify-content": "center",
        "align-items": "center",
        "width": "100%",
        "height": "20px",
        "border": "1px solid",
        "margin-bottom": "-1px"
      },
      "attributes": {
        "class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-themePrimary ms-fontWeight-bold"
      }
    },
    {
      "elmType": "div",
      "txtContent": "=getDate(@currentField) + '\n' + [$caltime]",
      "style": {
        "display": "table-cell",
        "text-align": "center",
        "justify-content": "center",
        "align-items": "center",
        "width": "48px",
        "border": "1px solid",
        "height": "30px"
      },
      "attributes": {
        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-bold ms-fontSize-25"
      }
    }
  ]
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi Haoyan Xue_MSFT

Thank you for the above.

The amended JSON you provided doesn't work, can you please review and provide me with the updated JSON coding.

Cheers,
Harry