@bryntum/calendar-vue-3-thin

Vue 3 wrapper for Bryntum Calendar Thin packages

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

Thin Package: This is a thin wrapper package designed for applications that use multiple Bryntum products. Thin packages exclude bundled dependencies to avoid duplication. For details, see Vue Multiple Products.

Version Requirement

• Vue: 3.2 or higher
• TypeScript: 4.2 or higher
• Vite 5 or higher

Package Contents

Installation

Vue 3 Wrapper

npm install @bryntum/calendar-vue-3-thin@latest

Component Package (Required)

npm install @bryntum/calendar-thin@latest

Try Bryntum Online Demos

• View Online Vue Demos

Quick Start

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

<script setup>
import { createApp, ref } from 'vue';

import { BryntumCalendar } from '@bryntum/calendar-vue-3-thin';
import { calendarProps } from './AppConfig';

import './App.scss';

createApp({
});
</script>

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

<style lang="scss">
</style>

Create a CalendarConfig.ts file in the src/ directory with the following content:

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'
    }
};

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

Project Structure

Product Dependencies

API packages:

{
  "dependencies": {
    "@bryntum/core-thin": "7.3.7",
    "@bryntum/engine-thin": "7.3.7",
    "@bryntum/grid-thin": "7.3.7",
    "@bryntum/scheduler-thin": "7.3.7",
    "@bryntum/calendar-thin": "7.3.7"
  }
}

Framework wrapper packages:

{
  "dependencies": {
    "@bryntum/core-vue-3-thin": "7.3.7",
    "@bryntum/calendar-vue-3-thin": "7.3.7"
  }
}

Product Configuration

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

const calendarProps : BryntumCalendarProps = {
    // Calendar configuration
};

Product Styling

SCSS/CSS:

/* FontAwesome is used for icons */
@import '@bryntum/core-thin/fontawesome/css/fontawesome.css';
@import "@bryntum/core-thin/fontawesome/css/solid.css";
/* Structural CSS */
@import '@bryntum/core-thin/core.css';
@import '@bryntum/grid-thin/grid.css';
@import '@bryntum/scheduler-thin/scheduler.css';
@import '@bryntum/calendar-thin/calendar.css';
/* Theme */
@import '@bryntum/core-thin/svalbard-light.css';

Product Localization

import '@bryntum/calendar-thin/lib/localization/De.js'

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

• Bryntum Calendar documentation

• Bryntum Calendar examples

• Bryntum Support Forum

• Contact us

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.

Copyright © 2009-2026, Bryntum All rights reserved.