Getting Started with Bryntum Calendar in Ionic

Using an AI coding assistant? Install the Bryntum MCP server to give it access to version-specific Bryntum documentation.

Try Ionic demos

Bryntum Calendar is delivered with a variety of Ionic demo applications showing its functionality. All demo applications have been verified to be compatible with Node.js 20.

View online Ionic demos Build and run Ionic demos

Version requirements

Minimum supported:

Angular: 9.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:

Angular: 12.0.0 or higher
TypeScript: 4.0.0 or higher (for TypeScript application)
Vite 5.0.0 or higher (for application build with Vite)

Create Ionic application

To get started, the broad steps are as follows:

Access to npm registry
Create Application
Install component
Add component to Application
Apply styles
Run the application

The application we are about to build together is pretty simple, and will look like the illustration below:

Access to npm registry

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.

Create Application

Similarly to all the examples shipped with the distribution, we will be using Ionic CLI to build Ionic applications.

Type the following command to install Ionic CLI:

npm install -g @ionic/cli

We will then create a basic application with Ionic CLI:

ionic start IonicApp blank --type=angular

Here we are using blank, the most simple starter template for the app.

Ionic can use Angular, React, or Vue. By choosing --type=angular, we tell Ionic CLI to generate an application using Angular.

Feel free to select other defaults if needed following instruction provided in the Ionic Framework Documentation

Please feel free to change IonicApp to your preferred application name

You can then move to your application folder

cd IonicApp

Install component

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

Trial version Licensed version

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

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

If you're using the licensed Bryntum version, ensure that you have configured your npm properly to get access to the Bryntum packages. If not, refer to this guide.

Add component to Application

Edit the src/app/home/home.module.ts file and add the following:

import { BryntumCalendarModule } from '@bryntum/calendar-angular';

@NgModule({
    imports : [
        BryntumCalendarModule
    ]
})

Then, edit the src/app/home/home.page.ts file and replace the content with the following:

import { Component, ViewChild} from '@angular/core';
import { BryntumCalendarComponent } from '@bryntum/calendar-angular';
import { calendarProps } from './home.config';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  standalone: false,
})
export class HomePage {

    calendarProps = calendarProps;

    @ViewChild('calendar') calendarComponent!: BryntumCalendarComponent;

}

Add component data

Create a assets/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
      }
    ]
  }
}

Create a src/app/home/home.config.ts file with the following content:

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

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

    crudManager : {
        loadUrl  : 'assets/data/data.json',
        autoLoad : true
    },

    sidebar : {
        items : {
            datePicker : {
                // highlight the selected cell's week row
                highlightSelectedWeek : true
            }
        }
    },
};

And finally, edit the src/app/home/home.page.html file and replace the content with the following:

<ion-content [fullscreen] = "true">
  <div id = "container">
    <bryntum-calendar
      #calendar
      [date] = "calendarProps.date!"
      [crudManager] = 'calendarProps.crudManager!'
      [sidebar] = 'calendarProps.sidebar!'
    ></bryntum-calendar>

  </div>
</ion-content>

Apply styles

Stylesheets

The following CSS files are provided with the Bryntum npm packages or in the /build folder of the distribution:

File	Contents
`calendar.css`	Structural CSS
`svalbard-light.css`	Svalbard Light theme
`svalbard-dark.css`	Svalbard Dark theme
`visby-light.css`	Visby Light theme
`visby-dark.css`	Visby Dark theme
`stockholm-light.css`	Stockholm Light theme
`stockholm-dark.css`	Stockholm Dark theme
`material3-light.css`	Material3 Light theme
`material3-dark.css`	Material3 Dark theme
`fluent2-light.css`	Fluent2 Light theme
`fluent2-dark.css`	Fluent2 Dark theme
`fontawesome/css/fontawesome.css`	Font Awesome Free base CSS
`fontawesome/css/solid.css`	Font Awesome Free solid icons

You'll need to import the structural CSS and the preferred theme into your project for the Bryntum Calendar to render correctly, and if you are not replacing the icons used by the component, you will also need to include Font Awesome.

Edit the src/global.scss and add the following:

// FontAwesome is used for icons
@import "~@bryntum/calendar/fontawesome/css/fontawesome.css";
@import "~@bryntum/calendar/fontawesome/css/solid.css";
// Structural CSS
@import "~@bryntum/calendar/calendar.css";
// Bryntum theme of your choice
@import "~@bryntum/calendar/svalbard-light.css";

Sizing the component

By default, the Bryntum Calendar component is configured to occupy 100% of the parent DOM element with a min-height of 10em.

To display the component at the appropriate size, you can, for example, set parent components to take up the full height of the screen.

In your src/app/home/home.page.scss file, add the following:

#container {
    height : 100vh;
}

There are many other solutions depending on the situation. Feel free to adapt the code above regarding your application layout. For more information on the topic, see this guide Sizing the component.

Run the application

From your terminal:

ionic serve

Your application is now available under http://localhost:8100, and your browser should automatically open it for you.

Troubleshooting

Please refer to this Troubleshooting guide.

What to do next?

Further on integration with Ionic

Do you want to know more about how Bryntum Calendar integrates with Ionic and starts to customize your application? We provide you with a complete Ionic guide here.

Learn about Data

Bryntum components often use multiple data collections and entities.

For a detailed explanation of how these elements interact, see our guide to displaying data in Bryntum Calendar.