Getting started with Bryntum Calendar in Next.js

This quick start guide will show you how to build a basic Bryntum Calendar in a Next.js TypeScript application using the Next.js getting started guide as a starting point.

You can also take a shortcut and start with our Bryntum Calendar Next.js with TypeScript starter template that we will create in this guide.

Requirements

Next.js version 15 requires Node.js 18.18 or higher. Bryntum Calendar requires React 16.0.0 or higher and TypeScript 3.6.0 or higher for applications written in TypeScript.

Version requirements

Minimum supported:

• React: 16.0.0 or higher
• TypeScript: 3.6.0 or higher (for TypeScript application)
• Vite 4.0.0 or higher (for application build with Vite)

Recommended:

• React: 18.0.0 or higher
• TypeScript: 4.0.0 or higher (for TypeScript application)
• Vite 5.0.0 or higher (for application build with Vite)

Getting started

To get started, we'll follow these steps to create a basic Bryntum Calendar Next.js app:

1. Setup a Next.js application.
2. Install the Bryntum Calendar component.
3. Create a Bryntum Calendar component.
4. Run the application.

The basic Bryntum Calendar starter template that we'll build will look like this:

Setup a Next.js application

We will use the Next.js getting started guide to create a Next.js application. Next.js recommends using create-next-app to create a new Next.js app as it sets everything up for you, automatically. Create a Next.js application by running the following command:

npx create-next-app@latest

You'll see multiple prompts. To follow along with this guide, choose the following options:

What is your project named? bryntum-calendar
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 use Turbopack for `next dev`? No ✔️ / Yes
Would you like to customize the default import alias (@/*)? No ✔️ / Yes

After you've selected your answers for the prompt questions, create-next-app will create a folder with your project name and install the dependencies.

Change your current working directory to the new Next.js project directory:

cd bryntum-calendar

Install the Bryntum Calendar component

Installing the Bryntum Calendar component using npm is the quickest way to use our products. You can try out Bryntum components for free using our public Bryntum trial packages. If you have a Bryntum license, please refer to our Npm Repository Guide to access the private Bryntum repository.

From your terminal, update project dependencies using the following commands:

npm install @bryntum/calendar@npm:@bryntum/calendar-trial@7.3.0 @bryntum/calendar-react@7.3.0

npm install @bryntum/calendar@7.3.0 @bryntum/calendar-react@7.3.0

Dependencies

The application configuration may add a caret ^ as a prefix of the dependencies version in your package.json file. We recommend removing the caret character as a version prefix so that you have full control over package updates.

Create a Bryntum Calendar component

Create a config file called calendarConfig.ts in the app/ folder. Add the following lines of code to it:

import { BryntumCalendarProps } from '@bryntum/calendar-react';

const calendarProps: BryntumCalendarProps = {
    date : new Date(2026, 5, 7),

    crudManager : {
        transport : {
            load : {
                url : 'data.json'
            }
        },
        autoLoad : true
    }
};

export { calendarProps };

Create a file called Calendar.tsx in the app/components/ folder. Add the following lines of code to it:

"use client";

import { BryntumCalendar } from "@bryntum/calendar-react";
import { useEffect, useRef } from "react";

export default function Calendar({ ...props }) {
  const calendarRef = useRef<BryntumCalendar>(null);

  useEffect(() => {
    // Bryntum Calendar instance
    const calendar = calendarRef?.current?.instance;
  }, []);

  return <BryntumCalendar {...props} ref={calendarRef} />;
}

The Calendar component is a React client component as it uses the "use client" directive at the top of the file.

The code in the useEffect hook setup function shows you how to access the Bryntum Calendar instance.

Add component data

Create a public/data/data.json file for example data and add the following JSON data to it:

{
  "success": true,
  "resources": {
    "rows": [
      {
        "id": 1,
        "name": "New York Team",
        "eventColor": "blue"
      },
      {
        "id": 2,
        "name": "Tokyo Hub",
        "eventColor": "green"
      },
      {
        "id": 3,
        "name": "Paris Office",
        "eventColor": "orange"
      },
      {
        "id": 4,
        "name": "Sydney Crew",
        "eventColor": "red"
      }
    ]
  },
  "events": {
    "rows": [
      {
        "id": 1,
        "name": "Kickoff Strategy Meeting",
        "startDate": "2026-06-08T09:00:00",
        "endDate": "2026-06-08T12:30:00",
        "resourceId": 1
      },
      {
        "id": 2,
        "name": "Client Review Call",
        "startDate": "2026-06-09T14:00:00",
        "endDate": "2026-06-09T17:00:00",
        "resourceId": 1
      },
      {
        "id": 3,
        "name": "Design Workshop",
        "startDate": "2026-06-10T10:00:00",
        "endDate": "2026-06-10T15:00:00",
        "resourceId": 1
      },
      {
        "id": 4,
        "name": "Project Planning",
        "startDate": "2026-06-08T13:00:00",
        "endDate": "2026-06-08T16:30:00",
        "resourceId": 2
      },
      {
        "id": 5,
        "name": "Sprint Retrospective",
        "startDate": "2026-06-09T15:00:00",
        "endDate": "2026-06-09T19:00:00",
        "resourceId": 2
      },
      {
        "id": 6,
        "name": "Innovation Lab Session",
        "startDate": "2026-06-11T16:00:00",
        "endDate": "2026-06-11T19:30:00",
        "resourceId": 2
      },
      {
        "id": 7,
        "name": "UX/UI Review",
        "startDate": "2026-06-09T08:30:00",
        "endDate": "2026-06-09T11:00:00",
        "resourceId": 3
      },
      {
        "id": 8,
        "name": "Marketing Sync",
        "startDate": "2026-06-10T08:00:00",
        "endDate": "2026-06-10T11:00:00",
        "resourceId": 3
      },
      {
        "id": 9,
        "name": "Team Building Lunch",
        "startDate": "2026-06-12T11:30:00",
        "endDate": "2026-06-12T15:00:00",
        "resourceId": 3
      },
      {
        "id": 10,
        "name": "Daily Standup",
        "startDate": "2026-06-08T09:00:00",
        "endDate": "2026-06-08T12:30:00",
        "resourceId": 4
      },
      {
        "id": 11,
        "name": "Product Demo",
        "startDate": "2026-06-10T16:00:00",
        "endDate": "2026-06-10T20:00:00",
        "resourceId": 4
      },
      {
        "id": 12,
        "name": "Customer Feedback Session",
        "startDate": "2026-06-11T11:00:00",
        "endDate": "2026-06-11T15:30:00",
        "resourceId": 4
      },
      {
        "id": 13,
        "name": "End of Sprint Wrap-up",
        "startDate": "2026-06-12T12:00:00",
        "endDate": "2026-06-12T15:00:00",
        "resourceId": 4
      },
      {
        "id": 100,
        "name": "Hackathon 2026",
        "startDate": "2026-06-08T00:00:00",
        "endDate": "2026-06-15T00:00:00",
        "allDay": true,
        "resourceId": 1,
        "eventColor": "purple"
      },
      {
        "id": 101,
        "name": "Innovation Day",
        "startDate": "2026-06-08T00:00:00",
        "endDate": "2026-06-09T00:00:00",
        "allDay": true,
        "resourceId": 2
      },
      {
        "id": 102,
        "name": "Wellness Retreat",
        "startDate": "2026-06-10T00:00:00",
        "endDate": "2026-06-11T00:00:00",
        "allDay": true,
        "resourceId": 3
      },
      {
        "id": 103,
        "name": "Tech Expo Visit",
        "startDate": "2026-06-11T00:00:00",
        "endDate": "2026-06-12T00:00:00",
        "allDay": true,
        "resourceId": 4
      },
      {
        "id": 104,
        "name": "Team Celebration",
        "startDate": "2026-06-13T00:00:00",
        "endDate": "2026-06-14T00:00:00",
        "allDay": true,
        "resourceId": 1
      }
    ]
  }
}

We need to create a wrapper component for the Bryntum Calendar React component to render on the client only. In the components folder, create a file called CalendarWrapper.tsx and add the following lines of code to it:

'use client';

import dynamic from "next/dynamic";
import { calendarProps } from "../calendarConfig";

const Calendar = dynamic(() => import("./Calendar"), {
  ssr: false,
  loading: () => {
    return (
      <div
        style={{
          display        : "flex",
          alignItems     : "center",
          justifyContent : "center",
          height         : "100vh",
        }}
      >
        <p>Loading...</p>
      </div>
    );
  },
});

const CalendarWrapper = () => {
    return <Calendar {...calendarProps} />
};
export { CalendarWrapper };

The Bryntum Calendar React component is dynamically imported with server-side rendering (ssr) set to false. This is done to prevent the Bryntum Calendar React client component from being pre-rendered on the server as Bryntum components are client-side only.

Next, replace the code in the app/page.tsx file with the following lines of code:

import { CalendarWrapper } from "@/app/components/CalendarWrapper";
/* FontAwesome is used for icons */
import "@bryntum/calendar/fontawesome/css/fontawesome.css";
import "@bryntum/calendar/fontawesome/css/solid.css";
/* Importing Calendar's structural CSS and a theme */
import "@bryntum/calendar/calendar.css";
import "@bryntum/calendar/svalbard-light.css";
import styles from "./page.module.css";

export default function Home() {
  return (
    <main className={styles.main}>
      <CalendarWrapper />
    </main>
  );
}

We imported the CSS styles for the Bryntum Calendar Svalbard Light theme, which is one of five available themes.

Styling

To style the Bryntum Calendar so that it takes up the whole page, replace the styles in the app/globals.css file with the following styles:

body,
html {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Poppins, "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

Create src/app/page.module.css file with the following style for the <main> HTML tag:

.main {
  height: 100%;
}

If you want to customize the default theme, you can replace the stockholm.css with the sass version. Visit Creating a custom theme section for more info.

You can learn more about styling your Bryntum Calendar in our style guide.

Using ref outside Calendar Component

To access the Bryntum Calendar instance outside of Calendar.tsx, you can use React’s useRef hook. Typically, you would use forwardRef; however, in this case, the Calendar component is lazy-loaded, so the ref needs to be passed as a regular prop. To implement this, make the CalendarWrapper.tsx a client component, create a ref in the CalendarWrapper function and pass it as a prop to the Calendar:

"use client"; // make it a client component

import { useEffect, useRef } from "react";
import { BryntumCalendar } from "@bryntum/calendar-react";

const CalendarWrapper = () => {
  const calendarRef = useRef<BryntumCalendar>(null);

  useEffect(() => {
    // For testing purposes, since Calendar is lazy loaded, calendarRef is null initially
    setTimeout(() => {
      console.log(calendarRef);
    }, 2000);
  });

  return <Calendar calendarRef={calendarRef} {...calendarProps} />;
};

In Calendar.tsx, define the Props type:

type Props = {
  calendarRef: React.Ref<BryntumCalendar>;
} & BryntumCalendarProps;

Next, pass and apply the calendarRef within the Calendar function and remove any existing ref used for BryntumCalendar.

export default function Calendar({ calendarRef, ...props }: Props) {
  return (
    <BryntumCalendar
      {...props}
      ref={calendarRef}
      // additional config
    />
  );
}

Calendar can now be accessed from Calendar, letting you access Calendar's events and configs.

Run the application

Run the local development server:

npm run dev

You'll see the Bryntum Calendar app at the URL http://localhost:3000.