Page-a-day Calendar

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "=if(@currentField,'flex','none')", "margin": "5px 0", "justify-content": "center" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-themePrimary" }, "style": { "display": "flex", "flex-direction": "column", "width": "54px", "border-radius": "8px", "box-shadow": "0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)", "background-color": "=if(toDateString(@currentField)==toDateString(@now),'#c43b33','')" }, "children": [ { "elmType": "div", "txtContent": "=substring('JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC',getMonth(@currentField)*3,getMonth(@currentField)*3+3)", "style": { "display": "flex", "justify-content": "center", "letter-spacing": "1px", "padding": "2px 0 2px 0", "color": "white", "font-weight": "bold" } }, { "elmType": "div", "style": { "display": "flex", "background-color": "white", "border-radius": "0 0 7px 7px", "flex-direction": "column", "padding": "0px 2px 3px 2px", "line-height": "1.2" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "align-items": "flex-start", "justify-content": "space-between" }, "children": [ { "elmType": "div", "style": { "display": "=if(Date(toDateString(@currentField))<Date(toDateString(@now)),'flex','none')", "flex-direction": "column", "align-items": "center", "justify-content": "flex-start", "color": "red", "font-size": "10px" }, "children": [ { "elmType": "div", "txtContent": "=if(floor((@now-Date(toDateString(@currentField)))/86400000)>30,'30+',floor((@now-Date(toDateString(@currentField)))/86400000))" }, { "elmType": "div", "txtContent": "←", "style": { "line-height": "0.5" } } ] }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "flex-grow": "1" }, "children": [ { "elmType": "div", "txtContent": "=getDate(@currentField)", "style": { "display": "flex", "justify-content": "center", "font-size": "22px", "font-weight": "bold" } } ] }, { "elmType": "div", "style": { "display": "=if(Date(toDateString(@currentField))>@now,'flex','none')", "flex-direction": "column", "align-items": "center", "color": "green", "font-size": "10px", "justify-content": "flex-start" }, "children": [ { "elmType": "div", "txtContent": "=if(ceiling((Date(toDateString(@currentField))-@now)/86400000)>30,'30+',ceiling((Date(toDateString(@currentField))-@now)/86400000))" }, { "elmType": "div", "txtContent": "→", "style": { "line-height": "0.5" } } ] } ] }, { "elmType": "div", "style": { "display": "flex", "justify-content": "center", "padding-bottom": "2px" }, "children": [ { "elmType": "span", "txtContent": "=substring('SUNMONTUEWEDTHUFRISAT',((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField))%7)*3,((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField))%7)*3+3)", "style": { "background-color": "#4c4c4c", "color": "white", "font-size": "10px", "border-radius": "3px", "padding": "0px 4px 1px 4px" } } ] } ] } ] } ] }

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "=if(@currentField,'flex','none')", "margin": "5px 0" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "width": "44px", "border-radius": "8px", "box-shadow": "0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)", "background-color": "=if(toDateString(@currentField)==toDateString(@now),'#c43b33',if(Date(toDateString(@currentField))>@now,'#107c10','gray'))", "font-weight": "bold" }, "children": [ { "elmType": "div", "txtContent": "=substring('JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC',getMonth(@currentField)*3,getMonth(@currentField)*3+3)", "style": { "display": "flex", "justify-content": "center", "letter-spacing": "1px", "padding": "2px 0 2px 0", "color": "white" } }, { "elmType": "div", "txtContent": "=getDate(@currentField)", "style": { "display": "flex", "background-color": "white", "margin": "0 3px 3px 3px", "border-radius": "0 0 5px 5px", "justify-content": "center", "font-size": "22px", "padding-bottom": "3px" } } ] } ] }

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "=if(@currentField,'flex','none')", "margin": "5px 0" }, "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "width": "44px", "border-radius": "8px", "box-shadow": "0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)", "background-color": "=if(((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField)+6)%7)>4,'#c43b33','#4c4c4c')", "font-weight": "bold" }, "children": [ { "elmType": "div", "txtContent": "=substring('JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC',getMonth(@currentField)*3,getMonth(@currentField)*3+3)", "style": { "display": "flex", "justify-content": "center", "letter-spacing": "1px", "padding": "2px 0 2px 0", "color": "white" } }, { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "line-height": "1.1", "background-color": "white", "border-radius": "0 0 5px 5px", "margin": "0 3px 3px 3px" }, "children": [ { "elmType": "div", "txtContent": "=getDate(@currentField)", "style": { "display": "flex", "justify-content": "center", "font-size": "22px" } }, { "elmType": "div", "txtContent": "=substring('SUNMONTUEWEDTHUFRISAT',((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField))%7)*3,((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/4)-floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/100)+floor((getYear(@currentField)-if((getMonth(@currentField)+1)<3,1,0))/400)+1*substring('032503514624',getMonth(@currentField),getMonth(@currentField)+1)+getDate(@currentField))%7)*3+3)", "style": { "display": "flex", "justify-content": "center", "font-size": "10px", "padding-bottom": "2px" } } ] } ] } ] }

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "flex-direction": "column", "width": "50px", "margin": "5px 10px", "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)", "style": { "display": "flex", "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-20" } } ] }

From the contributor

How to use this sample

Summary

This sample customizes a date column to look like a page-a-day calendar. It does this by using the date part functions (getDate, getMonth, and getYear). The days of the week are displayed using Zeller's congruence and Tomohiko Sakamoto's method.

View requirements

This format can be applied to a Date column.

Sample

Solution	Author(s)
date-page-a-day-calendar.json	Tetsuya Kawahara
date-page-a-day-calendar-minimal.json	Watana
date-page-a-day-calendar-prev-today-next.json	Watana
date-page-a-day-calendar-weekend.json	Watana
date-page-a-day-calendar-30d-counter.json	Watana
date-page-a-day-calendar-30d-counter-dow.json	Watana

Version history

Version	Date	Comments
1.0	October 17, 2020	Initial release
1.1	August 2, 2021	Fixed to show days of the week.
1.2	October 2, 2022	Fixed incorrect days of the week being displayed.
1.3	December 13, 2024	Added `date-page-a-day-calendar-minimal.json`
1.4	December 14, 2024	Adjusted the layout for `date-page-a-day-calendar.json` to ensure that the day-of-the-week text, which was partially hidden due to the update, is now visible.
1.5	September 1, 2025	Added `date-page-a-day-calendar-prev-today-next.json`
1.6	September 13, 2025	Added `date-page-a-day-calendar-weekend.json`
1.7	October 1, 2025	Added `date-page-a-day-calendar-30d-counter.json` & `date-page-a-day-calendar-30d-counter-dow.json` and refactored previous samples.

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