v7.3.0

Getting Started with Bryntum Calendar in Vue

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

Try Vue demos

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

View online Vue demosBuild and run Vue demos

Version requirements

Minimum supported:

  • Vue: 3.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:

  • Vue: 3.0.0 or higher
  • TypeScript: 4.0.0 or higher (for TypeScript application)
  • Vite 5.0.0 or higher (for application build with Vite)
Please note that this guide is designed for creating a Vue 3 application. Since Vue 2 has reached end of life, we no longer maintain guides or components for Vue 2. We recommend upgrading to Vue 3 for continued support and compatibility.

Create Vue 3 application

To get started, the broad steps are as follows:

  1. Access to npm registry
  2. Create Application
  3. Install component
  4. Add component to Application
  5. Apply styles
  6. Run the application

The application we will be building now should 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 Vue CLI to build Vue applications.

Type the following command to install Vue CLI:

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes✔️
✔ Add JSX Support? … No✔️ / Yes
✔ Add Vue Router for Single Page Application development? … No✔️ / Yes
✔ Add Pinia for state management? … No✔️ / Yes
✔ Add Vitest for Unit testing? … No✔️ / Yes
✔ Add an End-to-End Testing Solution? … No✔️ / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No✔️ / Yes
✔ Add Prettier for code formatting? … No✔️ / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No✔️ / Yes

Scaffolding project in ./<your-project-name>...
Done.

We are using the above config in this quick start guide but feel free to make any changes.

You can then move to your application folder:

cd <your-project-name>
Please note some generated files will no longer be needed in your app, you can safely remove .src/components/HelloWorld.vue and src/assets/logo.png. Also, remove the assets folder and any links to .css files in the main.ts or main.js.

Install Bryntum Calendar packages

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

Trial versionLicensed version
npm install @bryntum/calendar@npm:@bryntum/calendar-trial@7.3.0 @bryntum/calendar-vue-3@7.3.0

npm install @bryntum/calendar@7.3.0 @bryntum/calendar-vue-3@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.vue file and replace the content with the following:

JavaScriptTypeScript
<script setup>
import { BryntumCalendar } from '@bryntum/calendar-vue-3';
import { calendarProps } from './AppConfig.js';
</script>

<template>
  <bryntum-calendar v-bind=calendarProps />
</template>

<style lang="scss">
@import './App.scss';
</style>

<script setup>
import { BryntumCalendar } from '@bryntum/calendar-vue-3';
import { calendarProps } from './AppConfig.ts';
</script>

<template>
  <bryntum-calendar v-bind="calendarProps" />
</template>

<style lang="scss">
@import './App.scss';
</style>

Create a AppConfig file in the src/ directory with the following content:

JavaScriptTypeScript
export const calendarConfig = {
    // Start life looking at this date
    date : new Date(2026, 5, 7),

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        loadUrl : 'data/data.json',
        autoLoad : true
    },

    // Features named by the properties are included.
    // An object is used to configure the feature.
    eventTooltipFeature : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
};

import { type BryntumCalendarProps } from '@bryntum/calendar-vue-3';

export const calendarProps : BryntumCalendarProps = {
    // Start life looking at this date
    date : new Date(2026, 5, 7),

    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager : {
        loadUrl : 'data/data.json',
        autoLoad : true
    },

    // Features named by the properties are included.
    // An object is used to configure the feature.
    eventTooltipFeature : {
        // Configuration options are passed on to the tooltip instance
        // We want the tooltip's left edge aligned to the right edge of the event if possible.
        align : 'l-r'
    }
};

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
      }
    ]
  }
}

This is the data the Bryntum Calendar will use.

Apply styles

Stylesheets

Remove both src/assets/main.css and src/assets/base.css, and delete the main.css import from src/main.ts.

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.

CSSSCSS
Create a src/App.css file 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";
You need to change the App.scss to App.css in the App.vue.
Create a src/App.scss file 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
@import "@bryntum/calendar/svalbard-light.css";
For your application to support sass files, you'll need to add additional dependencies to your project. From the terminal: 
npm install sass@1.42.0 --save-dev --save-prefix=~
Visit Creating a custom theme section for more info on how to create a custom theme.

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.

CSSSCSS
In your src/App.css file, add the following: 
body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}
In your src/App.scss file, add the following: 
body,
html {
    margin         : 0;
    display        : flex;
    flex-direction : column;
    height         : 100vh;
    font-family    : sans-serif;
    font-size      : 14px;
}

#app {
    flex : 1 1 100%;
}

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:

npm run dev

Your application is now available under http://localhost:5173.

Further on integration with Vue

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

Troubleshooting

Stuck somewhere? Please refer to this Troubleshooting guide. If you find errors in our docs and/or onboarding guides, please report them in our forums.

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.

Contents