Calendar Planner – Get Started

for Microsoft 365 & SharePoint Online

Introduction

Calendar Planner is a SharePoint Framework (SPFx) web part designed for Microsoft 365 tenants. It provides year, month, week, and grid timeline views. All for event management using SharePoint list data. This guide walks you through the installation, configuration, licensing activation, and initial setup process.

Before installing Calendar Planner, ensure:

Prerequisites Required

Microsoft 365 tenant ✔
SharePoint Online ✔
Permission to upload apps to the SharePoint App Catalog ✔
Permission to add web parts to modern site pages ✔
An active Calendar Planner licence via your JFDI SaaS subscription ✔

Optional (recommended)

Site Collection Administrator rights
A modern communication or team site for deployment
SharePoint List(s) for managing events and appointments

Installation Steps

Download the SPFx App Package

Download the latest Calendar Planner .sppkg file from the provided distribution in the
Microsoft Marketplace:

Calendar Planner in the Microsoft Marketplace

Upload to the App Catalog

When prompted, check: “Make this solution available to all sites in the organisation” (recommended)
Go to: SharePoint Admin Center → More Features → Apps → App Catalog
- https://[yourdomain].sharepoint.com/sites/appcatalog/_layouts/15/tenantAppCatalog.aspx/manageApps
Select Apps for SharePoint
Upload the .sppkg file
After the upload is processed, you will see a new entry similar to this:

Calendar Planner added to the SharePoint App Catalog

Approve API Permissions

When prompted, approve the API permissions in the Microsoft 365 Admin Center.

The entry for Calendar Planner will be listed in the ‘pending’ section as ‘JFDI Consulting Ltd Licensing’ and will be requesting ‘access as user’ permissions:

API Access pending request for Calendar Planner

Add to a SharePoint Site

Navigate to the SharePoint site where Calendar Planner will be used
Go to Site Contents → New → App
Find Calendar Planner and add it to the site
If the App is not listed, it may have been set by the global administrator to be organisation-wide when added to the app catalog

Adding Calendar Planner to a Page

Go to the SharePoint page where you want the calendar

Select Edit
Click the “+” to add a web part
Search for Calendar Planner
Insert the web part and publish the page

Search for Calendar Planner in the available web parts list on a SharePoint page

Initial Configuration

Once the Calendar Planner web part has been added to the page:

Press the ‘Configure Web Part’ button

Calendar Planner added to a SharePoint page that still requires configuration

Select a compatible List

Calendar Planner can be configured to use any SharePoint Calendar list or standard lists that include a start and end date site column.
This list stores all event items to be viewed on the Calendar Planner web part.

Calendar Planner web part properties pane - selecting a Calendar List

Configure Categories (optional)

The selected Calendar List may already have a category field/column, which can be selected in the web part property pane:

Calendar Planner web part properties pane - selecting a category field

If an existing category field does not exist – Under List Settings, configure:

Category names
Optional descriptions

These categories drive colour-coding in calendar views, which can also be defined in the web part properties:

Calendar Planner web part properties pane - defining the category colours

Select Default View

Choose the default display mode:

Grid View
Month View
Timeline View (Months)
Timeline View (Weeks)
Gantt Chart

Calendar Planner web part properties pane - selecting the default view

Licensing Activation

Calendar Planner validates your subscription using a secure SaaS licensing check.

Activation process:

The web part automatically detects your Microsoft 365 tenant ID
It securely transmits:
- Tenant ID
- App ID
No personal or event data is transmitted
Valid licences activate the app immediately

If your licence cannot be validated, you’ll see an in-app message with steps to resolve the issue.

You can manage your License at the bottom of the web part property pane:

Calendar Planner web part properties pane - Manage License Key

Clicking on the ‘Manage License Key’ button will open the ‘Activate License Key’ pane:

Calendar Planner web part properties pane - Activate License Key

When your license is validated, you will see the following at the top of the web part property pane with your corresponding License Tier on display:

Calendar Planner web part properties pane - Validated License Tier

Using Calendar Planner

Calendar Planner web part method:

Select any date to view the events listed for that date in a side panel
Click on ‘Add Event’ located in the top right corner of the panel

Calendar Planner web part properties pane - Add Event

Enter at least Title, Start and End dates
Select a Category if configured
Complete the ‘New Item’ form and hit ‘Save’

Calendar Planner web part properties pane - SharePoint New List Item form

Native SharePoint List method:

Navigate to the SharePoint List(s) the web part was previously configured
Click on ‘Add new item’ button

Select an event from any view or when within a side panel, select ‘View Details’

Calendar Planner web part properties pane - View Details of Event

The side panel will open for you to modify, save or cancel

Calendar Planner web part properties pane - Edit Event

Use the view selector to switch between visual layouts.

Calendar Planner web part properties pane - Switching Views

Select one or more categories to simplify the visualisation of workloads or event types.

Calendar Planner web part properties pane - Filter by Category

Calendar Planner also fully supports SharePoint List Views.

Once defined, they are available in the dropdown below the normal web part view selector. Here is an example that restricts the view to ‘Just November’ using standard SharePoint List view filtering techniques: