Search results

Working Days and Hours in Vue Schedule component

The Scheduler can be customized on various aspects as well as it inherits almost all the calendar-specific features such as options,

  • To set custom time range display on Scheduler
  • To set different working hours
  • To set different working days
  • To set different first day of week
  • To show/hide weekend days
  • To show the week number

Set working days

By default, Scheduler considers the week days from Monday to Friday as Working days and therefore defaults to [1,2,3,4,5] - where 1 represents Monday, 2 represents Tuesday and so on. The days which are not defined in this working days collection are considered as non-working days. Therefore, when the weekend days are set to hide from Scheduler, all those non-working days too gets hidden from the layout.

The Work week and Timeline Work week views displays exactly the defined working days on Scheduler layout, whereas other views displays all the days and simply differentiates the non-working days on UI with inactive cell color.

The working or business hours depiction on Scheduler are usually valid only on these specified working days.

The following example code depicts how to set the Scheduler to display Monday, Wednesday and Friday as working days of a week.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' :selectedDate='selectedDate' :eventSettings='eventSettings' :currentView='currentView' :workDays='workDays'>
                    <e-views>
                        <e-view option='Week'></e-view>
                        <e-view option='WorkWeek'></e-view>
                        <e-view option='Month'></e-view>
                        <e-view option='TimelineWeek'></e-view>
                        <e-view option='TimelineWorkWeek'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Week, WorkWeek, Month, TimelineViews } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                currentView: 'WorkWeek',
                workDays: [1, 3, 5],
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Week, WorkWeek, Month, TimelineViews]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];

    exports.roomData = [
        {
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 1
        },
        {
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 5
        },
        {
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 30, 9, 30),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 3
        },
        {
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 30, 11, 0),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 4
        },
        {
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 16, 0),
            EndTime: new Date(2018, 6, 30, 17, 30),
            RoomId: 5
        },
        {
            Id: 6, Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 30, 10, 30),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 6
        },
        {
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 16, 30),
            RoomId: 7
        },
        {
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 30, 8, 0),
            EndTime: new Date(2018, 6, 30, 9, 0),
            RoomId: 4
        },
        {
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 30, 10, 0),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 8
        },
        {
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 6, 30, 14, 30),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 9
        },
        {
            Id: 11,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 10, 30),
            RoomId: 10
        },
        {
            Id: 12,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 30, 11, 30),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 5
        },
        {
            Id: 13,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 14, 0),
            EndTime: new Date(2018, 6, 30, 16, 0),
            RoomId: 5
        },
        {
            Id: 14,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 1
        },
        {
            Id: 15,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 17, 0),
            RoomId: 6
        },
        {
            Id: 16,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 31, 9, 30),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 2
        },
        {
            Id: 17,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 31, 11, 0),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 7
        },
        {
            Id: 18,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 16, 0),
            EndTime: new Date(2018, 6, 31, 17, 30),
            RoomId: 2
        },
        {
            Id: 19,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 6, 31, 14, 30),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 9
        },
        {
            Id: 20,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 31, 10, 30),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 3
        },
        {
            Id: 21,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 31, 15, 0),
            EndTime: new Date(2018, 6, 31, 16, 30),
            RoomId: 3
        },
        {
            Id: 22,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 31, 8, 0),
            EndTime: new Date(2018, 6, 31, 9, 0),
            RoomId: 4
        },
        {
            Id: 23,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 31, 10, 0),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 4
        },
        {
            Id: 24,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 10
        },
        {
            Id: 25,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 10, 30),
            RoomId: 5
        },
        {
            Id: 26,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 31, 11, 30),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 5
        },
        {
            Id: 27,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 10
        },
    
        {
            Id: 28,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 11, 0),
            RoomId: 1
        },
        {
            Id: 29,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 7, 1, 17, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 6
        },
        {
            Id: 30,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 31,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 32,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 33,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 2
        },
        {
            Id: 34,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 13, 0),
            RoomId: 3
        },
        {
            Id: 35,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 16, 30),
            RoomId: 8
        },
        {
            Id: 36,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 11, 30),
            RoomId: 4
        },
        {
            Id: 37,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 7, 1, 10, 0),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 9
        },
        {
            Id: 38,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 4
        },
        {
            Id: 39,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 10, 30),
            RoomId: 5
        },
        {
            Id: 40,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 7, 1, 11, 30),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 5
        },
        {
            Id: 41,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 14, 0),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 10
        },
        {
            Id: 43,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 2
        },
        {
            Id: 44,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 17, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 1
        },
        {
            Id: 45,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 3
        },
        {
            Id: 46,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 4
        },
        {
            Id: 47,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 5
        },
        {
            Id: 48,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 5
        },
        {
            Id: 49,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 6
        },
        {
            Id: 50,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 6
        },
        {
            Id: 51,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 7
        },
        {
            Id: 52,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 19, 30),
            RoomId: 7
        },
        {
            Id: 53,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 9
        },
        {
            Id: 54,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 8
        },
        {
            Id: 55,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 10
        }
    ];
});

Hiding weekend days

The showWeekend property is used to either show or hide the weekend days of a week and it is not applicable on Work week view (as non-working days are usually not displayed on work week view). By default, it is set to true. The days which are not a part of the working days collection of a Scheduler are usually considered as non-working or weekend days.

Here, the working days are defined as [1, 3, 4, 5] on Scheduler and therefore the remaining days (0, 2, 6 – Sunday, Tuesday and Saturday) are considered as non-working or weekend days and will be hidden from all the views when showWeekend property is set to false.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :workDays='workDays' :showWeekend='showWeekend'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='TimelineMonth'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, TimelineMonth } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                showWeekend: false,
                workDays: [1, 3, 4, 5],
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Day, Week, TimelineMonth]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];

    exports.roomData = [
        {
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 1
        },
        {
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 5
        },
        {
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 30, 9, 30),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 3
        },
        {
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 30, 11, 0),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 4
        },
        {
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 16, 0),
            EndTime: new Date(2018, 6, 30, 17, 30),
            RoomId: 5
        },
        {
            Id: 6, Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 30, 10, 30),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 6
        },
        {
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 16, 30),
            RoomId: 7
        },
        {
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 30, 8, 0),
            EndTime: new Date(2018, 6, 30, 9, 0),
            RoomId: 4
        },
        {
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 30, 10, 0),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 8
        },
        {
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 6, 30, 14, 30),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 9
        },
        {
            Id: 11,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 10, 30),
            RoomId: 10
        },
        {
            Id: 12,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 30, 11, 30),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 5
        },
        {
            Id: 13,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 14, 0),
            EndTime: new Date(2018, 6, 30, 16, 0),
            RoomId: 5
        },
        {
            Id: 14,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 1
        },
        {
            Id: 15,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 17, 0),
            RoomId: 6
        },
        {
            Id: 16,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 31, 9, 30),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 2
        },
        {
            Id: 17,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 31, 11, 0),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 7
        },
        {
            Id: 18,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 16, 0),
            EndTime: new Date(2018, 6, 31, 17, 30),
            RoomId: 2
        },
        {
            Id: 19,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 6, 31, 14, 30),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 9
        },
        {
            Id: 20,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 31, 10, 30),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 3
        },
        {
            Id: 21,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 31, 15, 0),
            EndTime: new Date(2018, 6, 31, 16, 30),
            RoomId: 3
        },
        {
            Id: 22,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 31, 8, 0),
            EndTime: new Date(2018, 6, 31, 9, 0),
            RoomId: 4
        },
        {
            Id: 23,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 31, 10, 0),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 4
        },
        {
            Id: 24,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 10
        },
        {
            Id: 25,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 10, 30),
            RoomId: 5
        },
        {
            Id: 26,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 31, 11, 30),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 5
        },
        {
            Id: 27,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 10
        },
    
        {
            Id: 28,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 11, 0),
            RoomId: 1
        },
        {
            Id: 29,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 7, 1, 17, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 6
        },
        {
            Id: 30,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 31,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 32,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 33,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 2
        },
        {
            Id: 34,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 13, 0),
            RoomId: 3
        },
        {
            Id: 35,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 16, 30),
            RoomId: 8
        },
        {
            Id: 36,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 11, 30),
            RoomId: 4
        },
        {
            Id: 37,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 7, 1, 10, 0),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 9
        },
        {
            Id: 38,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 4
        },
        {
            Id: 39,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 10, 30),
            RoomId: 5
        },
        {
            Id: 40,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 7, 1, 11, 30),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 5
        },
        {
            Id: 41,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 14, 0),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 10
        },
        {
            Id: 43,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 2
        },
        {
            Id: 44,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 17, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 1
        },
        {
            Id: 45,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 3
        },
        {
            Id: 46,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 4
        },
        {
            Id: 47,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 5
        },
        {
            Id: 48,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 5
        },
        {
            Id: 49,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 6
        },
        {
            Id: 50,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 6
        },
        {
            Id: 51,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 7
        },
        {
            Id: 52,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 19, 30),
            RoomId: 7
        },
        {
            Id: 53,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 9
        },
        {
            Id: 54,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 8
        },
        {
            Id: 55,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 10
        }
    ];
});

Show week numbers

It is possible to show the week number count of a week in the header bar of the Scheduler by setting true to showWeekNumber property. By default, its default value is false. In Month view, the week numbers are displayed as a first column.

The showWeekNumber property is not applicable on Timeline views, as it has the equivalent headerRows property to handle such requirement with additional customizations.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :currentView='currentView' :showWeekNumber='showWeekNumber'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='Month'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, Month } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                currentView: 'Month',
                showWeekNumber: true,
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Day, Week, Month]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];

    exports.roomData = [
        {
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 1
        },
        {
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 5
        },
        {
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 30, 9, 30),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 3
        },
        {
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 30, 11, 0),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 4
        },
        {
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 16, 0),
            EndTime: new Date(2018, 6, 30, 17, 30),
            RoomId: 5
        },
        {
            Id: 6, Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 30, 10, 30),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 6
        },
        {
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 16, 30),
            RoomId: 7
        },
        {
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 30, 8, 0),
            EndTime: new Date(2018, 6, 30, 9, 0),
            RoomId: 4
        },
        {
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 30, 10, 0),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 8
        },
        {
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 6, 30, 14, 30),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 9
        },
        {
            Id: 11,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 10, 30),
            RoomId: 10
        },
        {
            Id: 12,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 30, 11, 30),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 5
        },
        {
            Id: 13,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 14, 0),
            EndTime: new Date(2018, 6, 30, 16, 0),
            RoomId: 5
        },
        {
            Id: 14,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 1
        },
        {
            Id: 15,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 17, 0),
            RoomId: 6
        },
        {
            Id: 16,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 31, 9, 30),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 2
        },
        {
            Id: 17,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 31, 11, 0),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 7
        },
        {
            Id: 18,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 16, 0),
            EndTime: new Date(2018, 6, 31, 17, 30),
            RoomId: 2
        },
        {
            Id: 19,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 6, 31, 14, 30),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 9
        },
        {
            Id: 20,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 31, 10, 30),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 3
        },
        {
            Id: 21,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 31, 15, 0),
            EndTime: new Date(2018, 6, 31, 16, 30),
            RoomId: 3
        },
        {
            Id: 22,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 31, 8, 0),
            EndTime: new Date(2018, 6, 31, 9, 0),
            RoomId: 4
        },
        {
            Id: 23,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 31, 10, 0),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 4
        },
        {
            Id: 24,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 10
        },
        {
            Id: 25,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 10, 30),
            RoomId: 5
        },
        {
            Id: 26,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 31, 11, 30),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 5
        },
        {
            Id: 27,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 10
        },
    
        {
            Id: 28,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 11, 0),
            RoomId: 1
        },
        {
            Id: 29,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 7, 1, 17, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 6
        },
        {
            Id: 30,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 31,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 32,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 33,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 2
        },
        {
            Id: 34,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 13, 0),
            RoomId: 3
        },
        {
            Id: 35,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 16, 30),
            RoomId: 8
        },
        {
            Id: 36,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 11, 30),
            RoomId: 4
        },
        {
            Id: 37,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 7, 1, 10, 0),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 9
        },
        {
            Id: 38,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 4
        },
        {
            Id: 39,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 10, 30),
            RoomId: 5
        },
        {
            Id: 40,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 7, 1, 11, 30),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 5
        },
        {
            Id: 41,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 14, 0),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 10
        },
        {
            Id: 43,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 2
        },
        {
            Id: 44,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 17, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 1
        },
        {
            Id: 45,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 3
        },
        {
            Id: 46,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 4
        },
        {
            Id: 47,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 5
        },
        {
            Id: 48,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 5
        },
        {
            Id: 49,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 6
        },
        {
            Id: 50,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 6
        },
        {
            Id: 51,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 7
        },
        {
            Id: 52,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 19, 30),
            RoomId: 7
        },
        {
            Id: 53,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 9
        },
        {
            Id: 54,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 8
        },
        {
            Id: 55,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 10
        }
    ];
});

Set working hours

Working hours indicates the work hour limit within the Scheduler, which is visually highlighted with an active color on work cells. The working hours can be set on Scheduler using the workHours property which is of object type and includes the following sub-options,

  • highlight – enables/disables the highlighting of work hours.
  • start - sets the start time of the working/business hour of a day.
  • end - sets the end time limit of the working/business hour of a day.
Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :workHours='workHours'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='WorkWeek'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                workHours: {
                    highlight: true,
                    start: '11:00',
                    end: '20:00'
                },
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];

    exports.roomData = [
        {
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 1
        },
        {
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 5
        },
        {
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 30, 9, 30),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 3
        },
        {
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 30, 11, 0),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 4
        },
        {
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 16, 0),
            EndTime: new Date(2018, 6, 30, 17, 30),
            RoomId: 5
        },
        {
            Id: 6, Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 30, 10, 30),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 6
        },
        {
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 16, 30),
            RoomId: 7
        },
        {
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 30, 8, 0),
            EndTime: new Date(2018, 6, 30, 9, 0),
            RoomId: 4
        },
        {
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 30, 10, 0),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 8
        },
        {
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 6, 30, 14, 30),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 9
        },
        {
            Id: 11,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 10, 30),
            RoomId: 10
        },
        {
            Id: 12,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 30, 11, 30),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 5
        },
        {
            Id: 13,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 14, 0),
            EndTime: new Date(2018, 6, 30, 16, 0),
            RoomId: 5
        },
        {
            Id: 14,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 1
        },
        {
            Id: 15,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 17, 0),
            RoomId: 6
        },
        {
            Id: 16,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 31, 9, 30),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 2
        },
        {
            Id: 17,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 31, 11, 0),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 7
        },
        {
            Id: 18,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 16, 0),
            EndTime: new Date(2018, 6, 31, 17, 30),
            RoomId: 2
        },
        {
            Id: 19,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 6, 31, 14, 30),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 9
        },
        {
            Id: 20,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 31, 10, 30),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 3
        },
        {
            Id: 21,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 31, 15, 0),
            EndTime: new Date(2018, 6, 31, 16, 30),
            RoomId: 3
        },
        {
            Id: 22,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 31, 8, 0),
            EndTime: new Date(2018, 6, 31, 9, 0),
            RoomId: 4
        },
        {
            Id: 23,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 31, 10, 0),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 4
        },
        {
            Id: 24,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 10
        },
        {
            Id: 25,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 10, 30),
            RoomId: 5
        },
        {
            Id: 26,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 31, 11, 30),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 5
        },
        {
            Id: 27,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 10
        },
    
        {
            Id: 28,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 11, 0),
            RoomId: 1
        },
        {
            Id: 29,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 7, 1, 17, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 6
        },
        {
            Id: 30,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 31,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 32,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 33,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 2
        },
        {
            Id: 34,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 13, 0),
            RoomId: 3
        },
        {
            Id: 35,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 16, 30),
            RoomId: 8
        },
        {
            Id: 36,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 11, 30),
            RoomId: 4
        },
        {
            Id: 37,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 7, 1, 10, 0),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 9
        },
        {
            Id: 38,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 4
        },
        {
            Id: 39,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 10, 30),
            RoomId: 5
        },
        {
            Id: 40,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 7, 1, 11, 30),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 5
        },
        {
            Id: 41,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 14, 0),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 10
        },
        {
            Id: 43,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 2
        },
        {
            Id: 44,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 17, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 1
        },
        {
            Id: 45,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 3
        },
        {
            Id: 46,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 4
        },
        {
            Id: 47,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 5
        },
        {
            Id: 48,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 5
        },
        {
            Id: 49,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 6
        },
        {
            Id: 50,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 6
        },
        {
            Id: 51,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 7
        },
        {
            Id: 52,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 19, 30),
            RoomId: 7
        },
        {
            Id: 53,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 9
        },
        {
            Id: 54,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 8
        },
        {
            Id: 55,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 10
        }
    ];
});

Scheduler displaying custom hours

It is possible to display the event Scheduler layout with specific time durations by hiding the unwanted hours. To do so, set the start and end hour for the Scheduler using the startHour and endHour properties respectively.

The following code example displays the Scheduler starting from the time range 7.00 AM to 6.00 PM and the remaining hours are hidden on the UI.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' startHour='07:00' endHour='18:00'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='WorkWeek'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];

    exports.roomData = [
        {
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 1
        },
        {
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 5
        },
        {
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 30, 9, 30),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 3
        },
        {
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 30, 11, 0),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 4
        },
        {
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 16, 0),
            EndTime: new Date(2018, 6, 30, 17, 30),
            RoomId: 5
        },
        {
            Id: 6, Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 30, 10, 30),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 6
        },
        {
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 16, 30),
            RoomId: 7
        },
        {
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 30, 8, 0),
            EndTime: new Date(2018, 6, 30, 9, 0),
            RoomId: 4
        },
        {
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 30, 10, 0),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 8
        },
        {
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 6, 30, 14, 30),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 9
        },
        {
            Id: 11,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 10, 30),
            RoomId: 10
        },
        {
            Id: 12,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 30, 11, 30),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 5
        },
        {
            Id: 13,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 14, 0),
            EndTime: new Date(2018, 6, 30, 16, 0),
            RoomId: 5
        },
        {
            Id: 14,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 1
        },
        {
            Id: 15,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 17, 0),
            RoomId: 6
        },
        {
            Id: 16,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 31, 9, 30),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 2
        },
        {
            Id: 17,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 31, 11, 0),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 7
        },
        {
            Id: 18,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 16, 0),
            EndTime: new Date(2018, 6, 31, 17, 30),
            RoomId: 2
        },
        {
            Id: 19,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 6, 31, 14, 30),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 9
        },
        {
            Id: 20,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 31, 10, 30),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 3
        },
        {
            Id: 21,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 31, 15, 0),
            EndTime: new Date(2018, 6, 31, 16, 30),
            RoomId: 3
        },
        {
            Id: 22,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 31, 8, 0),
            EndTime: new Date(2018, 6, 31, 9, 0),
            RoomId: 4
        },
        {
            Id: 23,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 31, 10, 0),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 4
        },
        {
            Id: 24,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 10
        },
        {
            Id: 25,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 10, 30),
            RoomId: 5
        },
        {
            Id: 26,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 31, 11, 30),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 5
        },
        {
            Id: 27,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 10
        },
    
        {
            Id: 28,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 11, 0),
            RoomId: 1
        },
        {
            Id: 29,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 7, 1, 17, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 6
        },
        {
            Id: 30,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 31,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 32,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 33,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 2
        },
        {
            Id: 34,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 13, 0),
            RoomId: 3
        },
        {
            Id: 35,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 16, 30),
            RoomId: 8
        },
        {
            Id: 36,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 11, 30),
            RoomId: 4
        },
        {
            Id: 37,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 7, 1, 10, 0),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 9
        },
        {
            Id: 38,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 4
        },
        {
            Id: 39,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 10, 30),
            RoomId: 5
        },
        {
            Id: 40,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 7, 1, 11, 30),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 5
        },
        {
            Id: 41,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 14, 0),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 10
        },
        {
            Id: 43,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 2
        },
        {
            Id: 44,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 17, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 1
        },
        {
            Id: 45,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 3
        },
        {
            Id: 46,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 4
        },
        {
            Id: 47,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 5
        },
        {
            Id: 48,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 5
        },
        {
            Id: 49,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 6
        },
        {
            Id: 50,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 6
        },
        {
            Id: 51,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 7
        },
        {
            Id: 52,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 19, 30),
            RoomId: 7
        },
        {
            Id: 53,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 9
        },
        {
            Id: 54,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 8
        },
        {
            Id: 55,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 10
        }
    ];
});

Setting start day of the week

By default, Scheduler defaults to Sunday as its first day of a week. To change the Scheduler’s start day of a week with different day, set the firstDayOfWeek property with the values ranging from 0 to 6.

Here, Sunday is always denoted as 0, Monday as 1 and so on.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :firstDayOfWeek='firstDayOfWeek'>
                    <e-views>
                        <e-view option='Week'></e-view>
                        <e-view option='Month'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Week, Month } from '@syncfusion/ej2-vue-schedule';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                firstDayOfWeek : 3,
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Week, Month]
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];

    exports.roomData = [
        {
            Id: 1,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 1
        },
        {
            Id: 2,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 5
        },
        {
            Id: 3,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 30, 9, 30),
            EndTime: new Date(2018, 6, 30, 11, 0),
            RoomId: 3
        },
        {
            Id: 4,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 30, 11, 0),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 4
        },
        {
            Id: 5,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 16, 0),
            EndTime: new Date(2018, 6, 30, 17, 30),
            RoomId: 5
        },
        {
            Id: 6, Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 30, 10, 30),
            EndTime: new Date(2018, 6, 30, 13, 0),
            RoomId: 6
        },
        {
            Id: 7,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 30, 15, 0),
            EndTime: new Date(2018, 6, 30, 16, 30),
            RoomId: 7
        },
        {
            Id: 8,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 30, 8, 0),
            EndTime: new Date(2018, 6, 30, 9, 0),
            RoomId: 4
        },
        {
            Id: 9,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 30, 10, 0),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 8
        },
        {
            Id: 10,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 6, 30, 14, 30),
            EndTime: new Date(2018, 6, 30, 17, 0),
            RoomId: 9
        },
        {
            Id: 11,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 30, 9, 0),
            EndTime: new Date(2018, 6, 30, 10, 30),
            RoomId: 10
        },
        {
            Id: 12,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 30, 11, 30),
            EndTime: new Date(2018, 6, 30, 12, 0),
            RoomId: 5
        },
        {
            Id: 13,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 30, 14, 0),
            EndTime: new Date(2018, 6, 30, 16, 0),
            RoomId: 5
        },
        {
            Id: 14,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 1
        },
        {
            Id: 15,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 17, 0),
            RoomId: 6
        },
        {
            Id: 16,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 6, 31, 9, 30),
            EndTime: new Date(2018, 6, 31, 11, 0),
            RoomId: 2
        },
        {
            Id: 17,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 6, 31, 11, 0),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 7
        },
        {
            Id: 18,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 16, 0),
            EndTime: new Date(2018, 6, 31, 17, 30),
            RoomId: 2
        },
        {
            Id: 19,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 6, 31, 14, 30),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 9
        },
        {
            Id: 20,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 6, 31, 10, 30),
            EndTime: new Date(2018, 6, 31, 13, 0),
            RoomId: 3
        },
        {
            Id: 21,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 6, 31, 15, 0),
            EndTime: new Date(2018, 6, 31, 16, 30),
            RoomId: 3
        },
        {
            Id: 22,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 6, 31, 8, 0),
            EndTime: new Date(2018, 6, 31, 9, 0),
            RoomId: 4
        },
        {
            Id: 23,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 6, 31, 10, 0),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 4
        },
        {
            Id: 24,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 10
        },
        {
            Id: 25,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 6, 31, 9, 0),
            EndTime: new Date(2018, 6, 31, 10, 30),
            RoomId: 5
        },
        {
            Id: 26,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 6, 31, 11, 30),
            EndTime: new Date(2018, 6, 31, 12, 0),
            RoomId: 5
        },
        {
            Id: 27,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 6, 31, 14, 0),
            EndTime: new Date(2018, 6, 31, 16, 0),
            RoomId: 10
        },
    
        {
            Id: 28,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business goal of 2018.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 11, 0),
            RoomId: 1
        },
        {
            Id: 29,
            Subject: 'Training session on JSP',
            Description: 'Knowledge sharing on JSP topics.',
            StartTime: new Date(2018, 7, 1, 17, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 6
        },
        {
            Id: 30,
            Subject: 'Sprint Planning with Team members',
            Description: 'Planning tasks for sprint.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 31,
            Subject: 'Meeting with Client',
            Description: 'Customer meeting to discuss features.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 32,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 2
        },
        {
            Id: 33,
            Subject: 'Training session on C#',
            Description: 'Training session',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 2
        },
        {
            Id: 34,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 13, 0),
            RoomId: 3
        },
        {
            Id: 35,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 16, 30),
            RoomId: 8
        },
        {
            Id: 36,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 11, 30),
            RoomId: 4
        },
        {
            Id: 37,
            Subject: 'Customer Meeting',
            Description: 'Meeting to discuss customer reported issues.',
            StartTime: new Date(2018, 7, 1, 10, 0),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 9
        },
        {
            Id: 38,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 0),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 4
        },
        {
            Id: 39,
            Subject: 'Training session on Vue',
            Description: 'Knowledge sharing on Vue concepts.',
            StartTime: new Date(2018, 7, 1, 9, 0),
            EndTime: new Date(2018, 7, 1, 10, 30),
            RoomId: 5
        },
        {
            Id: 40,
            Subject: 'Meeting with Team members',
            Description: 'Meeting to discuss on work report.',
            StartTime: new Date(2018, 7, 1, 11, 30),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 5
        },
        {
            Id: 41,
            Subject: 'Meeting with General Manager',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 14, 0),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 10
        },
        {
            Id: 43,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 2
        },
        {
            Id: 44,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 17, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 1
        },
        {
            Id: 45,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 16, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 3
        },
        {
            Id: 46,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 4
        },
        {
            Id: 47,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 18, 0),
            RoomId: 5
        },
        {
            Id: 48,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 18, 30),
            EndTime: new Date(2018, 7, 1, 20, 0),
            RoomId: 5
        },
        {
            Id: 49,
            Subject: 'HR Meeting',
            Description: 'Meeting to discuss HR plans.',
            StartTime: new Date(2018, 7, 1, 14, 30),
            EndTime: new Date(2018, 7, 1, 16, 0),
            RoomId: 6
        },
        {
            Id: 50,
            Subject: 'Board Meeting',
            Description: 'Meeting to discuss business plans.',
            StartTime: new Date(2018, 7, 1, 9, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 6
        },
        {
            Id: 51,
            Subject: 'Client Meeting',
            Description: 'Meeting to discuss client requirements.',
            StartTime: new Date(2018, 7, 1, 10, 30),
            EndTime: new Date(2018, 7, 1, 12, 0),
            RoomId: 7
        },
        {
            Id: 52,
            Subject: 'Appraisal Meeting',
            Description: 'Meeting to discuss employee appraisals.',
            StartTime: new Date(2018, 7, 1, 18, 0),
            EndTime: new Date(2018, 7, 1, 19, 30),
            RoomId: 7
        },
        {
            Id: 53,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 15, 30),
            EndTime: new Date(2018, 7, 1, 17, 0),
            RoomId: 9
        },
        {
            Id: 54,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 8
        },
        {
            Id: 55,
            Subject: 'Support Meeting with Managers',
            Description: 'Meeting to discuss support plan.',
            StartTime: new Date(2018, 7, 1, 11, 0),
            EndTime: new Date(2018, 7, 1, 12, 30),
            RoomId: 10
        }
    ];
});

Scroll to specific time and date

You can manually scroll to a specific time on Scheduler by making use of the scrollTo method as depicted in the following code example.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div>
                <ejs-timepicker width='100' :value='date' format='HH:mm' :change='onChange'>
                </ejs-timepicker>
            </div>
            <div id='container'>
                <ejs-schedule ref='ScheduleObj' height='510px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='WorkWeek'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';
    import { TimePickerPlugin } from '@syncfusion/ej2-vue-calendars';

    Vue.use(SchedulePlugin);
    Vue.use(TimePickerPlugin);

    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                eventSettings: { dataSource: scheduleData },
                date: new Date(2000, 0, 1, 9)
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek]
        },
        methods: {
            onChange: function(args){
                this.$refs.ScheduleObj.ej2Instances.scrollTo(args.text);
            }
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0),
            CategoryColor: '#ea7a57'
        }
    ];
});

How to scroll to current time on initial load

There are scenarios where you may need to load the Scheduler displaying the system’s current time on the currently visible view port area. In such cases, the Scheduler needs to be scrolled to a specific time based on the system’s current time which is depicted in the following code example.

Source
Preview
app.vue
datasource.js
<template>
    <div>
        <div id='app'>
            <div id='container'>
                <ejs-schedule ref='scheduleObj' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :created='onCreated'>
                    <e-views>
                        <e-view option='Day'></e-view>
                        <e-view option='Week'></e-view>
                        <e-view option='TimelineWorkWeek'></e-view>
                    </e-views>
                </ejs-schedule>
            </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Day, Week, TimelineViews } from '@syncfusion/ej2-vue-schedule';
    import { Internationalization } from '@syncfusion/ej2-base';

    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 15),
                eventSettings: { dataSource: scheduleData }
            }
        },
        provide: {
            schedule: [Day, Week, TimelineViews]
        },
        methods: {
            onCreated: function(){
                let intl = new Internationalization();
                this.$refs.scheduleObj.scrollTo(intl.formatDate(new Date(), { skeleton: 'Hm' }));
            }
        }
    }
</script>
<style>
  @import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.scheduleData = [
        {
            Id: 1,
            Subject: 'Explosion of Betelgeuse Star',
            StartTime: new Date(2018, 1, 11, 9, 30),
            EndTime: new Date(2018, 1, 11, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Thule Air Crash Report',
            StartTime: new Date(2018, 1, 12, 12, 0),
            EndTime: new Date(2018, 1, 12, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Blue Moon Eclipse',
            StartTime: new Date(2018, 1, 13, 9, 30),
            EndTime: new Date(2018, 1, 13, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Meteor Showers in 2018',
            StartTime: new Date(2018, 1, 14, 13, 0),
            EndTime: new Date(2018, 1, 14, 14, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Milky Way as Melting pot',
            StartTime: new Date(2018, 1, 15, 12, 0),
            EndTime: new Date(2018, 1, 15, 14, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Mysteries of Bermuda Triangle',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 11, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Glaciers and Snowflakes',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Life on Mars',
            StartTime: new Date(2018, 1, 17, 9, 0),
            EndTime: new Date(2018, 1, 17, 10, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Alien Civilization',
            StartTime: new Date(2018, 1, 19, 11, 0),
            EndTime: new Date(2018, 1, 19, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Wildlife Galleries',
            StartTime: new Date(2018, 1, 21, 11, 0),
            EndTime: new Date(2018, 1, 21, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Best Photography 2018',
            StartTime: new Date(2018, 1, 22, 9, 30),
            EndTime: new Date(2018, 1, 22, 11, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Smarter Puppies',
            StartTime: new Date(2018, 1, 9, 10, 0),
            EndTime: new Date(2018, 1, 9, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Myths of Andromeda Galaxy',
            StartTime: new Date(2018, 1, 7, 10, 30),
            EndTime: new Date(2018, 1, 7, 12, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Aliens vs Humans',
            StartTime: new Date(2018, 1, 5, 10, 0),
            EndTime: new Date(2018, 1, 5, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Facts of Humming Birds',
            StartTime: new Date(2018, 1, 20, 9, 30),
            EndTime: new Date(2018, 1, 20, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 23, 11, 0),
            EndTime: new Date(2018, 1, 23, 13, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 17,
            Subject: 'The Cycle of Seasons',
            StartTime: new Date(2018, 1, 12, 5, 30),
            EndTime: new Date(2018, 1, 12, 7, 30),
            CategoryColor: '#00bdae'
        }, {
            Id: 18,
            Subject: 'Space Galaxies and Planets',
            StartTime: new Date(2018, 1, 12, 17, 0),
            EndTime: new Date(2018, 1, 12, 18, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 19,
            Subject: 'Lifecycle of Bumblebee',
            StartTime: new Date(2018, 1, 15, 6, 0),
            EndTime: new Date(2018, 1, 15, 7, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 20,
            Subject: 'Sky Gazers',
            StartTime: new Date(2018, 1, 15, 16, 0),
            EndTime: new Date(2018, 1, 15, 18, 0