vuejs-scheduler-javascript.png

Online Configurator

You can use Scheduler UI Builder lets you configure the Vue.js Scheduler component and generate a downloadable Vue.js project.

Tutorial

Example

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js Scheduler</title>

    <!-- DayPilot library -->
    <script src="js/daypilot/daypilot-all.min.js"></script>

    <!-- Vue.js -->
    <script src="https://unpkg.com/vue"></script>

</head>
<body>

<div id="scheduler-app">
    <scheduler id="dp" :config="initConfig" ref="scheduler"></scheduler>
</div>


<script>
    Vue.component('scheduler', {
        props: ['id', 'config'],
        template: '<div :id="id"></div>',
        mounted: function () {
            this.control = new DayPilot.Scheduler(this.id, this.config).init();
        }
    });

    var app = new Vue({
        el: '#scheduler-app',
        data: {
            initConfig: {
                timeHeaders: [{"groupBy": "Month"}, {"groupBy": "Day", "format": "d"}],
                scale: "Day",
                days: DayPilot.Date.today().daysInMonth(),
                startDate: DayPilot.Date.today().firstDayOfMonth()
            }
        },
        computed: {
            // returns DayPilot.Scheduler object (https://api.daypilot.org/daypilot-scheduler-class/)
            scheduler: function () {
                return this.$refs.scheduler.control;
            }
        },
        methods: {
            loadReservations: function () {
                // placeholder for an AJAX call
                var data = [
                    {
                        id: 1,
                        resource: "R1",
                        start: DayPilot.Date.today().firstDayOfMonth().addDays(3),
                        end: DayPilot.Date.today().firstDayOfMonth().addDays(7),
                        text: "Event 1",
                        barColor: "#cc0000"
                    },
                    {
                        id: 2,
                        resource: "R2",
                        start: DayPilot.Date.today().firstDayOfMonth().addDays(5),
                        end: DayPilot.Date.today().firstDayOfMonth().addDays(10),
                        text: "Event 2",
                        barColor: "#38761d"
                    }
                ];
                this.scheduler.update({events: data});
            },
            loadResources: function () {
                // placeholder for an AJAX call
                var data = [
                    {
                        name: "Group A", id: "GA", expanded: true, children: [
                        {name: "Resource 1", id: "R1"},
                        {name: "Resource 2", id: "R2"}
                    ]
                    },
                    {
                        name: "Group B", id: "GB", expanded: true, children: [
                        {name: "Resource 3", id: "R3"},
                        {name: "Resource 4", id: "R4"}
                    ]
                    }
                ];
                this.scheduler.update({resources: data});
            }
        },
        mounted: function () {
            this.loadResources();
            this.loadReservations();
        }
    });

</script>
</body>
</html>