v7.3.0

Getting Started with Bryntum Scheduler in Vue

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

Learn how to install the Scheduler via npm and explore its numerous configuration options, such as columns, viewPreset, eventColor and others. This video also demonstrates how easy it is to load resource and event data.

@youtube

Try Vue demos

Bryntum Scheduler 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 Scheduler packages

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

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

npm install @bryntum/scheduler@7.3.0 @bryntum/scheduler-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 { BryntumScheduler } from '@bryntum/scheduler-vue-3';
import { schedulerProps } from './AppConfig.js';
</script>

<template>
  <bryntum-scheduler v-bind=schedulerProps />
</template>

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

<script setup lang="ts">
import { BryntumScheduler } from '@bryntum/scheduler-vue-3';
import { schedulerProps } from './AppConfig.ts';
</script>

<template>
  <bryntum-scheduler v-bind="schedulerProps" />
</template>

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

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

JavaScriptTypeScript
export const schedulerConfig = {
    startDate        : new Date(2026, 0, 1),
    endDate          : new Date(2026, 1, 10),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    // Uncomment the following if you have images in public/users/
    // resourceImagePath : 'users/',
    columns          : [{ text : 'Name', field : 'name', width : 130 }],
    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager      : {
        loadUrl : 'data/data.json',
        autoLoad : true
    }
};

import { type BryntumSchedulerProps } from '@bryntum/scheduler-vue-3';

export const schedulerConfig : BryntumSchedulerProps = {
    startDate        : new Date(2026, 0, 1),
    endDate          : new Date(2026, 1, 10),
    viewPreset       : 'hourAndDay',
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,
    // Uncomment the following if you have images in public/users/
    // resourceImagePath : 'users/',
    columns          : [{ text : 'Name', field : 'name', width : 130 }],
    // CrudManager arranges loading and syncing of data in JSON form from/to a web service
    crudManager      : {
        loadUrl : 'data/data.json',
        autoLoad : true
    }
};
Note that the startDate and endDate configs passed to schedulerConfig denote the currently visible timespan.

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": "Dan Stevenson"   },
      { "id": 2,  "name": "Talisha Babin"   },
      { "id": 3,  "name": "Ravi Kumar"      },
      { "id": 4,  "name": "Aisha Khan"      },
      { "id": 5,  "name": "Michael Chen"    },
      { "id": 6,  "name": "Sofia Lopez"     },
      { "id": 7,  "name": "James Anderson"  },
      { "id": 8,  "name": "Eddie Johnson"   },
      { "id": 9,  "name": "Ethan Wright"    },
      { "id": 10, "name": "Liu Wei"         }
    ]
  },
  "events": {
    "rows": [
      { "resourceId": 1,  "startDate": "2026-01-01", "endDate": "2026-01-05", "name": "Kickoff Meeting"          },
      { "resourceId": 1,  "startDate": "2026-01-06", "endDate": "2026-01-10", "name": "Scope Definition"        },
      { "resourceId": 1,  "startDate": "2026-01-12", "endDate": "2026-01-29", "name": "Project Plan Review"     },
      { "resourceId": 2,  "startDate": "2026-01-02", "endDate": "2026-01-06", "name": "Requirement Gathering"   },
      { "resourceId": 2,  "startDate": "2026-01-07", "endDate": "2026-01-21", "name": "Stakeholder Interviews"  },
      { "resourceId": 2,  "startDate": "2026-01-22", "endDate": "2026-01-27", "name": "Requirement Signoff"     },
      { "resourceId": 3,  "startDate": "2026-01-05", "endDate": "2026-01-14", "name": "System Design"           },
      { "resourceId": 3,  "startDate": "2026-01-10", "endDate": "2026-01-20", "name": "Database Modeling"       },
      { "resourceId": 3,  "startDate": "2026-01-23", "endDate": "2026-01-28", "name": "API Design"              },
      { "resourceId": 4,  "startDate": "2026-01-08", "endDate": "2026-01-15", "name": "Backend Setup"           },
      { "resourceId": 4,  "startDate": "2026-01-15", "endDate": "2026-01-22", "name": "Authentication Module"   },
      { "resourceId": 4,  "startDate": "2026-01-21", "endDate": "2026-01-27", "name": "Data Services"           },
      { "resourceId": 5,  "startDate": "2026-01-02", "endDate": "2026-01-14", "name": "UI Wireframes"           },
      { "resourceId": 5,  "startDate": "2026-01-15", "endDate": "2026-01-19", "name": "Frontend Components"     },
      { "resourceId": 5,  "startDate": "2026-01-20", "endDate": "2026-01-27", "name": "Styling & Theme"         },
      { "resourceId": 6,  "startDate": "2026-01-12", "endDate": "2026-01-16", "name": "API Integration"         },
      { "resourceId": 6,  "startDate": "2026-01-17", "endDate": "2026-01-21", "name": "GraphQL Setup"           },
      { "resourceId": 6,  "startDate": "2026-01-22", "endDate": "2026-01-25", "name": "Integration Testing"     },
      { "resourceId": 7,  "startDate": "2026-01-05", "endDate": "2026-01-10", "name": "Unit Testing"            },
      { "resourceId": 7,  "startDate": "2026-01-12", "endDate": "2026-01-19", "name": "Automation Scripts"      },
      { "resourceId": 7,  "startDate": "2026-01-18", "endDate": "2026-01-27", "name": "Performance Testing"     },
      { "resourceId": 8,  "startDate": "2026-01-10", "endDate": "2026-01-22", "name": "Bug Fix Round 1"         },
      { "resourceId": 8,  "startDate": "2026-01-23", "endDate": "2026-01-26", "name": "UI Fixes"                },
      { "resourceId": 8,  "startDate": "2026-01-27", "endDate": "2026-01-30", "name": "Regression Testing"      },
      { "resourceId": 9,  "startDate": "2026-01-03", "endDate": "2026-01-14", "name": "Client Demo Prep"        },
      { "resourceId": 9,  "startDate": "2026-01-15", "endDate": "2026-01-19", "name": "Client Review"           },
      { "resourceId": 9,  "startDate": "2026-01-20", "endDate": "2026-01-24", "name": "Feedback Implementation" },
      { "resourceId": 10, "startDate": "2026-01-02", "endDate": "2026-01-16", "name": "Deployment Setup"        },
      { "resourceId": 10, "startDate": "2026-01-19", "endDate": "2026-01-22", "name": "Go-Live"                 },
      { "resourceId": 10, "startDate": "2026-01-23", "endDate": "2026-01-27", "name": "Post-Deployment Support" }
    ]
  }
}

This is the data the Bryntum Scheduler 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
scheduler.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 Scheduler 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/scheduler/fontawesome/css/fontawesome.css";
@import "@bryntum/scheduler/fontawesome/css/solid.css";
/* Structural CSS */
@import "@bryntum/scheduler/scheduler.css";
/* Bryntum theme of your choice */
@import "@bryntum/scheduler/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/scheduler/fontawesome/css/fontawesome.css";
@import "@bryntum/scheduler/fontawesome/css/solid.css";
// Structural CSS
@import "@bryntum/scheduler/scheduler.css";
// Bryntum theme
@import "@bryntum/scheduler/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 Scheduler 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.

Customizations

Now that your app is up and running, it is time to try to customize some of the commonly used built-in features.

Customizing context menus

The Scheduler shows context menus when right-clicking the empty space in the schedule, as well as the event bars. In this video we walk you through how to customize the existing menu items, and adding new items. For an in-depth guide on this topic, please see this guide.

@youtube

Customizing the event editor

The Scheduler ships with a fully customizable event editor. In this video we walk you through the basic customizations, such as adding new fields or modifying the default fields. For an in-depth guide on this topic, please see this guide.

@youtube

Full tutorial

To get familiar with the most common tasks developers perform, we have created an engaging tutorial for you to follow.

Further on integration with Vue

Do you want to know more about how Bryntum Scheduler 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 Scheduler.

Contents