Prevent date navigation in Vue Schedule component
12 Jul 20247 minutes to read
We can prevent navigation while clicking on the date header by simply removing e-navigate
class from header cells which can be achieved in the renderCell
event as shown in the following code example.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule width='100%' height='550px' :eventSettings='eventSettings' :selectedDate='selectedDate'
: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-view option='Agenda'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { extend, removeClass } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
const eventSettings = { dataSource: extend([], scheduleData, null, true) };
const selectedDate = new Date(2018, 1, 15);
provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);
const onRenderCell = function (args) {
if (args.elementType === 'dateHeader' || args.elementType === 'monthCells') {
removeClass(args.element.childNodes, 'e-navigate');
}
}
</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>
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule width='100%' height='550px' :eventSettings='eventSettings' :selectedDate='selectedDate'
: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-view option='Agenda'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import { extend, removeClass } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent,
"e-views": ViewsDirective,
"e-view": ViewDirective
},
data() {
return {
eventSettings: { dataSource: extend([], scheduleData, null, true) },
selectedDate: new Date(2018, 1, 15)
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month, Agenda]
},
methods: {
onRenderCell: function (args) {
if (args.elementType === 'dateHeader' || args.elementType === 'monthCells') {
removeClass(args.element.childNodes, 'e-navigate');
}
}
}
}
</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>