Getting Started with React Scheduler and Next.js

This section provides a step-by-step guide for setting up a Next.js application and integrating the React Schedule component. The sample uses the App Router, client components, and resource-based scheduling to demonstrate a modern Next.js integration.

Tip: Use this pattern when you need server-side rendering for the page shell but client-side rendering for the Scheduler itself.

Prerequisites

Before getting started with the Next.js application, ensure the following prerequisites are met:

  • Node.js 18.17 or later.
  • npm (bundled with Node.js) or yarn installed.
  • Next.js 14 or later (this guide uses the App Router).
  • @syncfusion/ej2-react-schedule (latest version).

The application is compatible with macOS, Windows, and Linux operating systems.

Important: The Scheduler depends on browser APIs, so the component must be rendered in a client component using the 'use client' directive.

Create a Next.js application

To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn. The create-next-app wizard guides you through the initial project setup and generates the application structure.

npx create-next-app@latest
yarn create next-app

Using one of the above commands will lead you to set up additional configurations for the project as below:

Note: The exact prompts vary between major versions of create-next-app. The example below reflects Next.js 14+.

  1. Define the project name: Users can specify the name of the project directly. Let’s specify the name of the project as ej2-nextjs-schedule.

Tip: Choose a project name that matches your repository or deployment target to simplify environment setup later.

√ What is your project named? » ej2-nextjs-schedule
  1. Select the required packages. This guide assumes the choices shown in bold:
√ What is your project named? ... ej2-nextjs-schedule
√ Would you like to use TypeScript? ... No / **Yes**
√ Would you like to use ESLint? ... No / **Yes**
√ Would you like to use Tailwind CSS? ... **No** / Yes
√ Would you like to use `src/` directory? ... No / **Yes**
√ Would you like to use App Router? (recommended) ... No / **Yes**
√ Would you like to customize the default import alias? ... **No** / Yes
Creating a new Next.js app in ./ej2-nextjs-schedule.
  1. Once you have completed the above steps to create ej2-nextjs-schedule, navigate to the directory using the following command:
cd ej2-nextjs-schedule

The application is ready to run with default settings. Now, let’s add Syncfusion® components to the project.

Install Syncfusion® React packages

Syncfusion® React component packages are available on npmjs.com. This example uses the React Schedule component, so navigate into the project directory and run one of the following commands:

Important: Install the package in the project directory before importing the Scheduler component. Missing package installation will result in unresolved import errors.

cd ej2-nextjs-schedule
npm install @syncfusion/ej2-react-schedule --save
cd ej2-nextjs-schedule

yarn add @syncfusion/ej2-react-schedule

Importing Syncfusion® CSS styles from a theme package

Themes for the Syncfusion® React Schedule component can be applied with CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

Note: If you use a different Syncfusion theme package, update the import path to match that theme’s stylesheet location.

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/app/globals.css file:

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/schedule/index.css";

Adding the Syncfusion® React Schedule component

Follow the steps below to add the React Schedule component to the Next.js project. The Schedule component relies on browser-only APIs, so the page must be rendered as a client component using the 'use client' directive.

Important: In Next.js App Router projects, the page component that renders the Scheduler must begin with 'use client'. This ensures the component is rendered only on the client side.

1. Create the data source

Before adding the Schedule component to your markup, create a datasource.tsx file inside the src/app/ folder and add the Schedule data. Keeping the data source in a separate file makes the page component easier to read and maintain.

The example below uses a typed Appointment interface. Each record requires Id, Subject, StartTime, and EndTime (the last two being Date instances). The ProjectId and TaskId fields are used for resource grouping, which is configured in the next step.

Tip: Ensure StartTime and EndTime are created as actual Date objects. String values will not work correctly with the Scheduler’s date rendering and interactions.

interface Appointment {
    Id: number;
    Subject: string;
    StartTime: Date;
    EndTime: Date;
    IsAllDay: boolean;
    ProjectId: number;
    TaskId: number;
}

export const scheduleData: Appointment[] = [
    {
        Id: 61,
        Subject: 'Decoding',
        StartTime: new Date(2026, 6, 20, 9, 30),
        EndTime: new Date(2026, 6, 20, 10, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 62,
        Subject: 'Bug Automation',
        StartTime: new Date(2026, 6, 20, 13, 30),
        EndTime: new Date(2026, 6, 20, 16, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }, {
        Id: 63,
        Subject: 'Functionality testing',
        StartTime: new Date(2026, 6, 20, 9),
        EndTime: new Date(2026, 6, 20, 10, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 64,
        Subject: 'Resolution-based testing',
        StartTime: new Date(2026, 6, 20, 12),
        EndTime: new Date(2026, 6, 20, 13),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 65,
        Subject: 'Test report Validation',
        StartTime: new Date(2026, 6, 20, 15),
        EndTime: new Date(2026, 6, 20, 18),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 1
    }, {
        Id: 66,
        Subject: 'Test case correction',
        StartTime: new Date(2026, 6, 20, 14),
        EndTime: new Date(2026, 6, 20, 16),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 67,
        Subject: 'Bug fixing',
        StartTime: new Date(2026, 6, 20, 14, 30),
        EndTime: new Date(2026, 6, 20, 18, 30),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 2
    }, {
        Id: 68,
        Subject: 'Run test cases',
        StartTime: new Date(2026, 6, 20, 17, 30),
        EndTime: new Date(2026, 6, 20, 19, 30),
        IsAllDay: false,
        ProjectId: 1,
        TaskId: 2
    }, {
        Id: 70,
        Subject: 'Bug Automation',
        StartTime: new Date(2026, 6, 20, 18, 30),
        EndTime: new Date(2026, 6, 20, 20),
        IsAllDay: false,
        ProjectId: 2,
        TaskId: 1
    }
];

2. Add the Schedule component to the page

Then, import and define the Schedule component in the src/app/page.tsx file, as shown below.

The example below does the following:

  • Injects Week, Month, and Agenda views via ViewsDirective/ViewDirective.
  • Injects the Resize and DragAndDrop services, which enable appointment resizing and drag-and-drop.
  • Defines two resources (Projects and Categories) bound to the ProjectId and TaskId fields in the data source. See resources.md for details on resource configuration.
  • Uses the group prop to group appointments by resource.

Note: Resource-based grouping is useful when appointments must be categorized by team, project, department, or any other business dimension.

'use client'
import {
  Week, Month, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, EventSettingsModel, ResourcesDirective, ResourceDirective, Inject, Resize, DragAndDrop
} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';

export default function Home() {
  const eventSettings: EventSettingsModel = { dataSource: scheduleData }
  const group = { byGroupID: false, resources: ['Projects', 'Categories'] }

  const projectData: Object[] = [
    { text: 'PROJECT 1', id: 1, color: '#cb6bb2' },
    { text: 'PROJECT 2', id: 2, color: '#56ca85' },
    { text: 'PROJECT 3', id: 3, color: '#df5286' },
  ];
  const categoryData: Object[] = [
    { text: 'Development', id: 1, color: '#1aaa55' },
    { text: 'Testing', id: 2, color: '#7fa900' }
  ];
  return (
    <>
      <h2>Syncfusion React Schedule Component</h2>
      <ScheduleComponent width='100%' height='550px' currentView='Month' selectedDate={new Date(2026, 6, 20)} eventSettings={eventSettings} group={group} >
        <ViewsDirective>
          <ViewDirective option='Week' />
          <ViewDirective option='Month' />
          <ViewDirective option='Agenda' />
        </ViewsDirective>
        <ResourcesDirective>
          <ResourceDirective field='ProjectId' title='Choose Project' name='Projects' allowMultiple={false}
            dataSource={projectData} textField='text' idField='id' colorField='color'>
          </ResourceDirective>
          <ResourceDirective field='TaskId' title='Category' name='Categories' allowMultiple={true}
            dataSource={categoryData} textField='text' idField='id' colorField='color'>
          </ResourceDirective>
        </ResourcesDirective>
        <Inject services={[Week, Month, Agenda, Resize, DragAndDrop]} />
      </ScheduleComponent>
    </>
  )
}

Run the application

To run the application, use the following command:

npm run dev
yarn run dev

Once the dev server is running, open http://localhost:3000 in your browser to view the Schedule.

Tip: If the page does not render correctly, check the browser console for missing imports, invalid Date values, or server-side rendering warnings.

To learn more about the functionality of the Schedule component, refer to the Schedule documentation.

Troubleshooting

  • The Schedule is not visible — make sure width and height are set on ScheduleComponent, the theme CSS has been imported, and the page is marked with 'use client'.
  • Appointments don’t render — confirm each item in dataSource has valid StartTime and EndTime Date objects.
  • A view (Week/Month/Agenda) is missing — verify the corresponding module is included in Inject services and that a matching ViewDirective is declared.
  • Server-rendering errors — the Schedule component depends on browser APIs; the containing page must be a client component ('use client').

Important: When adding new views or resources, update both the ViewsDirective and the Inject services array so the UI and module configuration stay in sync.

See also