Getting Started with Integrating Syncfusion React Scheduler in SharePoint (SPFx 1.22+)

Description

This repository provides a complete example of how to integrate the Syncfusion React Scheduler component into a SharePoint Framework (SPFx) web part using the modern Heft-based build toolchain introduced in SPFx v1.22+. SharePoint Framework enables fully client‑side solutions that run seamlessly within SharePoint Online pages.

Prerequisites

• Use Node Version >= 22 (supported by SPFx 1.22)
• A valid Microsoft 365 tenant

Application Setup & Running the Project (Clone & Run)

1. Clone the repository to your local machine and navigate to the project folder.

   git clone https://github.com/SyncfusionExamples/How-to-integrate-Syncfusion-React-Scheduler-with-Sharepoint.git
   cd How-to-integrate-Syncfusion-React-Scheduler-with-Sharepoint

2. Install project dependencies:

   npm install

3. Update Tenant Domain in config/serve.json:

   "initialPage": "https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx"

   Note: Replace <your-tenant> with your actual SharePoint Online tenant name.

4. Trust the SPFx Dev Certificate:

   heft trust-dev-cert

   Or simply trust when prompted during first run.

5. Start the application:

   heft start

6. Allow debug scripts?
   From the browser opened in the step 5, Allow debug scripts by clicking Load debug scripts.

7. Viewing Syncfusion Schedule Component

   • Click the + (Add a web part in column one) icon in the browser window (SharePoint).
   • Select 'App' from the options shown.
   • Finally, you can see the Syncfusion React Scheduler rendered in SharePoint.

Build for Production

npm run build

The package will be created at: sharepoint/solution/<project-name>.sppkg

Output Preview

Syncfusion React Scheduler

Image illustrating the Syncfusion React Scheduler in SharePoint