@bryntum/scheduler-vue

Vue 2 wrappers for Bryntum Scheduler JavaScript component
2,630
vue wrapper scheduler bryntum
Install
npm install @bryntum/scheduler-vue
Latest Version:7.3.7
License:Commercial
Last Updated:Sep 24, 2026
Links: npm
Maintainer: mats.bryntse


Bryntum logo       Vue


Vue 2 wrapper for Bryntum Scheduler

This package provides a wrapper that turns Bryntum Scheduler into a Vue 2 component, exposing configuration options, properties, features, and events.

Version Requirement

  • Vue: 2.6 or higher
  • TypeScript: 4.2 or higher (optional)

Vue 3 version compatibility

For Vue 3+, use @bryntum/scheduler-vue-3 instead.

Package Contents

Path Description
src/ Original Vue source files (BryntumScheduler etc.)
*.d.ts TypeScript type definitions

Note: This is a wrapper package. The core @bryntum/scheduler package must be installed separately.

Installation

Vue 2 Wrapper

npm install @bryntum/scheduler-vue@latest

Component Package (Required)

npm install @bryntum/scheduler@latest

Try Bryntum Online Demos

Quick Start

Edit the src/App.vue file and replace the content with the following:

<template>
    <bryntum-scheduler
        :start-date="startDate"
        :end-date="endDate"
        :columns="columns"
        :resources="resources"
        :events="events"
        />
</template>

<script>
import { BryntumScheduler } from '@bryntum/scheduler-vue';
import '@bryntum/scheduler/scheduler.stockholm.css';
export default {
    components : {
        BryntumScheduler
    },
    data() {
        return {
            startDate : new Date(2026, 0, 1),
            endDate : new Date(2026, 0, 31),
            columns : [{ field : 'name', text : 'Resource', width : 150 }],
            resources : [
                { id : 1, name : 'Resource 1' },
                { id : 2, name : 'Resource 2' }
            ],
            events : [
                { id : 1, resourceId : 1, name : 'Event 1', startDate : '2026-01-05', endDate : '2026-01-10' }
            ]
        };
    }
};
</script>

<template>
    <bryntum-scheduler
        :start-date="startDate"
        :end-date="endDate"
        :columns="columns"
        :project="project"
        />
</template>
Create sample data (click to expand)

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.

Lastly, add some styling to your src/main.js or CSS file:

/* 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";

Integration Guide

For details on installing and using this package, see the Vue Integration Guide.

Wrappers

Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options, properties, features, and events through Vue-familiar patterns like props, events, and slots.

Visit Wrappers documentation for the complete list of available wrapper components.

Features

Features are optional modules that extend Bryntum Scheduler functionality. Each feature is suffixed with Feature and can be enabled and configured through standard Vue props.

Visit Features documentation for the complete list of available features and their configuration options.

Explore All Bryntum Products

Explore our comprehensive collection of demos:

Product JavaScript
JavaScript		 React
React		 Vue
Vue		 Angular
Angular
Grid Grid JavaScript demos Grid React demos Grid Vue demos Grid Angular demos
Scheduler Scheduler JavaScript demos Scheduler React demos Scheduler Vue demos Scheduler Angular demos
Scheduler Pro Scheduler Pro JavaScript demos Scheduler Pro React demos Scheduler Pro Vue demos Scheduler Pro Angular demos
Gantt Gantt JavaScript demos Gantt React demos Gantt Vue demos Gantt Angular demos
Calendar Calendar JavaScript demos Calendar React demos Calendar Vue demos Calendar Angular demos
TaskBoard TaskBoard JavaScript demos TaskBoard React demos TaskBoard Vue demos TaskBoard Angular demos

Online references

License and copyright

This wrapper depends on Bryntum Scheduler, which is commercial software and requires a paid license. Please visit the Bryntum Scheduler End User License for the full text of the license.

Copyright © 2009-2026, Bryntum All rights reserved.

Related Packages

@bryntum/scheduler-vue-3

Vue 3 wrappers for Bryntum Scheduler JavaScript component

3,208
bryntum scheduler wrapper vue-3
@bryntum/scheduler-vue-3-thin

Vue 3 wrappers for Bryntum Scheduler JavaScript component

2,742
bryntum scheduler wrapper vue-3
@bryntum/schedulerpro-vue-3-thin

Vue 3 wrappers for Bryntum Scheduler Pro JavaScript component

26,973
bryntum wrapper schedulerpro vue-3
@bryntum/gantt-vue-3-thin

Vue 3 wrappers for Bryntum Gantt JavaScript component

16,091
bryntum wrapper gantt vue-3
@bryntum/schedulerpro-vue

Vue 2 wrappers for Bryntum Scheduler Pro JavaScript component

5,271
bryntum vue wrapper schedulerpro

Version History

Version Released License
7.3.7 Commercial
7.3.6 Commercial
7.3.5 Commercial
7.3.4 Commercial
7.3.3 Commercial