The complete Calendar solution

Bryntum Calendar is a flexible UI component for Vue with great user and developer experience. Quickly set up a beautiful, full-featured calendar with day, week, month, year, and agenda views.

2 9 16 23 3 10 17 24 4 11 18 25 5 12 19 26 6 13 20 27 Setup Web Server Website Design Copywriting Strategy and… Implementation Quality Assurance

Get started with the Vue Calendar library

Flexible, powerful, responsive

Built with modern JavaScript ES6+ and Sass, Bryntum Vue Calendar seamlessly integrates into new and existing Vue applications and renders beautifully to any device and screen size.

Vue Calendar library code example


The following code example shows the initial setup for a Vue Calendar component in the ​​App.vue file.


import { ref, reactive, onMounted } from 'vue';

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

import { useCalendarConfig, useProjectConfig } from '@/AppConfig';

export default {
    name: 'App',

    components: {

    setup() {
        const calendar = ref(null);
        const project = ref(null);

        const calendarConfig = reactive(useCalendarConfig());
        const projectConfig = reactive(useProjectConfig());

        const resources = ref(null);
        const events = ref(null);

        resources.value = [
                id: 1,
                name: 'Default Calendar',
                eventColor: 'green'
        events.value =  [
                id: 1,
                name: 'Meeting',
                startDate: '2022-01-01T10:00:00',
                endDate: '2022-01-01T11:00:00',
                resourceId: 1

        onMounted(() => {
            calendar.value.instance.value.project = project.value.instance.value;

        return {

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

The high-performance Calendar component for Vue

Instantly and reliably load large datasets with many resources and tasks. Designed for optimal performance, Bryntum Vue Calendar is scalable and efficient.

A Vue Calendar with TypeScript Integration

Bryntum bundles include typings for classes, making them compatible with TypeScript applications.

The example code shows the creation of a tree store using the Bryntum Calendar library.

import { Store, StoreConfig, ModelConfig } from '@bryntum/calendar';

const storeConfig: Partial = {
    tree: true,
    data : [
            id: 1,
            children : [
                    id: 2
            ] as Partial[]
    ] as Partial[]

new Store(storeConfig);

A customizable and themeable Vue Calendar component

Choose from elegant and modern themes or modify the Calendar appearance to suit your style.

Easily customize the tooltip and event editor widgets to show any markup.

Trusted by the world’s leading companies

Ready to get started?