SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Key Dates Timeline Checklist

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

Get this format View on GitHub

Shared by Anand Raghav
Updated Jul 28, 2026

Key Dates Timeline Checklist 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.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "position": "absolute",
      "left": "= @rowIndex * 230 + 'px'",
      "width": "200px",
      "height": "540px",
      "font-family": "Segoe UI",
      "top": "20px",
      "display": "block",
      "min-height": "500px",
      "margin-bottom": "40px",
      "padding": "0 8px"
    },
    "children": [
      {
        "elmType": "div",
        "txtContent": "[$Month]",
        "style": {
          "padding": "4px 0",
          "position": "absolute",
          "top": "0px",
          "left": "28px",
          "font-size": "15px",
          "font-weight": "700",
          "color": "#03274A",
          "letter-spacing": "0.2px"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "32px",
          "left": "42px",
          "width": "10px",
          "height": "10px",
          "border-radius": "50%",
          "background-color": "#03274a",
          "z-index": "2",
          "border": "2px solid #ffffff",
          "box-shadow": "0 0 0 1px #03274a"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "42px",
          "left": "46px",
          "width": "2px",
          "height": "68px",
          "background-color": "#03274a"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "110px",
          "left": "-100px",
          "width": "230px",
          "height": "1px",
          "background-color": "#c8c6c4"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "72px",
          "left": "20px",
          "right": "16px",
          "height": "8px",
          "background-color": "#EDEBE9",
          "border-radius": "999px",
          "overflow": "hidden"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "width": "= (if([$Process1Status]=='Completed',1,0) + if([$Process2Status]=='Completed',1,0) + if([$Process3Status]=='Completed',1,0) + if([$Process4Status]=='Completed',1,0) + if([$Process5Status]=='Completed',1,0)) / (if([$Process1], 1, 0) + if([$Process2], 1, 0) + if([$Process3], 1, 0) + if([$Process4], 1, 0) + if([$Process5], 1, 0)) * 100 + '%'",
              "height": "100%",
              "background-color": "#107C10",
              "border-radius": "999px",
              "transition": "width 0.35s ease"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "txtContent": "= (if([$Process1Status]=='Completed',1,0) + if([$Process2Status]=='Completed',1,0) + if([$Process3Status]=='Completed',1,0) + if([$Process4Status]=='Completed',1,0) + if([$Process5Status]=='Completed',1,0)) + '/' + (if([$Process1], 1, 0) + if([$Process2], 1, 0) + if([$Process3], 1, 0) + if([$Process4], 1, 0) + if([$Process5], 1, 0)) + ' completed'",
        "style": {
          "position": "absolute",
          "top": "84px",
          "left": "20px",
          "font-size": "11px",
          "color": "#605E5C",
          "font-weight": "600"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "top": "118px",
          "left": "12px",
          "right": "8px",
          "display": "flex",
          "flex-direction": "column",
          "gap": "6px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "=if([$Process1] == '', 'none', 'flex')",
              "flex-direction": "row",
              "align-items": "flex-start",
              "gap": "10px",
              "padding": "8px 6px",
              "border-radius": "6px",
              "cursor": "pointer",
              "background-color": "=if([$Process1Status]=='Completed', '#F3F9F1', 'transparent')"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Process1Status": "=if([$Process1Status]=='Completed', 'Not started', 'Completed')"
              }
            },
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "gap": "12px",
                  "width": "300px",
                  "padding": "16px",
                  "background-color": "#ffffff",
                  "box-shadow": "0 8px 24px rgba(0,0,0,0.12)",
                  "border-radius": "8px",
                  "border": "1px solid #edebe9"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Process1Details]",
                    "style": {
                      "font-size": "13px",
                      "color": "#323130",
                      "white-space": "pre-wrap",
                      "line-height": "1.45"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "[$Process1Link]",
                      "target": "=if([$Process1Link]=='','', '_blank')"
                    },
                    "style": {
                      "background-color": "#03274a",
                      "padding": "6px 14px",
                      "border-radius": "4px",
                      "color": "white",
                      "text-decoration": "none",
                      "align-self": "flex-start",
                      "font-size": "13px",
                      "font-weight": "600",
                      "pointer-events": "=if([$Process1Link]=='','none','auto')"
                    },
                    "txtContent": "Learn more"
                  }
                ]
              },
              "openOnEvent": "hover",
              "isBeakVisible": true,
              "directionalHint": "bottomCenter"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "=if([$Process1Status]=='Completed', 'CheckboxComposite', 'Checkbox')"
                },
                "style": {
                  "color": "=if([$Process1Status]=='Completed', '#107C10', '#8A8886')",
                  "font-size": "18px",
                  "margin-top": "1px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Process1]",
                "style": {
                  "font-size": "14px",
                  "font-weight": "500",
                  "line-height": "1.35",
                  "text-decoration": "=if([$Process1Status]=='Completed', 'line-through', '')",
                  "color": "=if([$Process1Status]=='Completed', '#107C10', '#323130')",
                  "flex-grow": "1"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$Process2] == '', 'none', 'flex')",
              "flex-direction": "row",
              "align-items": "flex-start",
              "gap": "10px",
              "padding": "8px 6px",
              "border-radius": "6px",
              "cursor": "pointer",
              "background-color": "=if([$Process2Status]=='Completed', '#F3F9F1', 'transparent')"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Process2Status": "=if([$Process2Status]=='Completed', 'Not started', 'Completed')"
              }
            },
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "gap": "12px",
                  "width": "300px",
                  "padding": "16px",
                  "background-color": "#ffffff",
                  "box-shadow": "0 8px 24px rgba(0,0,0,0.12)",
                  "border-radius": "8px",
                  "border": "1px solid #edebe9"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Process2Details]",
                    "style": {
                      "font-size": "13px",
                      "color": "#323130",
                      "white-space": "pre-wrap",
                      "line-height": "1.45"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "[$Process2Link]",
                      "target": "=if([$Process2Link]=='','', '_blank')"
                    },
                    "style": {
                      "background-color": "#03274a",
                      "padding": "6px 14px",
                      "border-radius": "4px",
                      "color": "white",
                      "text-decoration": "none",
                      "align-self": "flex-start",
                      "font-size": "13px",
                      "font-weight": "600",
                      "pointer-events": "=if([$Process2Link]=='','none','auto')"
                    },
                    "txtContent": "Learn more"
                  }
                ]
              },
              "openOnEvent": "hover",
              "isBeakVisible": true,
              "directionalHint": "bottomCenter"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "=if([$Process2Status]=='Completed', 'CheckboxComposite', 'Checkbox')"
                },
                "style": {
                  "color": "=if([$Process2Status]=='Completed', '#107C10', '#8A8886')",
                  "font-size": "18px",
                  "margin-top": "1px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Process2]",
                "style": {
                  "font-size": "14px",
                  "font-weight": "500",
                  "line-height": "1.35",
                  "text-decoration": "=if([$Process2Status]=='Completed', 'line-through', '')",
                  "color": "=if([$Process2Status]=='Completed', '#107C10', '#323130')",
                  "flex-grow": "1"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$Process3] == '', 'none', 'flex')",
              "flex-direction": "row",
              "align-items": "flex-start",
              "gap": "10px",
              "padding": "8px 6px",
              "border-radius": "6px",
              "cursor": "pointer",
              "background-color": "=if([$Process3Status]=='Completed', '#F3F9F1', 'transparent')"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Process3Status": "=if([$Process3Status]=='Completed', 'Not started', 'Completed')"
              }
            },
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "gap": "12px",
                  "width": "300px",
                  "padding": "16px",
                  "background-color": "#ffffff",
                  "box-shadow": "0 8px 24px rgba(0,0,0,0.12)",
                  "border-radius": "8px",
                  "border": "1px solid #edebe9"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Process3Details]",
                    "style": {
                      "font-size": "13px",
                      "color": "#323130",
                      "white-space": "pre-wrap",
                      "line-height": "1.45"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "[$Process3Link]",
                      "target": "=if([$Process3Link]=='','', '_blank')"
                    },
                    "style": {
                      "background-color": "#03274a",
                      "padding": "6px 14px",
                      "border-radius": "4px",
                      "color": "white",
                      "text-decoration": "none",
                      "align-self": "flex-start",
                      "font-size": "13px",
                      "font-weight": "600",
                      "pointer-events": "=if([$Process3Link]=='','none','auto')"
                    },
                    "txtContent": "Learn more"
                  }
                ]
              },
              "openOnEvent": "hover",
              "isBeakVisible": true,
              "directionalHint": "bottomCenter"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "=if([$Process3Status]=='Completed', 'CheckboxComposite', 'Checkbox')"
                },
                "style": {
                  "color": "=if([$Process3Status]=='Completed', '#107C10', '#8A8886')",
                  "font-size": "18px",
                  "margin-top": "1px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Process3]",
                "style": {
                  "font-size": "14px",
                  "font-weight": "500",
                  "line-height": "1.35",
                  "text-decoration": "=if([$Process3Status]=='Completed', 'line-through', '')",
                  "color": "=if([$Process3Status]=='Completed', '#107C10', '#323130')",
                  "flex-grow": "1"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$Process4] == '', 'none', 'flex')",
              "flex-direction": "row",
              "align-items": "flex-start",
              "gap": "10px",
              "padding": "8px 6px",
              "border-radius": "6px",
              "cursor": "pointer",
              "background-color": "=if([$Process4Status]=='Completed', '#F3F9F1', 'transparent')"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Process4Status": "=if([$Process4Status]=='Completed', 'Not started', 'Completed')"
              }
            },
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "gap": "12px",
                  "width": "300px",
                  "padding": "16px",
                  "background-color": "#ffffff",
                  "box-shadow": "0 8px 24px rgba(0,0,0,0.12)",
                  "border-radius": "8px",
                  "border": "1px solid #edebe9"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Process4Details]",
                    "style": {
                      "font-size": "13px",
                      "color": "#323130",
                      "white-space": "pre-wrap",
                      "line-height": "1.45"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "[$Process4Link]",
                      "target": "=if([$Process4Link]=='','', '_blank')"
                    },
                    "style": {
                      "background-color": "#03274a",
                      "padding": "6px 14px",
                      "border-radius": "4px",
                      "color": "white",
                      "text-decoration": "none",
                      "align-self": "flex-start",
                      "font-size": "13px",
                      "font-weight": "600",
                      "pointer-events": "=if([$Process4Link]=='','none','auto')"
                    },
                    "txtContent": "Learn more"
                  }
                ]
              },
              "openOnEvent": "hover",
              "isBeakVisible": true,
              "directionalHint": "bottomCenter"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "=if([$Process4Status]=='Completed', 'CheckboxComposite', 'Checkbox')"
                },
                "style": {
                  "color": "=if([$Process4Status]=='Completed', '#107C10', '#8A8886')",
                  "font-size": "18px",
                  "margin-top": "1px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Process4]",
                "style": {
                  "font-size": "14px",
                  "font-weight": "500",
                  "line-height": "1.35",
                  "text-decoration": "=if([$Process4Status]=='Completed', 'line-through', '')",
                  "color": "=if([$Process4Status]=='Completed', '#107C10', '#323130')",
                  "flex-grow": "1"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$Process5] == '', 'none', 'flex')",
              "flex-direction": "row",
              "align-items": "flex-start",
              "gap": "10px",
              "padding": "8px 6px",
              "border-radius": "6px",
              "cursor": "pointer",
              "background-color": "=if([$Process5Status]=='Completed', '#F3F9F1', 'transparent')"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Process5Status": "=if([$Process5Status]=='Completed', 'Not started', 'Completed')"
              }
            },
            "customCardProps": {
              "formatter": {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "flex-direction": "column",
                  "gap": "12px",
                  "width": "300px",
                  "padding": "16px",
                  "background-color": "#ffffff",
                  "box-shadow": "0 8px 24px rgba(0,0,0,0.12)",
                  "border-radius": "8px",
                  "border": "1px solid #edebe9"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "[$Process5Details]",
                    "style": {
                      "font-size": "13px",
                      "color": "#323130",
                      "white-space": "pre-wrap",
                      "line-height": "1.45"
                    }
                  },
                  {
                    "elmType": "a",
                    "attributes": {
                      "href": "[$Process5Link]",
                      "target": "=if([$Process5Link]=='','', '_blank')"
                    },
                    "style": {
                      "background-color": "#03274a",
                      "padding": "6px 14px",
                      "border-radius": "4px",
                      "color": "white",
                      "text-decoration": "none",
                      "align-self": "flex-start",
                      "font-size": "13px",
                      "font-weight": "600",
                      "pointer-events": "=if([$Process5Link]=='','none','auto')"
                    },
                    "txtContent": "Learn more"
                  }
                ]
              },
              "openOnEvent": "hover",
              "isBeakVisible": true,
              "directionalHint": "bottomCenter"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "=if([$Process5Status]=='Completed', 'CheckboxComposite', 'Checkbox')"
                },
                "style": {
                  "color": "=if([$Process5Status]=='Completed', '#107C10', '#8A8886')",
                  "font-size": "18px",
                  "margin-top": "1px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "[$Process5]",
                "style": {
                  "font-size": "14px",
                  "font-weight": "500",
                  "line-height": "1.35",
                  "text-decoration": "=if([$Process5Status]=='Completed', 'line-through', '')",
                  "color": "=if([$Process5Status]=='Completed', '#107C10', '#323130')",
                  "flex-grow": "1"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionkey-dates-timeline-checklist.json

From the contributor

How to use this sample

Summary

A modern horizontal timeline view that displays key dates or milestones as monthly columns. Each month shows a progress bar and up to 5 checklist items that users can mark as completed directly in the view. Hovering over an item reveals additional details and an optional "Learn more" link.

Perfect for onboarding journeys, project milestones, compliance tracking, or any process that spans multiple months.

Key Dates Timeline Checklist

View requirements

Type Internal Name Required Notes
Single line of text Month Yes e.g. January 2026, February 2026
Single line of text Process1 No
Multiple lines of text Process1Details No Shown in the hover card
Hyperlink Process1Link No Optional "Learn more" link
Choice Process1Status Yes Values: Completed, Not started
Single line of text Process2 No
Multiple lines of text Process2Details No
Hyperlink Process2Link No
Choice Process2Status Yes Values: Completed, Not started
Single line of text Process3 No
Multiple lines of text Process3Details No
Hyperlink Process3Link No
Choice Process3Status Yes Values: Completed, Not started
Single line of text Process4 No
Multiple lines of text Process4Details No
Hyperlink Process4Link No
Choice Process4Status Yes Values: Completed, Not started
Single line of text Process5 No
Multiple lines of text Process5Details No
Hyperlink Process5Link No
Choice Process5Status Yes Values: Completed, Not started

Tip: Create the Choice columns with the exact values Completed and Not started.

Sample data

Month Process1 Process1Status Process2 Process2Status Process3 Process3Status Process4 Process4Status Process5 Process5Status
January 2026 Complete employment contract & NDA Completed Set up Microsoft 365 account & email Completed Attend company orientation session Not started Complete mandatory compliance training Not started Schedule 1:1 with manager Not started
February 2026 Receive company laptop & accessories Completed Install required software & VPN Completed Join department team channels Not started Complete data protection & security training Not started Set up expense reporting access Not started
March 2026 Shadow senior colleague for 1 week Not started Complete first project milestone Not started Meet with mentor Not started Review department OKRs Not started Provide feedback on onboarding Not started
April 2026 Complete 60-day check-in with manager Not started Join at least two cross-team meetings Completed Update personal development plan Completed Complete intermediate role-specific training Completed Share first knowledge contribution Not started
May 2026 Lead a small task or mini-project Not started Present progress in a team meeting Completed Complete 90-day performance conversation Not started Provide structured feedback on onboarding Not started Identify a stretch goal for next quarter Not started
June 2026 Take full ownership of a recurring responsibility Completed Mentor or support a newer colleague Not started Complete final onboarding review with manager Not started Set Q3 personal and team goals Not started Celebrate completion of formal onboarding Not started

Features

  • Horizontal monthly timeline layout
  • Progress bar per month (X/5 completed)
  • Clickable checklist items with toggle (Completed ↔ Not started)
  • Hover cards with details and optional "Learn more" link
  • Visual feedback (green checkmark, strikethrough, and background highlight)
  • Clean and modern design

Solution

Solution Author(s)
key-dates-timeline-checklist.json Anand Ragav

Version history

Version Date Comments
1.0 July 28, 2026 Initial release

Additional notes

  • Designed for Microsoft Lists / SharePoint modern experience
  • Best viewed on desktop
  • Works with both SharePoint lists and Microsoft Lists

Keep exploring

More formats like this

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

Spotify Now Playing

Transforms list items into Spotify-style 'now playing' cards with album-art block, status row, track / artist / album, a horizontal progress bar with elapsed and total time, and play / like controls.

Explore format