The purpose of this web part sample is to render M365 Group Plan tasks in a timeline ordered by the task due date with tags for years and months in a vertical stack. There are filter options to filter out completed tasks and tender tasks by a plan bucket. A task’s detail can be viewed by clicking the (i) icon below the “Due Date” popping up a callout dialog with task details. It Should be noted that a M365 Group Planner can have 0 to 200 plans assigned to M365 Group. The web part needs to be configured in the web part’s property pane you must select the plan to be rendered, along with options for the plan bucket and completed task filter. These setting will be used when the web part renders on the page. The configuration of multiple web parts on hte page for different plans and buckets is supported.
Open this sample in the gallery (popup panel): Open in gallery
Source: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-m365-planner-timeline