SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Modern Event Tiles

This sample demonstrates applying view formatting to an Events list to imitate the modern events webpart.

Get this format View on GitHub

Shared by Chris Kent
Updated Jun 25, 2020

Modern Event Tiles formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 definitions

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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/view-formatting.schema.json",
  "tileProps": {
    "width": "286",
    "height": "352",
    "hideSelection": true,
    "formatter": {
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-white ms-borderColor-neutralLight ms-borderColor-neutralTertiary--hover"
      },
      "style": {
        "border-width": "1px",
        "border-style": "solid",
        "margin-right": "16px",
        "display": "block"
      },
      "children": [
        {
          "elmType": "a",
          "attributes": {
            "href": "=@currentWeb + '/_layouts/15/Event.aspx?ListGuid=' + '81d00db2-89f6-45d7-b303-c0125a6bba69' + '&ItemId=' + [$ID]"
          },
          "style": {
            "text-decoration": "none",
            "outline": "none"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "height": "160px",
                "display": "flex",
                "flex-direction": "column",
                "justify-content": "center",
                "align-items": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "ms-borderColor-neutralLight ms-fontColor-neutralPrimary"
                  },
                  "style": {
                    "width": "80px",
                    "height": "80px",
                    "border-width": "1px",
                    "border-style": "solid",
                    "display": "=if([$fAllDayEvent]=='Yes', 'none', 'flex')",
                    "flex-direction": "column",
                    "align-items": "center",
                    "text-align": "center",
                    "justify-content": "center"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=if(getMonth([$EventDate]) == 0, 'JAN', if(getMonth([$EventDate]) == 1, 'FEB', if(getMonth([$EventDate]) == 2, 'MAR', if(getMonth([$EventDate]) == 3, 'APR',if(getMonth([$EventDate]) == 4, 'MAY',if(getMonth([$EventDate]) == 5, 'JUN',if(getMonth([$EventDate]) == 6, 'JUL',if(getMonth([$EventDate]) == 7, 'AUG',if(getMonth([$EventDate]) == 8, 'SEP',if(getMonth([$EventDate]) == 9, 'OCT',if(getMonth([$EventDate]) == 10, 'NOV','DEC')))))))))))",
                      "style": {
                        "font-size": "15px",
                        "font-weight": "400"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "=getDate([$EventDate])",
                      "style": {
                        "font-size": "28px",
                        "font-weight": "600"
                      }
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "attributes": {
                    "class": "ms-borderColor-neutralLight ms-fontColor-neutralPrimary"
                  },
                  "style": {
                    "width": "80px",
                    "height": "80px",
                    "border-width": "1px",
                    "border-style": "solid",
                    "display": "=if([$fAllDayEvent]=='Yes', 'flex', 'none')",
                    "flex-direction": "column",
                    "align-items": "center",
                    "text-align": "center",
                    "justify-content": "space-between"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=if(getMonth([$EventDate]) == 0, 'JAN', if(getMonth([$EventDate]) == 1, 'FEB', if(getMonth([$EventDate]) == 2, 'MAR', if(getMonth([$EventDate]) == 3, 'APR',if(getMonth([$EventDate]) == 4, 'MAY',if(getMonth([$EventDate]) == 5, 'JUN',if(getMonth([$EventDate]) == 6, 'JUL',if(getMonth([$EventDate]) == 7, 'AUG',if(getMonth([$EventDate]) == 8, 'SEP',if(getMonth([$EventDate]) == 9, 'OCT',if(getMonth([$EventDate]) == 10, 'NOV','DEC'))))))))))) + ' ' + getDate([$EventDate])",
                      "style": {
                        "font-size": "12px",
                        "font-weight": "400",
                        "flex-grow": "1",
                        "display": "flex",
                        "flex-direction": "column",
                        "justify-content": "center"
                      }
                    },
                    {
                      "elmType": "div",
                      "attributes": {
                        "class": "ms-borderColor-black"
                      },
                      "style": {
                        "width": "40px",
                        "border-bottom-width": "1px",
                        "border-bottom-style": "solid"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "=if(getMonth([$EndDate]) == 0, 'JAN', if(getMonth([$EndDate]) == 1, 'FEB', if(getMonth([$EndDate]) == 2, 'MAR', if(getMonth([$EndDate]) == 3, 'APR',if(getMonth([$EndDate]) == 4, 'MAY',if(getMonth([$EndDate]) == 5, 'JUN',if(getMonth([$EndDate]) == 6, 'JUL',if(getMonth([$EndDate]) == 7, 'AUG',if(getMonth([$EndDate]) == 8, 'SEP',if(getMonth([$EndDate]) == 9, 'OCT',if(getMonth([$EndDate]) == 10, 'NOV','DEC'))))))))))) + ' ' + getDate([$EndDate])",
                      "style": {
                        "font-size": "12px",
                        "font-weight": "400",
                        "flex-grow": "1",
                        "display": "flex",
                        "flex-direction": "column",
                        "justify-content": "center"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "style": {
                "padding": "0 16px 16px",
                "height": "172px"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "[$Category]",
                  "attributes": {
                    "class": "ms-fontColor-neutralSecondary"
                  },
                  "style": {
                    "font-size": "12px",
                    "font-weight": "400",
                    "margin-bottom": "4px",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "word-wrap": "normal",
                    "height": "18px"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "[$Title]",
                  "attributes": {
                    "class": "ms-fontColor-black"
                  },
                  "style": {
                    "font-size": "17px",
                    "font-weight": "300",
                    "margin-bottom": "20px",
                    "overflow": "hidden",
                    "white-space": "nowrap",
                    "word-wrap": "break-word",
                    "word-break": "break-word",
                    "height": "44px",
                    "line-height": "22px"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "=if(getMonth([$EventDate]) == 0, 'Jan', if(getMonth([$EventDate]) == 1, 'Feb', if(getMonth([$EventDate]) == 2, 'Mar', if(getMonth([$EventDate]) == 3, 'Apr',if(getMonth([$EventDate]) == 4, 'May',if(getMonth([$EventDate]) == 5, 'Jun',if(getMonth([$EventDate]) == 6, 'Jul',if(getMonth([$EventDate]) == 7, 'Aug',if(getMonth([$EventDate]) == 8, 'Sep',if(getMonth([$EventDate]) == 9, 'Oct',if(getMonth([$EventDate]) == 10, 'Nov','Dec'))))))))))) + ' ' + getDate([$EventDate]) + ', ' + if([$fAllDayEvent]=='Yes', 'All day', toLocaleTimeString([$EventDate]))",
                  "attributes": {
                    "class": "ms-fontColor-black"
                  },
                  "style": {
                    "font-size": "12px",
                    "font-weight": "400",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "word-wrap": "normal",
                    "height": "18px"
                  }
                },
                {
                  "elmType": "div",
                  "txtContent": "[$Location]",
                  "attributes": {
                    "class": "ms-fontColor-neutralSecondary"
                  },
                  "style": {
                    "font-size": "12px",
                    "font-weight": "400",
                    "overflow": "hidden",
                    "text-overflow": "ellipsis",
                    "white-space": "nowrap",
                    "word-wrap": "normal",
                    "height": "18px"
                  }
                },
                {
                  "elmType": "a",
                  "attributes": {
                    "class": "ms-fontColor-black",
                    "href": "=@currentWeb + '/_vti_bin/owssvr.dll?CS=109&&Cmd=Display&List=' + '81d00db2-89f6-45d7-b303-c0125a6bba69' + '&CacheControl=1&ID=' + [$ID] + '&Using=event.ics'"
                  },
                  "style": {
                    "display": "flex",
                    "flex-wrap": "nowrap",
                    "justify-content": "flex-start",
                    "align-items": "center",
                    "margin-top": "20px",
                    "cursor": "pointer",
                    "text-decoration": "none",
                    "outline": "none"
                  },
                  "children": [
                    {
                      "elmType": "span",
                      "attributes": {
                        "class": "ms-fontColor-themePrimary",
                        "iconName": "AddEvent"
                      },
                      "style": {
                        "font-weight": "normal",
                        "font-size": "15px",
                        "height": "16px",
                        "line-height": "16px",
                        "display": "inline-block",
                        "margin-right": "8px"
                      }
                    },
                    {
                      "elmType": "span",
                      "txtContent": "Add to my calendar",
                      "style": {
                        "font-size": "14px",
                        "font-weight": "400",
                        "display": "block"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
View sourceLink to this definitionevent-tiles-only.json

From the contributor

How to use this sample

Summary

This sample demonstrates applying view formatting to an Events list to imitate the modern events webpart. The format is implemented using the Tiles view and there is a format included that only includes this portion to make customization easier (event-tiles-only). The primary sample demonstrates using a single format to provide both a list and tile view as well as demonstrating implementing a custom hover card with default person hover cards as well.

screenshot of the sample

screenshot of the sample - tiles

View requirements

Even on modern sites, the Events list shows all views in the classic experience. You will have to follow these instructions to enable the modern experience on normal views (NOT the calendar view):

List Settings > Advanced settings > List Experience: Change to New experience and click OK.

This specific format expects the following columns to be part of the view:

Type Internal Name Required
Single line of text Title Yes
Date Deployed Yes
Yes/No Active Yes

Sample

Solution Author(s)
event-tiles.json Chris Kent
event-tiles-only.json Chris Kent

Version history

Version Date Comments
1.0 June 25, 2020 Initial release

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.

Additional notes

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format