Calendar Tile

The Calendar Tile turns a plain date into a little calendar page - a colored month band above a big day number - so a date column reads at a glance like a row of desk-calendar tiles. It is built with a standard Microsoft List and a small piece of column-formatting JSON applied to a date field. The JSON pulls the month and day out of the date and stacks them into a compact tile, and a blank date falls back to a neutral placeholder.

Author

SharePoint Maven

Built with

Lists

Features

Date and Time Column, JSON, Single Line of Text Column

Common Use Cases

Event or session dates on a schedule
Due dates on a task or project list
Publish or review dates on a content list
Milestones on a roadmap
Deadlines on a compliance register
Any date you want to read like a calendar tile

Details

Design Pattern: Dates & Time
Format Scope: Column

Required Columns

Display name	Column type	Internal name
Event	Single line of text	`[Title]`
Date	Date and time	`[Date]`

Prerequisites

Build a list with these columns before you paste the JSON.
Then populate the list with dates.
Because the JSON is applied at the column level, the Date column can use any name you want.
The month band color lives in the JSON – change it to match your brand.
The month labels are English abbreviations set in the JSON – edit them there if you need another language.
Because the tile reads a date, the result depends on your tenant time zone and the time of day – test close to midnight.

How to Apply JSON code

On the Date column, open the column header menu, choose Column settings, then Format this column.
Switch to Advanced mode.
Paste the JSON below and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "width": "82px",
    "height": "38px",
    "border-radius": "6px",
    "overflow": "hidden",
    "border": "1px solid #d9d9d9",
    "box-shadow": "0 1px 2px rgba(0,0,0,0.10)",
    "display": "flex",
    "flex-direction": "row",
    "align-items": "stretch",
    "box-sizing": "border-box",
    "background-color": "=if(@currentField == '', '#f3f2f1', '#ffffff')"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=if(@currentField == '', '', substring('JANFEBMARAPRMAYJUNJULAUGSEPOCTNOVDEC', getMonth(@currentField) * 3, getMonth(@currentField) * 3 + 3))",
      "style": {
        "display": "=if(@currentField == '', 'none', 'flex')",
        "width": "36px",
        "align-items": "center",
        "justify-content": "center",
        "background-color": "#D12F55",
        "color": "#ffffff",
        "font-size": "11px",
        "font-weight": "700",
        "letter-spacing": "0.5px"
      }
    },
    {
      "elmType": "div",
      "txtContent": "=if(@currentField == '', '--', getDate(@currentField) + '')",
      "style": {
        "width": "=if(@currentField == '', '100%', '46px')",
        "display": "flex",
        "align-items": "center",
        "justify-content": "center",
        "background-color": "=if(@currentField == '', '#f3f2f1', '#ffffff')",
        "color": "=if(@currentField == '', '#8a8886', '#201f1e')",
        "font-size": "=if(@currentField == '', '17px', '22px')",
        "font-weight": "700",
        "line-height": "1"
      }
    }
  ]
}

Common Questions About the Calendar Tile

What is the Calendar Tile built with?

It is built with a standard Microsoft List (SharePoint list) and a small piece of column-formatting JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a date column that reads like a calendar tile without ongoing development overhead.

What columns does it need?

It needs one Date column, where the JSON is applied, plus any label column such as the event name. The tile is built entirely from that one date.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how an existing column looks, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can I change the band color?

Yes. The month band color is a value in the JSON. Change it to your brand color, and every tile follows.

Can Greg build a design like this for our lists?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.