@bryntum/calendar-vue

v7.2.4

Published

8 days ago

Vue 2 wrappers for Bryntum Calendar JavaScript component

0High
0Medium
0Low

mats.bryntse

rasmus.ersmarker

bryntum calendar vue wrapper

Vue 2 wrapper for Bryntum Calendar

This package provides a wrapper that turns Bryntum Calendar 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/calendar-vue-3 instead.

Package Contents

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

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

Installation

Vue 2 Wrapper

npm install @bryntum/calendar-vue@latest

Component Package (Required)

npm install @bryntum/calendar@latest

Try Bryntum Online Demos

View Online Vue Demos

Quick Start

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

<template>
    <bryntum-calendar
        :date="date"
        :events="events"
        />
</template>

<script>
import { BryntumCalendar } from '@bryntum/calendar-vue';
import '@bryntum/calendar/calendar.stockholm.css';
export default {
    components : {
        BryntumCalendar
    },
    data() {
        return {
            date : new Date(2026, 0, 15),
            events : [
                { id : 1, name : 'Team Meeting', startDate : '2026-01-15T10:00', endDate : '2026-01-15T11:00' }
            ]
        };
    }
};
</script>

<script>
import { ref } from '@vue/composition-api';
import { BryntumCalendar } from '@bryntum/calendar-vue';
export default {
    components : {
        BryntumCalendar
    },
    setup() {
        const date = ref(new Date(2026, 0, 15));

        const events = ref([
            { id : 1, name : 'Team Meeting', startDate : '2026-01-15T10:00', endDate : '2026-01-15T11:00' }
        ]);

        return { date, events };
    }
};
</script>

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.

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

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

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 Calendar 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

Bryntum Grid - High-performance data grid
Bryntum Scheduler - Resource scheduling component
Bryntum Scheduler Pro - Advanced scheduling with dependencies
Bryntum Gantt - Project planning and management
Bryntum Calendar - Full-featured calendar component
Bryntum TaskBoard - Kanban-style task management

Explore our comprehensive collection of demos:

| Product | JavaScript | React | Vue | 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 Calendar, which is commercial software and requires a paid license. Please visit the Bryntum Calendar End User License for the full text of the license.