Cell Customization in Vue Schedule Component

3 Feb 202624 minutes to read

Cells in the Vue Schedule component can be customized using either the cellTemplate option or the renderCell event. These options allow modifying cell appearance, content, and behavior based on specific requirements across all views..

Setting cell dimensions in all views

The height and width of Schedule cells can be customized using the cssClass property. Applying a custom CSS class enables overriding the default styles applied to cells.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { employeeEventData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';

const eventSettings = { dataSource: employeeEventData };
const selectedDate = new Date(2018, 1, 15);

provide('schedule', [Day, Week, WorkWeek, Month]);

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.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>

Options API (~/src/App.vue)

<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 { employeeEventData } from './datasource.js';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    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/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.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>

Check for Cell Availability

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

Note: The isSlotAvailable method evaluates availability only within the current view’s date range. It does not check recurrence occurrences that fall outside the displayed range.

Composition API (~/src/App.vue)

<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 setup>
import { provide, ref } from "vue";
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';

const scheduleObj = ref(null);
const eventSettings = { dataSource: scheduleData };
const selectedDate = new Date(2018, 1, 15);

const onActionBegin = function (args) {
    if (args.requestType === 'eventCreate' && args.data.length > 0) {
        let eventData = args.data[0];
        let schedule = scheduleObj.value.ej2Instances;
        let eventField = schedule.eventFields;
        let startDate = eventData[eventField.startTime];
        let endDate = eventData[eventField.endTime];
        args.cancel = !schedule.isSlotAvailable(startDate, endDate);
    }
}

provide('schedule', [Week, WorkWeek]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Options API (~/src/App.vue)

<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 { scheduleData } from './datasource.js';
import { ScheduleComponent, ViewsDirective, ViewDirective, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";
</style>

Customizing Cells in all the Views

Cells can be customized visually using templates or through the renderCell event across all views of the Schedule component.

Using Template

The cellTemplate property accepts a template string and allows applying custom content such as background images, text, or formatted values based on date values.

Composition API (~/src/App.vue)

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :selectedDate='selectedDate'
                :cellTemplate="'cellTemplate'" cssClass='schedule-cell-template'>
                <template v-slot:cellTemplate="{ data }">
                    <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>
                </template>
                <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 setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, TimelineViews, Month, View } from '@syncfusion/ej2-vue-schedule';

const selectedDate = new Date(2017, 11, 16);

const 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 '';
}
const 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 '';
}

provide('schedule', [Day, Week, Month, TimelineViews]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.templatewrap {
    text-align: center;
    /* In MONTH view the cell template is a SIBLING of event templates. So which is necessary to set the parent position relative and the child position absolute with 100% width */
    position: absolute;
    width: 100%;
}

.schedule-cell-template.e-schedule .e-month-view .e-work-cells {
    position: relative;
}

.templatewrap img {
    width: 20px;
    height: 20px;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :selectedDate='selectedDate'
                :cellTemplate="'cellTemplate'" cssClass='schedule-cell-template'>
                <template v-slot:cellTemplate="{ data }">
                    <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>
                </template>
                <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 { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, TimelineViews, Month } from '@syncfusion/ej2-vue-schedule';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    data() {
        return {
            selectedDate: new Date(2017, 11, 16)
        }
    },
    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 '';
        }
    },
    provide: {
        schedule: [Day, Week, Month, TimelineViews]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

.templatewrap {
    text-align: center;
    /* In MONTH view the cell template is a SIBLING of event templates. So which is necessary to set the parent position relative and the child position absolute with 100% width */
    position: absolute;
    width: 100%;
}

.schedule-cell-template.e-schedule .e-month-view .e-work-cells {
    position: relative;
}

.templatewrap img {
    width: 20px;
    height: 20px;
}
</style>

Using RenderCell Event

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

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { createElement } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

const selectedDate = new Date(2018, 1, 14);
const eventSettings = { dataSource: scheduleData };
const currentView = 'Month';

const 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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

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

.templatewrap img {
    width: 20px;
    height: 20px;
}
</style>

Options API (~/src/App.vue)

<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 { createElement } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    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/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css";

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

.templatewrap img {
    width: 20px;
    height: 20px;
}
</style>

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 Cell Header in Month View

The month view cell header can be customized using the cellHeaderTemplate property, which accepts a template string or HTMLElement and includes the corresponding date.

Composition API (~/src/App.vue)

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :cellHeaderTemplate="'cellHeaderTemplate'"
                cssClass='schedule-cell-header-template'>
                <template v-slot:cellHeaderTemplate="{ data }">
                    <div v-html=getDateHeaderText(data.date)></div>
                </template>
                <e-views>
                    <e-view option='Month'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { Internationalization } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Month } from '@syncfusion/ej2-vue-schedule';

const instance = new Internationalization();

provide('schedule', [Month]);
const getDateHeaderText = function (date) {
    return instance.formatDate(date, { skeleton: "Ed" });
}
</script>

Options API (~/src/App.vue)

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule ref='scheduleObj' width='100%' height='550px' :cellHeaderTemplate="'cellHeaderTemplate'"
                cssClass='schedule-cell-header-template'>
                <template v-slot:cellHeaderTemplate="{ data }">
                    <div v-html=getDateHeaderText(data.date)></div>
                </template>
                <e-views>
                    <e-view option='Month'></e-view>
                </e-views>
            </ejs-schedule>
        </div>
    </div>
</template>
<script>
import { Internationalization } from '@syncfusion/ej2-base';
import { ScheduleComponent, ViewsDirective, ViewDirective, Month } from '@syncfusion/ej2-vue-schedule';

const instance = new Internationalization();

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    data() {
        return {}
    },
    provide: {
        schedule: [Month]
    },
    methods: {
        getDateHeaderText: function (date) {
            return instance.formatDate(date, { skeleton: "Ed" });
        }
    }
}
</script>

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.

Composition API (~/src/App.vue)

<template>
  <div id='app'>
    <ejs-schedule height='550px' :selectedDate='selectedDate' :minDate='minDate' :maxDate='maxDate'
      :currentView='currentView'>
    </ejs-schedule>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, Day, WorkWeek, Agenda, Month, Week } from '@syncfusion/ej2-vue-schedule';

const selectedDate = new Date(2018, 1, 17);
const minDate = new Date(2017, 4, 17);
const maxDate = new Date(2018, 5, 17);
const eventSettings = { dataSource: scheduleData };
const currentView = 'Month';

provide('schedule', [Day, WorkWeek, Agenda, Month, Week]);

</script>

Options API (~/src/App.vue)

<template>
  <div id='app'>
    <ejs-schedule height='550px' :selectedDate='selectedDate' :minDate='minDate' :maxDate='maxDate'
      :currentView='currentView'>
    </ejs-schedule>
  </div>
</template>
<script>
import { ScheduleComponent, Day, WorkWeek, Agenda, Month, Week } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';

export default {
  name: "App",
  components: {
    "ejs-schedule": ScheduleComponent
  },
  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>

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.

Customizing the Weekend Cells Background Color

Weekend cell background color can be customized using the renderCell event by checking the elementType property.

onRenderCell: function (args) {
    if (args.elementType == "workCells") {
        // To change the color of weekend columns in week view
        if (args.date) {
            if (args.date.getDay() === 6) {
                (args.element).style.background = '#ffdea2';
            }
            if (args.date.getDay() === 0) {
                (args.element).style.background = '#ffdea2';
            }
        }
    }
}

And, the background color for weekend cells in the Month view through the cssClass property, which overrides the default CSS applied on cells.

.schedule-cell-customization.e-schedule .e-month-view .e-work-cells:not(.e-work-days) {
    background-color: #f08080;
}

Composition API (~/src/App.vue)

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule id='Schedule' width='100%' cssClass='schedule-cell-customization' height='550px'
                :selectedDate='selectedDate' :eventSettings='eventSettings' :renderCell="onRenderCell">
                <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 setup>
import { provide } from "vue";
import { employeeEventData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';

const eventSettings = { dataSource: employeeEventData };
const selectedDate = new Date(2018, 1, 15);

provide('schedule', [Day, Week, WorkWeek, Month]);

const onRenderCell = function (args) {
    if (args.elementType == "workCells") {
        // To change the color of weekend columns in week view
        if (args.date) {
            if (args.date.getDay() === 6) {
                (args.element).style.background = '#ffdea2';
            }
            if (args.date.getDay() === 0) {
                (args.element).style.background = '#ffdea2';
            }
        }
    }
}


</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css';

.schedule-cell-customization.e-schedule .e-month-view .e-work-cells:not(.e-work-days) {
    background-color: #f08080;
}
</style>

Options API (~/src/App.vue)

<template>
    <div id='app'>
        <div id='container'>
            <ejs-schedule id='Schedule' width='100%' cssClass='schedule-cell-customization' height='550px'
                :selectedDate='selectedDate' :eventSettings='eventSettings' :renderCell="onRenderCell">
                <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 { employeeEventData } from './datasource.js';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';

export default {
    name: "App",
    components: {
        "ejs-schedule": ScheduleComponent,
        "e-views": ViewsDirective,
        "e-view": ViewDirective
    },
    data() {
        return {
            eventSettings: { dataSource: employeeEventData },
            selectedDate: new Date(2018, 1, 15)
        }
    },
    provide: {
        schedule: [Day, Week, WorkWeek, Month]
    },
    methods: {
        onRenderCell: function (args) {
            if (args.elementType == "workCells") {
                // To change the color of weekend columns in week view
                if (args.date) {
                    if (args.date.getDay() === 6) {
                        (args.element).style.background = '#ffdea2';
                    }
                    if (args.date.getDay() === 0) {
                        (args.element).style.background = '#ffdea2';
                    }
                }
            }
        }
    }
}

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-vue-schedule/styles/material3.css';

.schedule-cell-customization.e-schedule .e-month-view .e-work-cells:not(.e-work-days) {
    background-color: #f08080;
}
</style>

How to Disable Multiple Cell and Row Selection in Schedule

By default, the allowMultiCellSelection and allowMultiRowSelection properties of the Schedule are set to true. So, the Schedule allows user to select multiple cells and rows. If the user want to disable this multiple cell and row selection. The user can disable this feature by setting up false to these properties.

Refer to the Vue Scheduler feature tour page for detailed feature information. Explore the Vue Scheduler example for demonstrations of data binding and interaction.