Search results

Cell Customizations in Vue Schedule component

The cells of the Scheduler can be easily customized either using the cell template or RenderCell event.

Setting cell dimensions in all views

The height and width of the Scheduler cells can be customized either to increase or reduce its size through the cssClass property, which overrides the default CSS applied on cells.

Source
Preview
app.vue
datasource.js
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule id='Schedule' width='100%' cssClass='schedule-cell-dimension' height='550px' :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-view option='Month'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { employeeEventData } from './datasource.js';
    import { SchedulePlugin, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                eventSettings: { dataSource: employeeEventData },
                selectedDate: new Date(2018, 1, 15)
            }
        },
        provide: {
            schedule: [Day, Week, WorkWeek, 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';

.schedule-cell-dimension.e-schedule .e-vertical-view .e-date-header-wrap table col,
.schedule-cell-dimension.e-schedule .e-vertical-view .e-content-wrap table col {
    width: 200px;
}

.schedule-cell-dimension.e-schedule .e-vertical-view .e-time-cells-wrap table td,
.schedule-cell-dimension.e-schedule .e-vertical-view .e-work-cells {
    height: 100px;
}

.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells,
.schedule-cell-dimension.e-schedule .e-month-view .e-date-header-wrap table col {
    width: 200px;
}

.schedule-cell-dimension.e-schedule .e-month-view .e-work-cells {
    height: 200px;
}

</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.employeeEventData = [
        {
            Id: 1,
            Subject: 'Project Workflow Analysis',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Project Requirement Planning',
            StartTime: new Date(2018, 1, 13, 11, 30),
            EndTime: new Date(2018, 1, 13, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Quality Analysis',
            StartTime: new Date(2018, 1, 14, 9, 30),
            EndTime: new Date(2018, 1, 14, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Timeline Estimation',
            StartTime: new Date(2018, 1, 14, 11, 30),
            EndTime: new Date(2018, 1, 14, 14, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Project Resource planning',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Meeting with Developers',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 13, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Task Assignment to Developers',
            StartTime: new Date(2018, 1, 19, 10, 0),
            EndTime: new Date(2018, 1, 19, 11, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Project Review - 1',
            StartTime: new Date(2018, 1, 20, 11, 0),
            EndTime: new Date(2018, 1, 20, 12, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Project Review - 2',
            StartTime: new Date(2018, 1, 21, 12, 0),
            EndTime: new Date(2018, 1, 21, 13, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Project Review - 3',
            StartTime: new Date(2018, 1, 22, 11, 0),
            EndTime: new Date(2018, 1, 22, 12, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Project Output Preview',
            StartTime: new Date(2018, 1, 23, 9, 30),
            EndTime: new Date(2018, 1, 23, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Testing Project Quality',
            StartTime: new Date(2018, 1, 26, 10, 0),
            EndTime: new Date(2018, 1, 26, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Draft Technical Documentation',
            StartTime: new Date(2018, 1, 27, 10, 0),
            EndTime: new Date(2018, 1, 27, 13, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Online Hosting of Project',
            StartTime: new Date(2018, 1, 28, 10, 0),
            EndTime: new Date(2018, 1, 28, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Project Submission to Client',
            StartTime: new Date(2018, 2, 1, 10, 0),
            EndTime: new Date(2018, 2, 1, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Review meeting with Client',
            StartTime: new Date(2018, 2, 2, 10, 0),
            EndTime: new Date(2018, 2, 2, 11, 30),
            CategoryColor: '#ea7a57'
        }
    ];
});

Check for cell availability

You can check whether the given time range slots are available for event creation or already occupied by other events using the isSlotAvailable method. In the following code example, if a specific time slot already contains an appointment, then no more appointments can be added to that cell.

Source
Preview
app.vue
datasource.js
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :selectedDate='selectedDate' :eventSettings='eventSettings' :actionBegin='onActionBegin'>
                <e-views>
                    <e-view option='Week'></e-view>
                    <e-view option='WorkWeek'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { scheduleData } from './datasource.js';
    import { SchedulePlugin, Week, WorkWeek, View } from '@syncfusion/ej2-vue-schedule';
    Vue.use(SchedulePlugin);
    export default {
        data () {
            return {
                eventSettings: { dataSource: scheduleData },
                selectedDate: new Date(2018, 1, 15)
            }
        },
        methods: {
            onActionBegin: function(args){
                if (args.requestType === 'eventCreate' && args.data.length > 0) {
                    let eventData = args.data[0];
                    let scheduleObj = this.$refs.scheduleObj.ej2Instances;
                    let eventField = scheduleObj.eventFields;
                    let startDate = eventData[eventField.startTime];
                    let endDate = eventData[eventField.endTime];
                    args.cancel = !scheduleObj.isSlotAvailable(startDate, endDate);
                }
            }
        },
        provide: {
            schedule: [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.employeeEventData = [
        {
            Id: 1,
            Subject: 'Project Workflow Analysis',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Project Requirement Planning',
            StartTime: new Date(2018, 1, 13, 11, 30),
            EndTime: new Date(2018, 1, 13, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Quality Analysis',
            StartTime: new Date(2018, 1, 14, 9, 30),
            EndTime: new Date(2018, 1, 14, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Timeline Estimation',
            StartTime: new Date(2018, 1, 14, 11, 30),
            EndTime: new Date(2018, 1, 14, 14, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Project Resource planning',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Meeting with Developers',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 13, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Task Assignment to Developers',
            StartTime: new Date(2018, 1, 19, 10, 0),
            EndTime: new Date(2018, 1, 19, 11, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Project Review - 1',
            StartTime: new Date(2018, 1, 20, 11, 0),
            EndTime: new Date(2018, 1, 20, 12, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Project Review - 2',
            StartTime: new Date(2018, 1, 21, 12, 0),
            EndTime: new Date(2018, 1, 21, 13, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Project Review - 3',
            StartTime: new Date(2018, 1, 22, 11, 0),
            EndTime: new Date(2018, 1, 22, 12, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Project Output Preview',
            StartTime: new Date(2018, 1, 23, 9, 30),
            EndTime: new Date(2018, 1, 23, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Testing Project Quality',
            StartTime: new Date(2018, 1, 26, 10, 0),
            EndTime: new Date(2018, 1, 26, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Draft Technical Documentation',
            StartTime: new Date(2018, 1, 27, 10, 0),
            EndTime: new Date(2018, 1, 27, 13, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Online Hosting of Project',
            StartTime: new Date(2018, 1, 28, 10, 0),
            EndTime: new Date(2018, 1, 28, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Project Submission to Client',
            StartTime: new Date(2018, 2, 1, 10, 0),
            EndTime: new Date(2018, 2, 1, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Review meeting with Client',
            StartTime: new Date(2018, 2, 2, 10, 0),
            EndTime: new Date(2018, 2, 2, 11, 30),
            CategoryColor: '#ea7a57'
        }
    ];
});

Customizing cells in all the views

It is possible to customize the appearance of the cells using both template options and renderCell event on all the views.

Using template

The cellTemplate option accepts the template string and is used to customize the cell background with specific images or appropriate text on the given date values.

Source
Preview
app.vue
datasource.js
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :selectedDate='selectedDate' :cellTemplate='cellTemplate'>
                <e-views>
                    <e-view option='Day'></e-view>
                    <e-view option='Week'></e-view>
                    <e-view option='Month'></e-view>
                    <e-view option='TimelineWeek'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import { SchedulePlugin, Day, Week, TimelineViews, Month, View } from '@syncfusion/ej2-vue-schedule';
    Vue.use(SchedulePlugin);

    var cellTemplateVue = Vue.component("cellTemplate", {
        template: `<div class="templatewrap"><div v-if="data.type==='workCells'"><div v-html=getWorkCellText(data.date)></div></div><div v-else-if="data.type==='monthCells'"><div v-html=getMonthCellText(data.date)></div></div></div>`,
        data() {
            return {
                data: {}
            };
        },
        methods: {
            getWorkCellText: function(date) {
                let weekEnds = [0, 6];
                if (weekEnds.indexOf(date.getDay()) >= 0) {
                    return "<img src='https://ej2.syncfusion.com/demos/src/schedule/images/newyear.svg' />";
                }
                return '';
            },
            getMonthCellText: function(date) {
                if (date.getMonth() === 10 && date.getDate() === 23) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg"/>';
                } else if (date.getMonth() === 11 && date.getDate() === 9) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" />';
                } else if (date.getMonth() === 11 && date.getDate() === 13) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
                } else if (date.getMonth() === 11 && date.getDate() === 22) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/thanksgiving-day.svg" />';
                } else if (date.getMonth() === 11 && date.getDate() === 24) {
                    return '<img src="https://ej2.syncfusion.com/demos/src/schedule/images/christmas-eve.svg" />';
                } else if (date.getMonth() === 11 && date.getDate() === 25) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/christmas.svg" />';
                } else if (date.getMonth() === 0 && date.getDate() === 1) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/newyear.svg" />';
                } else if (date.getMonth() === 0 && date.getDate() === 14) {
                    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
                }
                return '';
            }
        }
    });

    export default {
        data () {
            return {
                selectedDate: new Date(2017, 11, 16),
                cellTemplate: function (e) {
                    return {
                        template: cellTemplateVue
                    };
                },
            }
        },
        provide: {
            schedule: [Day, Week, 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";

.templatewrap {
  text-align: center;
  width: 100%;
}

.templatewrap img {
  width: 20px;
  height: 20px;
}
</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.employeeEventData = [
        {
            Id: 1,
            Subject: 'Project Workflow Analysis',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Project Requirement Planning',
            StartTime: new Date(2018, 1, 13, 11, 30),
            EndTime: new Date(2018, 1, 13, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Quality Analysis',
            StartTime: new Date(2018, 1, 14, 9, 30),
            EndTime: new Date(2018, 1, 14, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Timeline Estimation',
            StartTime: new Date(2018, 1, 14, 11, 30),
            EndTime: new Date(2018, 1, 14, 14, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Project Resource planning',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Meeting with Developers',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 13, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Task Assignment to Developers',
            StartTime: new Date(2018, 1, 19, 10, 0),
            EndTime: new Date(2018, 1, 19, 11, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Project Review - 1',
            StartTime: new Date(2018, 1, 20, 11, 0),
            EndTime: new Date(2018, 1, 20, 12, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Project Review - 2',
            StartTime: new Date(2018, 1, 21, 12, 0),
            EndTime: new Date(2018, 1, 21, 13, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Project Review - 3',
            StartTime: new Date(2018, 1, 22, 11, 0),
            EndTime: new Date(2018, 1, 22, 12, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Project Output Preview',
            StartTime: new Date(2018, 1, 23, 9, 30),
            EndTime: new Date(2018, 1, 23, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Testing Project Quality',
            StartTime: new Date(2018, 1, 26, 10, 0),
            EndTime: new Date(2018, 1, 26, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Draft Technical Documentation',
            StartTime: new Date(2018, 1, 27, 10, 0),
            EndTime: new Date(2018, 1, 27, 13, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Online Hosting of Project',
            StartTime: new Date(2018, 1, 28, 10, 0),
            EndTime: new Date(2018, 1, 28, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Project Submission to Client',
            StartTime: new Date(2018, 2, 1, 10, 0),
            EndTime: new Date(2018, 2, 1, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Review meeting with Client',
            StartTime: new Date(2018, 2, 2, 10, 0),
            EndTime: new Date(2018, 2, 2, 11, 30),
            CategoryColor: '#ea7a57'
        }
    ];
});

Using renderCell event

An alternative to cellTemplate is the renderCell event, which can also be used to customize the cells with appropriate images or formatted text values.

Source
Preview
app.vue
datasource.js
<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :selectedDate='selectedDate' :currentView='currentView' :renderCell='onRenderCell'>
                <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>
</template>
<script>
    import Vue from 'vue';
    import { createElement } from '@syncfusion/ej2-base';
    import { SchedulePlugin, Day, Week, Month } from '@syncfusion/ej2-vue-schedule';
    import { scheduleData } from './datasource.js';
    Vue.use(SchedulePlugin);

    export default {
        data () {
            return {
                selectedDate: new Date(2018, 1, 14),
                eventSettings: { dataSource: scheduleData },
                currentView: 'Month'
            }
        },
        methods: {
            onRenderCell: (args) => {
                if (args.elementType == 'workCells' || args.elementType == 'monthCells') {
                    let weekEnds = [0, 6];
                    if (weekEnds.indexOf((args.date).getDay()) >= 0) {
                        let ele = createElement('div', {
                            innerHTML: "<img src='https://ej2.syncfusion.com/demos/src/schedule/images/newyear.svg' />",
                            className: 'templatewrap'
                        });
                        (args.element).appendChild(ele);
                    }
                }
            }
        },
        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";

.templatewrap {
  text-align: center;
  width: 100%;
}

.templatewrap img {
  width: 20px;
  height: 20px;
}
</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.employeeEventData = [
        {
            Id: 1,
            Subject: 'Project Workflow Analysis',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Project Requirement Planning',
            StartTime: new Date(2018, 1, 13, 11, 30),
            EndTime: new Date(2018, 1, 13, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Quality Analysis',
            StartTime: new Date(2018, 1, 14, 9, 30),
            EndTime: new Date(2018, 1, 14, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Timeline Estimation',
            StartTime: new Date(2018, 1, 14, 11, 30),
            EndTime: new Date(2018, 1, 14, 14, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Project Resource planning',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Meeting with Developers',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 13, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Task Assignment to Developers',
            StartTime: new Date(2018, 1, 19, 10, 0),
            EndTime: new Date(2018, 1, 19, 11, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Project Review - 1',
            StartTime: new Date(2018, 1, 20, 11, 0),
            EndTime: new Date(2018, 1, 20, 12, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Project Review - 2',
            StartTime: new Date(2018, 1, 21, 12, 0),
            EndTime: new Date(2018, 1, 21, 13, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Project Review - 3',
            StartTime: new Date(2018, 1, 22, 11, 0),
            EndTime: new Date(2018, 1, 22, 12, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Project Output Preview',
            StartTime: new Date(2018, 1, 23, 9, 30),
            EndTime: new Date(2018, 1, 23, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Testing Project Quality',
            StartTime: new Date(2018, 1, 26, 10, 0),
            EndTime: new Date(2018, 1, 26, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Draft Technical Documentation',
            StartTime: new Date(2018, 1, 27, 10, 0),
            EndTime: new Date(2018, 1, 27, 13, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Online Hosting of Project',
            StartTime: new Date(2018, 1, 28, 10, 0),
            EndTime: new Date(2018, 1, 28, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Project Submission to Client',
            StartTime: new Date(2018, 2, 1, 10, 0),
            EndTime: new Date(2018, 2, 1, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Review meeting with Client',
            StartTime: new Date(2018, 2, 2, 10, 0),
            EndTime: new Date(2018, 2, 2, 11, 30),
            CategoryColor: '#ea7a57'
        }
    ];
});

You can customize cells such as work cells, month cells, all-day cells, header cells, resource header cells using renderCell event by checking the elementType option within the event. You can check elementType with any of the following.

Element type Description
dateHeader triggers on header cell rendering.
monthDay triggers on header cell in month view rendering.
resourceHeader triggers on resource header cell rendering.
alldayCells triggers on all day cell rendering.
emptyCells triggers on empty cell rendering on header bar.
resourceGroupCells triggers on rendering of work cells for parent resource.
workCells triggers on work cell rendering.
monthCells triggers on month cell rendering.
majorSlot triggers on major time slot cell rendering.
minorSlot triggers on minor time slot cell rendering.
weekNumberCell triggers on cell displaying week number.

Customizing the minimum and maximum date values

Providing the minDate and maxDate property with some date values, allows the Scheduler to set the minimum and maximum date range. The Scheduler date that lies beyond this minimum and maximum date range will be in a disabled state so that the date navigation will be blocked beyond the specified date range.

Source
Preview
app.vue
datasource.js
<template>
    <div id='app'>
        <ejs-schedule height='550px' :selectedDate='selectedDate' :minDate='minDate' :maxDate='maxDate' :currentView='currentView'>
        </ejs-schedule>
    </div>
</template>
<script>
  import Vue from 'vue';
  import { scheduleData } from './datasource.js';
  import { SchedulePlugin, Day, WorkWeek, Agenda, Month, Week } from '@syncfusion/ej2-vue-schedule';
  Vue.use(SchedulePlugin);
  export default {
    data () {
      return {
        selectedDate: new Date(2018, 1, 17),
        minDate: new Date(2017, 4, 17),
        maxDate: new Date(2018, 5, 17)
        eventSettings: { dataSource: scheduleData },
        currentView: 'Month',
      }
    },
    provide: {
      schedule: [Day, WorkWeek, Agenda, Month, Week]
    }
  }
</script>
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.employeeEventData = [
        {
            Id: 1,
            Subject: 'Project Workflow Analysis',
            StartTime: new Date(2018, 1, 12, 9, 0),
            EndTime: new Date(2018, 1, 12, 11, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 2,
            Subject: 'Project Requirement Planning',
            StartTime: new Date(2018, 1, 13, 11, 30),
            EndTime: new Date(2018, 1, 13, 14, 0),
            CategoryColor: '#357cd2'
        }, {
            Id: 3,
            Subject: 'Quality Analysis',
            StartTime: new Date(2018, 1, 14, 9, 30),
            EndTime: new Date(2018, 1, 14, 11, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 4,
            Subject: 'Timeline Estimation',
            StartTime: new Date(2018, 1, 14, 11, 30),
            EndTime: new Date(2018, 1, 14, 14, 0),
            CategoryColor: '#ea7a57'
        }, {
            Id: 5,
            Subject: 'Project Resource planning',
            StartTime: new Date(2018, 1, 15, 9, 30),
            EndTime: new Date(2018, 1, 15, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 6,
            Subject: 'Meeting with Developers',
            StartTime: new Date(2018, 1, 16, 11, 0),
            EndTime: new Date(2018, 1, 16, 13, 0),
            CategoryColor: '#f57f17'
        }, {
            Id: 7,
            Subject: 'Task Assignment to Developers',
            StartTime: new Date(2018, 1, 19, 10, 0),
            EndTime: new Date(2018, 1, 19, 11, 30),
            CategoryColor: '#1aaa55'
        }, {
            Id: 8,
            Subject: 'Project Review - 1',
            StartTime: new Date(2018, 1, 20, 11, 0),
            EndTime: new Date(2018, 1, 20, 12, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 9,
            Subject: 'Project Review - 2',
            StartTime: new Date(2018, 1, 21, 12, 0),
            EndTime: new Date(2018, 1, 21, 13, 30),
            CategoryColor: '#7fa900'
        }, {
            Id: 10,
            Subject: 'Project Review - 3',
            StartTime: new Date(2018, 1, 22, 11, 0),
            EndTime: new Date(2018, 1, 22, 12, 30),
            CategoryColor: '#ea7a57'
        }, {
            Id: 11,
            Subject: 'Project Output Preview',
            StartTime: new Date(2018, 1, 23, 9, 30),
            EndTime: new Date(2018, 1, 23, 12, 0),
            CategoryColor: '#00bdae'
        }, {
            Id: 12,
            Subject: 'Testing Project Quality',
            StartTime: new Date(2018, 1, 26, 10, 0),
            EndTime: new Date(2018, 1, 26, 11, 30),
            CategoryColor: '#f57f17'
        }, {
            Id: 13,
            Subject: 'Draft Technical Documentation',
            StartTime: new Date(2018, 1, 27, 10, 0),
            EndTime: new Date(2018, 1, 27, 13, 0),
            CategoryColor: '#1aaa55'
        }, {
            Id: 14,
            Subject: 'Online Hosting of Project',
            StartTime: new Date(2018, 1, 28, 10, 0),
            EndTime: new Date(2018, 1, 28, 11, 30),
            CategoryColor: '#357cd2'
        }, {
            Id: 15,
            Subject: 'Project Submission to Client',
            StartTime: new Date(2018, 2, 1, 10, 0),
            EndTime: new Date(2018, 2, 1, 13, 0),
            CategoryColor: '#7fa900'
        }, {
            Id: 16,
            Subject: 'Review meeting with Client',
            StartTime: new Date(2018, 2, 2, 10, 0),
            EndTime: new Date(2018, 2, 2, 11, 30),
            CategoryColor: '#ea7a57'
        }
    ];
});

By default, the minDate property value is set to new Date(1900, 0, 1) and maxDate property value is set to new Date(2099, 11, 31). The user can also set the customized minDate and maxDate property values.