Bryntum Scheduler - A new scheduling component for Vue JS


#1

We just released a brand new JavaScript scheduler UI component which includes 40+ demos including a VueJS integration demo. There’s also great API documentation and guides to get you started.

Read more in our 1.0 release blog post

Live examples

API Docs

Basic code sample of adding the Schedule to a Vue app:

var vm = new Vue({
    el : '#app',

    data : {
        events      : [],
        resources   : [],
        timeRanges  : true,
        barMargin   : 5,
        startDate  : new Date(2017, 1, 7, 8),
        endDate    : new Date(2017, 1, 7, 18),
        selectedEvent : '',
        columns : [
            {
                type     : 'resourceInfo', imagePath : '../_shared/images/users/',
                text     : 'Staff',
                width    : 130
            },
            {
                text   : 'Type',
                field  : 'role',
                width  : 110,
                editor : {
                    type        : 'combo',
                    items       : ['Sales', 'Developer', 'Marketing', 'Product manager'],
                    editable    : false,
                    pickerWidth : 140
                }
            }
        ]
    },

    methods : {
        getData : function () {

            var me = this;

            axios.get('./data/data.json').then(function (response) {
                var data = response.data;
                me.resources = data.resources.rows;
                me.events = data.events.rows;
                me.timeRanges = data.timeRanges.rows;
            });
        },

        addEvent : function () {
            this.$refs.scheduler.addEvent();
        },

        removeEvent : function () {
            this.$refs.scheduler.removeEvent();
            this.selectedEvent = '';
        },

        onEventSelectionChange : function ({ selection, mode }) {
            if (selection.length) {
                this.selectedEvent = selection[0].name;
            }
            else {
                this.selectedEvent = '';
            }
        }
    },

    created: function () {
        this.getData();
    }

});

#2

I have written a small blog post on how to get started with it in your project: https://www.bryntum.com/blog/integrating-bryntum-scheduler-with-vuejs/

Free trial available if you want the check it out :slight_smile: