Vue

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.

View Examples

Download Trial

Get started with the Vue Calendar library

Quick start

Guide

Widgets

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.

<template>
    <div>
        <bryntum-calendar-project-model
            ref="project"
            v-bind="projectConfig"
            :resources="resources"
            :events="events"
        />
        <bryntum-calendar
            ref="calendar"
            v-bind="calendarConfig"
        />
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';

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

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

export default {
    name: 'App',

    components: {
        BryntumCalendarProjectModel,
        BryntumCalendar
    },

    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 {
            project,
            calendar,
            projectConfig,
            calendarConfig,
            resources,
            events
        };
    }
};
</script>

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

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.

View demo

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.

View the docs

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);