WebPart

    Calendar Planner – Sign Up

    JFDI's Calendar Planner - SharePoint Web Part Icon
    Calendar Planner – SharePoint Web Part

    Puchasing options

    Click here to use the Microsoft Marketplace to sign up for this web part on a subscription basis:

    Sign Up

    Alternatively, you can contact us directly to order this web part via a traditional invoice payment route:

    Enquire

    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.

    JFDI's Calendar Planner - SharePoint Web Part Icon

    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

    Step 1

    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
    Step 2

    Upload to the App Catalog

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

    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
    Step 4

    Add to a SharePoint Site

    1. Navigate to the SharePoint site where Calendar Planner will be used
    2. Go to Site Contents → New → App
    3. Find Calendar Planner and add it to the site
    4. 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

    Step 1

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

    1. Press the ‘Configure Web Part’ button
    Calendar Planner added to a SharePoint page that still requires configuration
    Step 2

    Select a compatible List

    1. Calendar Planner can be configured to use any SharePoint Calendar list or standard lists that include a start and end date site column.
    2. 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
    Step 3

    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:

    1. Category names
    2. 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
    Step 4

    Select Default View

    Choose the default display mode:

    1. Grid View
    2. Month View
    3. Timeline View (Months)
    4. Timeline View (Weeks)
    5. 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:

    1. The web part automatically detects your Microsoft 365 tenant ID
    2. It securely transmits:
      • Tenant ID
      • App ID
    3. No personal or event data is transmitted
    4. 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

    Create Events

    Calendar Planner web part method:

    1. Select any date to view the events listed for that date in a side panel
    2. Click on ‘Add Event’ located in the top right corner of the panel
    Calendar Planner web part properties pane - Add Event
    1. Enter at least Title, Start and End dates
    2. Select a Category if configured
    3. Complete the ‘New Item’ form and hit ‘Save’
    Calendar Planner web part properties pane - SharePoint New List Item form

    Native SharePoint List method:

    1. Navigate to the SharePoint List(s) the web part was previously configured
    2. Click on ‘Add new item’ button
    Calendar Planner web part properties pane - SharePoint New Item button
    Edit Events
    1. 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
    1. The side panel will open for you to modify, save or cancel
    Calendar Planner web part properties pane - Edit Event
    Switch between Views

    Use the view selector to switch between visual layouts.

    Calendar Planner web part properties pane - Switching Views
    Filter by Category

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

    Calendar Planner web part properties pane - Filter by Category
    Switch List Views

    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:

    Calendar Planner web part properties pane - Selecting SharePoint List Views
    Print Current View

    When on any view, you can select the ‘Print’ icon:

    Calendar Planner web part properties pane - Print any View

    Allowing you to send that view to a printer or create a PDF:

    Calendar Planner web part properties pane - View Print Layouts and PDF

    Permissions & Security

    Calendar Planner respects SharePoint permissions:

    SharePoint PermissionCalendar Planner Behaviour
    ReadUser can view events
    ContributeUser can view & add/edit/delete their events
    Full ControlFull list & app management

    No data leaves your Microsoft 365 tenant.

    Troubleshooting

    Web part not visible?

    • Ensure the Calendar Planner app is installed on the site
    • Confirm that the .sppkg was approved and deployed tenant-wide

    List not created?

    • User may lack permission to create lists
    • Create manually using template provided in documentation

    Licensing error?

    • Ensure your SaaS subscription is active
    • Contact support if tenant ID mismatch occurs