Vue

The Complete Vue Calendar Solution

Bryntum Calendar is a flexible UI component with Vue integration and first-class user and developer experience. The feature-rich Calendar offers intuitive menus and interactions that allow users to stay on track with ease.

View Examples

Download Trial

Get Started With the Vue Calendar Library

Quickstart

Guide

Widgets

The Vue Calendar Component

Built with modern JavaScript ES6+, the Bryntum Calendar integrates into new and existing Vue applications. Customize widgets, tooltips, and more using Vue components to match your users’ needs and design requirements.

Configure the UI the Vue.js Way

The Vue package includes wrappers with unique HTML tags. Use these Vue components to access the Bryntum Calendar API using Vue’s declarative approach for building web applications.

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