How can I help you?
Editor Template in Vue Schedule Component
3 Feb 202624 minutes to read
The Schedule component uses popups and dialog windows to display notifications and includes an editor window containing event fields that simplify appointment creation and modification. The editor window and its fields can be customized, and validation rules can be applied where necessary.
Event Editor
The editor window usually opens on the Scheduler, when a cell or event is double clicked. When a cell is double clicked, the detailed editor window opens in “Add new” mode, whereas when an event is double clicked, the same is opened in an “Edit” mode.
On mobile devices, the detailed editor window can be opened in edit mode by tapping the edit icon in the popup displayed after tapping an event. Tapping a cell displays a + indicator, which when tapped again, opens the editor in add mode.
The editor window can be prevented from opening by enabling the
readonlymode or by customizing behavior within thepopupOpenevent.
How to change the editor window header title and text of footer buttons
The header title and footer button text of the editor window can be modified by customizing the localized word collection used in the Schedule component.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :views='views'
:eventSettings='eventSettings'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { L10n } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
L10n.load({
'en-US': {
'schedule': {
'saveButton': 'Add',
'cancelButton': 'Close',
'deleteButton': 'Remove',
'newEvent': 'Add Event',
},
}
});
const height = '550px';
const width = '100%';
const views = ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'];
const eventSettings = { dataSource: scheduleData };
const selectedDate = new Date(2018, 1, 15);
provide('schedule', [Day, Week, TimelineViews, Month, Agenda]);
</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><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :views='views'
:eventSettings='eventSettings'></ejs-schedule>
</div>
</div>
</template>
<script>
import { L10n } from '@syncfusion/ej2-base';
import { ScheduleComponent, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
L10n.load({
'en-US': {
'schedule': {
'saveButton': 'Add',
'cancelButton': 'Close',
'deleteButton': 'Remove',
'newEvent': 'Add Event',
},
}
});
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'],
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2018, 1, 15),
}
},
provide: {
schedule: [Day, Week, TimelineViews, Month, Agenda]
}
}
</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>How to change the label text of default editor fields
Default field labels such as Subject, Location, and others can be customized using the title property of the eventSettings field options.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :views='views'
:eventSettings='eventSettings'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'];
const eventSettings = {
dataSource: scheduleData,
fields: {
id: 'Id',
subject: { name: 'Subject', title: 'Event Name' },
location: { name: 'Location', title: 'Event Location' },
description: { name: 'Description', title: 'Event Description' },
startTime: { name: 'StartTime', title: 'Start Duration' },
endTime: { name: 'EndTime', title: 'End Duration' }
}
};
const selectedDate = new Date(2018, 1, 15);
provide('schedule', [Day, Week, TimelineViews, Month, Agenda]);
</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><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :views='views'
:eventSettings='eventSettings'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, TimelineViews, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'],
eventSettings: {
dataSource: scheduleData,
fields: {
id: 'Id',
subject: { name: 'Subject', title: 'Event Name' },
location: { name: 'Location', title: 'Event Location' },
description: { name: 'Description', title: 'Event Description' },
startTime: { name: 'StartTime', title: 'Start Duration' },
endTime: { name: 'EndTime', title: 'End Duration' }
}
},
selectedDate: new Date(2018, 1, 15),
}
},
provide: {
schedule: [Day, Week, TimelineViews, Month, Agenda]
}
}
</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>Field Validation
It is possible to validate the required fields of the editor window from client-side before submitting it, by adding appropriate validation rules to each field. The appointment fields have been extended to accept both string and object type values. To perform validations, it is necessary to specify object values for the event fields.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate'
:eventSettings='eventSettings'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const minValidation = (args) => {
return args['value'].length >= 5;
};
const height = '550px';
const width = '100%';
const eventSettings = {
dataSource: scheduleData,
fields: {
id: 'Id',
subject: { name: 'Subject', validation: { required: true } },
location: { name: 'Location', validation: { required: true } },
description: {
name: 'Description', validation: {
required: true, minLength: [minValidation, 'Need atleast 5 letters to be entered']
}
},
startTime: { name: 'StartTime', validation: { required: true } },
endTime: { name: 'EndTime', validation: { required: true } }
}
};
const selectedDate = new Date(2018, 1, 15);
provide('schedule', [Day, Week, WorkWeek, Month, Agenda]);
</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><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate'
:eventSettings='eventSettings'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
let minValidation = (args) => {
return args['value'].length >= 5;
};
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
eventSettings: {
dataSource: scheduleData,
fields: {
id: 'Id',
subject: { name: 'Subject', validation: { required: true } },
location: { name: 'Location', validation: { required: true } },
description: {
name: 'Description', validation: {
required: true, minLength: [minValidation, 'Need atleast 5 letters to be entered']
}
},
startTime: { name: 'StartTime', validation: { required: true } },
endTime: { name: 'EndTime', validation: { required: true } }
}
},
selectedDate: new Date(2018, 1, 15),
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month, Agenda]
}
}
</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>Validation rules are detailed in the form validation documentation.
Add additional fields to the default editor
The additional fields can be added to the default event editor by making use of the popupOpen event which gets triggered before the event editor opens on the Scheduler. The popupOpen is a client-side event that triggers before any of the generic popups opens on the Scheduler. The additional field (any of the form elements) should be added with a common class name e-field, so as to handle and process those additional data along with the default event object. In the following example, an additional field Event Type has been added to the default event editor and its value is processed accordingly.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { createElement } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: eventData
};
const selectedDate = new Date(2018, 1, 15);
const onPopupOpen = function (args) {
if (args.type === 'Editor') {
// Create required custom elements in initial time
if (!args.element.querySelector('.custom-field-row')) {
let row = createElement('div', { className: 'custom-field-row' });
let formElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
let container = createElement('div', { className: 'custom-field-container' });
let inputEle = createElement('input', {
className: 'e-field', attrs: { name: 'EventType' }
});
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList = new DropDownList({
dataSource: [
{ text: 'Public Event', value: 'public-event' },
{ text: 'Maintenance', value: 'maintenance' },
{ text: 'Commercial Event', value: 'commercial-event' },
{ text: 'Family Event', value: 'family-event' }
],
fields: { text: 'text', value: 'value' },
value: args.data.EventType,
floatLabelType: 'Always', placeholder: 'Event Type'
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'EventType');
}
}
}
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";
.custom-field-row {
padding-bottom: 14px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { createElement } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: eventData
},
selectedDate: new Date(2018, 1, 15),
}
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
// Create required custom elements in initial time
if (!args.element.querySelector('.custom-field-row')) {
let row = createElement('div', { className: 'custom-field-row' });
let formElement = args.element.querySelector('.e-schedule-form');
formElement.firstChild.insertBefore(row, args.element.querySelector('.e-title-location-row'));
let container = createElement('div', { className: 'custom-field-container' });
let inputEle = createElement('input', {
className: 'e-field', attrs: { name: 'EventType' }
});
container.appendChild(inputEle);
row.appendChild(container);
let dropDownList = new DropDownList({
dataSource: [
{ text: 'Public Event', value: 'public-event' },
{ text: 'Maintenance', value: 'maintenance' },
{ text: 'Commercial Event', value: 'commercial-event' },
{ text: 'Family Event', value: 'family-event' }
],
fields: { text: 'text', value: 'value' },
value: args.data.EventType,
floatLabelType: 'Always', placeholder: 'Event Type'
});
dropDownList.appendTo(inputEle);
inputEle.setAttribute('name', 'EventType');
}
}
}
},
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";
.custom-field-row {
padding-bottom: 14px;
}
</style>Customizing the default time duration in editor window
The default time interval for start and end times in the editor is determined by the interval value within the timeScale property. By default, interval value is set to 30, and therefore the start/end time duration within the event editor will be in a 30 minutes time difference. You can change this duration value by changing the duration option within the popupOpen event as shown in the following code example.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const onPopupOpen = function (args) {
if (args.type === 'Editor') {
args.duration = 60;
}
};
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";
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
}
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
args.duration = 60;
}
}
},
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";
</style>How to Prevent the Display of Editor and Quick Popups
To prevent the editor or quick popups from opening, assign true to the cancel option in the popupOpen event.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const onPopupOpen = function (args) {
args.cancel = true;
}
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";
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
}
},
methods: {
onPopupOpen: function (args) {
args.cancel = true;
}
},
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";
</style>When preventing only specific popups, conditional checks can be performed based on popup type. Supported popup types within the popupOpen event include.
| Type | Description |
|---|---|
| Editor | For Detailed editor window. |
| QuickInfo | For Quick popup which opens on cell click. |
| EditEventInfo | For Quick popup which opens on event click. |
| ViewEventInfo | For Quick popup which opens on responsive mode. |
| EventContainer | For more event indicator popup. |
| RecurrenceAlert | For edit recurrence event alert popup. |
| DeleteAlert | For delete confirmation popup. |
| ValidationAlert | For validation alert popup. |
| RecurrenceValidationAlert | For recurrence validation alert popup. |
Customizing Timezone Collection in the Editor Window
By default, the timezone collections in the editor window have been loaded with built-in timezone collections. Now we can be able to customize the timezone collections using the timezoneDataSource property with the collection of TimezoneFields data.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :selectedDate='selectedDate' :views='views' :eventSettings='eventSettings'
:timezoneDataSource='timezoneDataSource'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
let data = [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2020, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false
}, {
Id: 2,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2020, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 0),
IsAllDay: false
}];
const height = '550px';
const views = ['Day', 'Week', 'Month', 'Agenda'];
const eventSettings = { dataSource: data };
const timezoneDataSource = [
{ Value: 'Pacific/Niue', Text: 'Niue' },
{ Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
{ Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
{ Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
{ Value: 'Pacific/Tahiti', Text: 'Tahiti' },
];
const selectedDate = new Date(2020, 1, 15);
provide('schedule', [Day, Week, Month, Agenda]);
</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><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :selectedDate='selectedDate' :views='views' :eventSettings='eventSettings'
:timezoneDataSource='timezoneDataSource'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, Month, Agenda } from '@syncfusion/ej2-vue-schedule';
let data = [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2020, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 15, 12, 30),
IsAllDay: false
}, {
Id: 2,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2020, 1, 16, 12, 0),
EndTime: new Date(2018, 1, 16, 13, 0),
IsAllDay: false
}];
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
views: ['Day', 'Week', 'Month', 'Agenda'],
eventSettings: { dataSource: data },
timezoneDataSource: [
{ Value: 'Pacific/Niue', Text: 'Niue' },
{ Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
{ Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
{ Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
{ Value: 'Pacific/Tahiti', Text: 'Tahiti' },
],
selectedDate: new Date(2020, 1, 15),
}
},
provide: {
schedule: [Day, Week, Month, Agenda]
}
}
</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 Event Editor using Template
The event editor window can be customized by making use of the editorTemplate option. Here, the custom window design is built with the required fields using the script template and its type should be of text/x-template.
Each field defined within template should contain the e-field class, so as to allow the processing of those field values internally. The ID of this customized script template section is assigned to the editorTemplate option, so that these customized fields will be replaced onto the default editor window.
Note: e-field class only applicable for DropDownList, DateTimePicker, MultiSelect, DatePicker, CheckBox and TextBox components. Since we have processed the field values internally for the above mentioned components.
As we are using our Syncfusion® sub-components within our editor using template in the following example, the custom defined form elements needs to be configured as required Syncfusion® components such as DropDownList and DateTimePicker within the popupOpen event. This particular step can be skipped, if the user needs to simply use the usual form elements.
Check out this video for further information on how to customise an editor window using a template in the Vue Scheduler:
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'">
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4"><ejs-dropdownlist id='EventType' name="EventType" class="e-field" placeholder= 'Choose status' :dataSource='statusData' >
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4"><ejs-datetimepicker id="StartTime" class="e-field" name="StartTime"></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4"><ejs-datetimepicker id="EndTime" class="e-field" name="EndTime" ></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownListComponent as EjsDropdownlist } from '@syncfusion/ej2-vue-dropdowns';
import { DateTimePickerComponent as EjsDatetimepicker } from '@syncfusion/ej2-vue-calendars';
import { eventData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: eventData
};
const selectedDate = new Date(2018, 1, 15);
const showQuickInfo = false;
const statusData = ['New', 'Requested', 'Confirmed'];
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'">
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4"><ejs-dropdownlist id='EventType' name="EventType" class="e-field" placeholder= 'Choose status' :dataSource='statusData' >
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4"><ejs-datetimepicker id="StartTime" class="e-field" name="StartTime"></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4"><ejs-datetimepicker id="EndTime" class="e-field" name="EndTime" ></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-vue-dropdowns';
import { eventData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent,
"ejs-datetimepicker": DateTimePickerComponent,
"ejs-dropdownlist": DropDownListComponent,
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: eventData
},
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false,
statusData: ['New', 'Requested', 'Confirmed']
};
},
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>How to Customize Header and Footer using Template
The editor window’s header and footer can be enhanced with custom designs using the editorHeaderTemplate and editorFooterTemplate options. To achieve this, create a script template that includes the necessary fields. Ensure that the template type is set to text/x-template.
In this demo, we tailor the editor’s header according to the appointment’s subject field using the editorHeaderTemplate. Furthermore, we make use of the editorFooterTemplate to handle the functionality of validating specific fields before proceeding with the save action or canceling it if validation requirements are not met.
<template>
<div id="app">
<div id="container">
<ejs-schedule :height="height" :width="width" ref='schedule_instance' :eventSettings="eventSettings"
:editorHeaderTemplate="'editorHeaderTemplate'" :editorFooterTemplate="'editorFooterTemplate'"
:popupOpen="onPopupOpen">
<template v-slot:editorHeaderTemplate="{ data }">
<div class="event-header"></div>
</template>
<template v-slot:editorFooterTemplate="{ data }">
<div id="event-footer">
<div id="verify">
<input type="checkbox" id="check-box" value="unchecked" />
<label htmlFor="check-box" id="text">Verified</label>
</div>
<div id="right-button">
<button id="Save" className="e-control e-btn e-primary" disabled data-ripple="true"> Save</button>
<button id="Cancel" className="e-control e-btn e-primary" data-ripple="true"> Cancel </button>
</div>
</div>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from "@syncfusion/ej2-vue-schedule";
const schedule_instance = ref(null);
const today = new Date();
var data = [
{
Id: 1,
Subject: "Surgery - Andrew",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
IsAllDay: false
},
{
Id: 2,
Subject: "Consulting - John",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
IsAllDay: false
},
{
Id: 3,
Subject: "Therapy - Robert",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
IsAllDay: false
},
{
Id: 4,
Subject: "Observation - Steven",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
IsAllDay: false
},
];
const height = "550px";
const width = "100%";
const eventSettings = { dataSource: data };
const onPopupOpen = function (args) {
if (args.type === "Editor") {
let scheduleObj = schedule_instance.value.ej2Instances
const saveButton = args.element.querySelector("#Save");
const cancelButton = args.element.querySelector("#Cancel");
const checkBox = args.element.querySelector("#check-box");
checkBox.onchange = () => {
if (!checkBox.checked) {
saveButton.setAttribute("disabled", "");
} else {
saveButton.removeAttribute("disabled");
}
};
saveButton.onclick = () => {
const data = {
Id: args.data.Id,
Subject: args.element.querySelector("#Subject").value,
StartTime: args.element.querySelector("#StartTime").ej2_instances[0].value,
EndTime: args.element.querySelector("#EndTime").ej2_instances[0].value,
IsAllDay: args.element.querySelector("#IsAllDay").checked,
};
if (args.target?.classList.contains("e-appointment")) {
scheduleObj.saveEvent(data, "Save");
} else {
data.Id = scheduleObj.getEventMaxID();
scheduleObj.addEvent(data);
}
scheduleObj.closeEditor();
};
cancelButton.onclick = () => {
scheduleObj.closeEditor();
};
}
};
const getName = function (value) {
return value.Subject ? value.Subject : 'Create New Event';
}
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";
#verify {
position: fixed;
padding: 0 20px;
}
#text {
cursor: pointer;
display: inline-block;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 14px;
user-select: none;
margin-left: 8px;
vertical-align: middle;
white-space: normal;
}
#right-button {
padding: 0 10px;
}
</style><template>
<div id="app">
<div id="container">
<ejs-schedule :height="height" :width="width" ref='schedule_instance' :eventSettings="eventSettings"
:editorHeaderTemplate="'editorHeaderTemplate'" :editorFooterTemplate="'editorFooterTemplate'"
:popupOpen="onPopupOpen">
<template v-slot:editorHeaderTemplate="{ data }">
<div class="event-header"></div>
</template>
<template v-slot:editorFooterTemplate="{ data }">
<div id="event-footer">
<div id="verify">
<input type="checkbox" id="check-box" value="unchecked" />
<label htmlFor="check-box" id="text">Verified</label>
</div>
<div id="right-button">
<button id="Save" className="e-control e-btn e-primary" disabled data-ripple="true"> Save</button>
<button id="Cancel" className="e-control e-btn e-primary" data-ripple="true"> Cancel </button>
</div>
</div>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from "@syncfusion/ej2-vue-schedule";
const today = new Date();
var data = [
{
Id: 1,
Subject: "Surgery - Andrew",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 9, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
IsAllDay: false
},
{
Id: 2,
Subject: "Consulting - John",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 10, 0),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
IsAllDay: false
},
{
Id: 3,
Subject: "Therapy - Robert",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
IsAllDay: false
},
{
Id: 4,
Subject: "Observation - Steven",
StartTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12, 30),
EndTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
IsAllDay: false
},
];
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: "550px",
width: "100%",
eventSettings: { dataSource: data }
};
},
methods: {
onPopupOpen: function (args) {
if (args.type === "Editor") {
let scheduleObj = this.$refs.schedule_instance.ej2Instances
const saveButton = args.element.querySelector("#Save");
const cancelButton = args.element.querySelector("#Cancel");
const checkBox = args.element.querySelector("#check-box");
checkBox.onchange = () => {
if (!checkBox.checked) {
saveButton.setAttribute("disabled", "");
} else {
saveButton.removeAttribute("disabled");
}
};
saveButton.onclick = () => {
const data = {
Id: args.data.Id,
Subject: args.element.querySelector("#Subject").value,
StartTime: args.element.querySelector("#StartTime").ej2_instances[0].value,
EndTime: args.element.querySelector("#EndTime").ej2_instances[0].value,
IsAllDay: args.element.querySelector("#IsAllDay").checked,
};
if (args.target?.classList.contains("e-appointment")) {
scheduleObj.saveEvent(data, "Save");
} else {
data.Id = scheduleObj.getEventMaxID();
scheduleObj.addEvent(data);
}
scheduleObj.closeEditor();
};
cancelButton.onclick = () => {
scheduleObj.closeEditor();
};
}
},
getName: function (value) {
return value.Subject ? value.Subject : 'Create New Event';
}
},
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";
#verify {
position: fixed;
padding: 0 20px;
}
#text {
cursor: pointer;
display: inline-block;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 14px;
user-select: none;
margin-left: 8px;
vertical-align: middle;
white-space: normal;
}
#right-button {
padding: 0 10px;
}
</style>How to add resource options within editor template
Resource selection can be added to the editor template using a multiselect control when assigning multiple resources to an appointment.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :group='group'>
<e-resources>
<e-resource field='OwnerId' title='Owner' name='Owners' :dataSource='ownerDataSource' textField='text'
idField='id' colorField='color'>
</e-resource>
</e-resources>
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<ejs-datetimepicker id="StartTime" class="e-field" name="StartTime"></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<ejs-datetimepicker id="EndTime" class="e-field" name="EndTime" ></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Owner</td>
<td colspan="4">
<ejs-multiselect id='OwnerId' name="OwnerId" class="e-field" placeholder= 'Choose owner' :dataSource='ownerDataSource' :fields='fields'></ejs-multiselect>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, ResourcesDirective as EResources, ResourceDirective as EResource, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { MultiSelectComponent as EjsMultiselect } from '@syncfusion/ej2-vue-dropdowns';
import { DateTimePickerComponent as EjsDatetimepicker } from '@syncfusion/ej2-vue-calendars';
import { eventData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: eventData
};
const selectedDate = new Date(2018, 1, 15);
const group = { resources: ['Owners'] };
const ownerDataSource = [
{ text: 'Nancy', id: 1, color: '#1aaa55' },
{ text: 'Smith', id: 2, color: '#7fa900' },
{ text: 'Paul', id: 3, color: '#357cd2' }
];
const fields = { text: 'text', value: 'id' };
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :group='group'>
<e-resources>
<e-resource field='OwnerId' title='Owner' name='Owners' :dataSource='ownerDataSource' textField='text'
idField='id' colorField='color'>
</e-resource>
</e-resources>
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<ejs-datetimepicker id="StartTime" class="e-field" name="StartTime"></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<ejs-datetimepicker id="EndTime" class="e-field" name="EndTime" ></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Owner</td>
<td colspan="4">
<ejs-multiselect id='OwnerId' name="OwnerId" class="e-field" placeholder= 'Choose owner' :dataSource='ownerDataSource' :fields='fields'></ejs-multiselect>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, ResourcesDirective, ResourceDirective, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { MultiSelectComponent } from '@syncfusion/ej2-vue-dropdowns';
import { eventData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent,
"e-resources": ResourcesDirective,
"e-resource": ResourceDirective,
"ejs-datetimepicker": DateTimePickerComponent,
"ejs-multiselect" : MultiSelectComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: eventData
},
selectedDate: new Date(2018, 1, 15),
group: { resources: ['Owners'] },
ownerDataSource: [
{ text: 'Nancy', id: 1, color: '#1aaa55' },
{ text: 'Smith', id: 2, color: '#7fa900' },
{ text: 'Paul', id: 3, color: '#357cd2' }
],
fields: { text: 'text', value: 'id' },
};
},
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>How to add recurrence options within editor template
Recurrence options can be added to the editor template by including RecurrenceEditor.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule ref='scheduleObj' :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :popupOpen='onPopupOpen'>
<template v-slot:editorTemplate="{ data }">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<ejs-datetimepicker id="StartTime" class="e-field" name="StartTime"></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<ejs-datetimepicker id="EndTime" class="e-field" name="EndTime" ></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Repeat</td>
<td colspan="4">
<ejs-recurrenceeditor ref="recurrenceObj" id="RecurrenceEditor" :value="data.RecurrenceRule"></ejs-recurrenceeditor>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { ScheduleComponent as EjsSchedule, RecurrenceEditorComponent as EjsRecurrenceeditor, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month, RecurrenceEditor } from '@syncfusion/ej2-vue-schedule';
import { DateTimePickerComponent as EjsDatetimepicker } from "@syncfusion/ej2-vue-calendars";
import { eventData } from './datasource.js';
const scheduleObj = ref(null);
const recurrenceObj = ref(null);
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: eventData
};
const selectedDate = new Date(2018, 1, 15);
const onPopupOpen = function (args) {
if (args.type === 'Editor') {
let schedule = scheduleObj.value.ej2Instances;
let recurrObject = recurrenceObj.value.ej2Instances;
schedule.eventWindow.recurrenceEditor = recurrObject;
document.getElementById('RecurrenceEditor').style.display = (schedule.currentAction == 'EditOccurrence') ? 'none' : 'block';
}
}
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
}
.custom-event-editor td {
padding: 7px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule ref='scheduleObj' :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :popupOpen='onPopupOpen'>
<template v-slot:editorTemplate="{ data }">
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4">
<input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4">
<ejs-datetimepicker id="StartTime" class="e-field" name="StartTime"></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4">
<ejs-datetimepicker id="EndTime" class="e-field" name="EndTime" ></ejs-datetimepicker>
</td>
</tr>
<tr>
<td class="e-textlabel">Repeat</td>
<td colspan="4">
<ejs-recurrenceeditor ref="recurrenceObj" id="RecurrenceEditor" :value="data.RecurrenceRule"></ejs-recurrenceeditor>
</td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month, RecurrenceEditorComponent } from '@syncfusion/ej2-vue-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-vue-calendars';
import { eventData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent,
"ejs-datetimepicker": DateTimePickerComponent,
"ejs-recurrenceeditor": RecurrenceEditorComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: eventData
},
selectedDate: new Date(2018, 1, 15)
};
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
let scheduleObj = this.$refs.scheduleObj.ej2Instances;
let recurrenceObj = this.$refs.recurrenceObj.ej2Instances;
scheduleObj.eventWindow.recurrenceEditor = recurrenceObj;
document.getElementById('RecurrenceEditor').style.display = (scheduleObj.currentAction == 'EditOccurrence') ? 'none' : 'block';
}
}
},
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
}
.custom-event-editor td {
padding: 7px;
}
</style>Apply Validations on Editor Template Fields
In the following code example, validation has been added to the status field.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :popupOpen='onPopupOpen'>
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4"><input id="Subject" class="e-field e-input" type="text" value="" name="Subject"
style="width: 100%" /></td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4"><input type="text" id="EventType" name="EventType" class="e-field"
style="width: 100%" /></td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4"><input id="StartTime" class="e-field" type="text" name="StartTime" /></td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4"><input id="EndTime" class="e-field" type="text" name="EndTime" /></td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: eventData
};
const selectedDate = new Date(2018, 1, 15);
const showQuickInfo = false;
const onPopupOpen = function (args) {
if (args.type === 'Editor') {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
document.getElementById("EventType_Error").style.left = "351px";
}
let formElement = args.element.querySelector('.e-schedule-form');
let statusElement = args.element.querySelector('#EventType');
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject = new DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed'],
select: function (args) {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
}
}
});
dropDownListObject.appendTo(statusElement);
}
let validator = formElement.ej2_instances[0];
validator.addRules('EventType', { required: true });
let startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
}
}
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :popupOpen='onPopupOpen'>
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4"><input id="Subject" class="e-field e-input" type="text" value="" name="Subject"
style="width: 100%" /></td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4"><input type="text" id="EventType" name="EventType" class="e-field"
style="width: 100%" /></td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4"><input id="StartTime" class="e-field" type="text" name="StartTime" /></td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4"><input id="EndTime" class="e-field" type="text" name="EndTime" /></td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4">
<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea>
</td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { FormValidator } from '@syncfusion/ej2-inputs';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: eventData
},
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false
};
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
document.getElementById("EventType_Error").style.left = "351px";
}
let formElement = args.element.querySelector('.e-schedule-form');
let statusElement = args.element.querySelector('#EventType');
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject = new DropDownList({
placeholder: 'Choose status', value: statusElement.value,
dataSource: ['New', 'Requested', 'Confirmed'],
select: function (args) {
if (!isNullOrUndefined(document.getElementById("EventType_Error"))) {
document.getElementById("EventType_Error").style.display = "none";
}
}
});
dropDownListObject.appendTo(statusElement);
}
let validator = formElement.ej2_instances[0];
validator.addRules('EventType', { required: true });
let startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(startElement.value) || new Date() }, startElement);
}
let endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker({ value: new Date(endElement.value) || new Date() }, endElement);
}
}
}
},
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>How to save the customized event editor using template
When the e-field class is not applied to all fields in a template, the corresponding values must be manually assigned using the popupClose event.
Note: You can allow to retrieve the data only on the save and delete option. Data cannot be retrieved on the close and cancel options in the editor window.
The following code example shows how to save the customized event editor using a template by the popupClose event.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :popupOpen='onPopupOpen'
:popupClose='onPopupClose'>
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4"><input id="Subject" class="e-input" type="text" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4"><input type="text" id="EventType" name="EventType" style="width: 100%" /></td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4"><input id="StartTime" type="text" name="StartTime" /></td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4"><input id="EndTime" type="text" name="EndTime" /></td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4"><textarea id="Description" class="e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea></td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { eventData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: eventData
};
const selectedDate = new Date(2018, 1, 15);
const showQuickInfo = false;
const onPopupOpen = function (args) {
if (args.type === 'Editor') {
let subjectElement = args.element.querySelector('#Subject');
if (subjectElement) {
subjectElement.value = args.data.Subject || "";
}
let statusElement = args.element.querySelector('#EventType');
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject = new DropDownList({
placeholder: 'Choose status',
value: args.data.EventType,
dataSource: ['New', 'Requested', 'Confirmed']
});
dropDownListObject.appendTo(statusElement);
statusElement.setAttribute('name', 'EventType');
}
let startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker(
{ value: new Date(args.data.StartTime) || new Date() },
startElement
);
}
let endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker(
{ value: new Date(args.data.EndTime) || new Date() },
endElement
);
}
let descriptionElement = args.element.querySelector('#Description');
if (descriptionElement) {
descriptionElement.value = args.data.Description || "";
}
}
}
const onPopupClose = function (args) {
if (args.type === 'Editor' && !isNullOrUndefined(args.data)) {
let subjectElement = args.element.querySelector('#Subject');
if (subjectElement) {
args.data.Subject = subjectElement.value;
}
let statusElement = args.element.querySelector('#EventType');
if (statusElement) {
args.data.EventType = statusElement.value;
}
let startElement = args.element.querySelector('#StartTime');
if (startElement) {
args.data.StartTime = startElement.value;
}
let endElement = args.element.querySelector('#EndTime');
if (endElement) {
args.data.EndTime = endElement.value;
}
let descriptionElement = args.element.querySelector('#Description');
if (descriptionElement) {
args.data.Description = descriptionElement.value;
}
}
}
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :editorTemplate="'editorTemplate'" :popupOpen='onPopupOpen'
:popupClose='onPopupClose'>
<template v-slot:editorTemplate>
<table class="custom-event-editor" width="100%" cellpadding="5">
<tbody>
<tr>
<td class="e-textlabel">Summary</td>
<td colspan="4"><input id="Subject" class="e-input" type="text" name="Subject" style="width: 100%" />
</td>
</tr>
<tr>
<td class="e-textlabel">Status</td>
<td colspan="4"><input type="text" id="EventType" name="EventType" style="width: 100%" /></td>
</tr>
<tr>
<td class="e-textlabel">From</td>
<td colspan="4"><input id="StartTime" type="text" name="StartTime" /></td>
</tr>
<tr>
<td class="e-textlabel">To</td>
<td colspan="4"><input id="EndTime" type="text" name="EndTime" /></td>
</tr>
<tr>
<td class="e-textlabel">Reason</td>
<td colspan="4"><textarea id="Description" class="e-input" name="Description" rows="3" cols="50"
style="width: 100%; height: 60px !important; resize: vertical"></textarea></td>
</tr>
</tbody>
</table>
</template>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { DateTimePicker } from '@syncfusion/ej2-calendars';
import { eventData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: eventData
},
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false
};
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'Editor') {
let subjectElement = args.element.querySelector('#Subject');
if (subjectElement) {
subjectElement.value = args.data.Subject || "";
}
let statusElement = args.element.querySelector('#EventType');
if (!statusElement.classList.contains('e-dropdownlist')) {
let dropDownListObject = new DropDownList({
placeholder: 'Choose status',
value: args.data.EventType,
dataSource: ['New', 'Requested', 'Confirmed']
});
dropDownListObject.appendTo(statusElement);
statusElement.setAttribute('name', 'EventType');
}
let startElement = args.element.querySelector('#StartTime');
if (!startElement.classList.contains('e-datetimepicker')) {
new DateTimePicker(
{ value: new Date(args.data.StartTime) || new Date() },
startElement
);
}
let endElement = args.element.querySelector('#EndTime');
if (!endElement.classList.contains('e-datetimepicker')) {
new DateTimePicker(
{ value: new Date(args.data.EndTime) || new Date() },
endElement
);
}
let descriptionElement = args.element.querySelector('#Description');
if (descriptionElement) {
descriptionElement.value = args.data.Description || "";
}
}
},
onPopupClose: function (args) {
if (args.type === 'Editor' && !isNullOrUndefined(args.data)) {
let subjectElement = args.element.querySelector('#Subject');
if (subjectElement) {
args.data.Subject = subjectElement.value;
}
let statusElement = args.element.querySelector('#EventType');
if (statusElement) {
args.data.EventType = statusElement.value;
}
let startElement = args.element.querySelector('#StartTime');
if (startElement) {
args.data.StartTime = startElement.value;
}
let endElement = args.element.querySelector('#EndTime');
if (endElement) {
args.data.EndTime = endElement.value;
}
let descriptionElement = args.element.querySelector('#Description');
if (descriptionElement) {
args.data.Description = descriptionElement.value;
}
}
}
},
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";
.custom-event-editor .e-textlabel {
padding-right: 15px;
text-align: right;
}
.custom-event-editor td {
padding: 7px;
padding-right: 16px;
}
</style>In case, if you need to prevent only specific popups on Scheduler, then you can check the condition based on the popup type. The types of the popup that can be checked within the popupClose event are as follows.
| Type | Description |
|---|---|
| Editor | For Detailed editor window. |
| QuickInfo | For Quick popup which opens on cell click. |
| EditEventInfo | For Quick popup which opens on event click. |
| ViewEventInfo | For Quick popup which opens on responsive mode. |
| EventContainer | For more event indicator popup. |
| RecurrenceAlert | For edit recurrence event alert popup. |
| DeleteAlert | For delete confirmation popup. |
| ValidationAlert | For validation alert popup. |
| RecurrenceValidationAlert | For recurrence validation alert popup. |
Quick Popups
The quick info popups are the ones that gets opened, when a cell or appointment is single clicked on the desktop mode. On single clicking a cell, you can simply provide a subject and save it. Also, while single clicking on an event, a popup will be displayed where you can get the overview of the event information. You can also edit or delete those events through the options available in it.
By default, these popups are displayed over cells and appointments of Scheduler and to disable this action, set false to showQuickInfo property.
The quick popup that opens while single clicking on the cells are not applicable on mobile devices.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :showQuickInfo='showQuickInfo'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, Month, TimelineViews, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const showQuickInfo = false;
provide('schedule', [TimelineViews, Day, Week, Month, Agenda]);
</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><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :showQuickInfo='showQuickInfo'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, Month, TimelineViews, Agenda } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'],
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
showQuickInfo: false,
}
},
provide: {
schedule: [TimelineViews, Day, Week, Month, Agenda]
}
}
</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>How to Open QuickInfo Popup on Multiple Cell Selection
Quick popups open by default on single cell click. To open the quick popup after selecting multiple cells, press the Enter key. To open it immediately after selection, set the quickInfoOnSelectionEnd property to true.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views'
:quickInfoOnSelectionEnd='quickInfoOnSelectionEnd'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, Month, TimelineViews, Agenda } from '@syncfusion/ej2-vue-schedule';
const height = '550px';
const width = '100%';
const views = ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'];
const quickInfoOnSelectionEnd = true;
provide('schedule', [TimelineViews, Day, Week, Month, Agenda]);
</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><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views'
:quickInfoOnSelectionEnd='quickInfoOnSelectionEnd'></ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, Month, TimelineViews, Agenda } from '@syncfusion/ej2-vue-schedule';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['TimelineDay', 'Day', 'Week', 'Month', 'Agenda'],
quickInfoOnSelectionEnd: true,
}
},
provide: {
schedule: [TimelineViews, Day, Week, Month, Agenda]
}
}
</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>How to Change the Watermark Text of Quick Popup Subject
By default, Add Title text is displayed on the subject field of quick popup. To change the default watermark text, change the value of the appropriate localized word collection used in the Scheduler.
L10n.load({
'en-US': {
'schedule': {
'addTitle' : 'New Title'
}
}
});Customizing quick popups
The look and feel of the built-in quick popup window, which opens when single clicked on the cells or appointments can be customized by making use of the quickInfoTemplates property of the Scheduler. There are 3 sub-options available to customize them easily,
- header - Accepts the template design that customizes the header part of the quick popup.
- content - Accepts the template design that customizes the content part of the quick popup.
- footer - Accepts the template design that customizes the footer part of the quick popup.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :quickInfoTemplates='quickInfoTemplates'>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide, createApp } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const headerTemplateVue = createApp().component('headerTemplate', {
template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-header">
<div class="e-header-icon-wrapper"><button class="e-close" title="Close"></button></div></div></div>
<div v-else><div class="e-event-header"><div class="e-header-icon-wrapper"><button class="e-close" title="CLOSE"></button></div></div></div></div>`,
data() {
return {
data: {}
};
}
});
const contentTemplateVue = createApp().component('contentTemplate', {
template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-content e-template">
<form class="e-schedule-form"><div><input class="subject e-field" type="text" name="Subject" placeholder="Title"></div><div><input class="location e-field" type="text" name="Location" placeholder="Location"></div></form></div></div><div v-else><div class="e-event-content e-template">
<div class="e-subject-wrap"><div><div v-if="data.Subject !== undefined"><div class="subject"></div></div></div><div><div v-if="data.Location !== undefined"><div class="location"></div></div></div><div><div v-if="data.Description !== undefined"><div class="description"></div></div></div></div></div></div></div>`,
data() {
return {
data: {}
};
}
});
const footerTemplateVue = createApp().component('footerTemplate', {
template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-footer">
<button class="e-event-details" title="Extra Details">Extra Details</button>
<button class="e-event-create" title="Add">Add</button></div></div>
<div v-else><div class="e-event-footer"><button class="e-event-edit" title="Edit">Edit</button>
<button class="e-event-delete" title="Delete">Delete</button></div></div></div>`,
data() {
return {
data: {}
};
}
});
const height = '550px';
const width = '100%';
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const views = ['Day', 'Week', 'WorkWeek'];
const quickInfoTemplates = {
header: function () {
return {
template: headerTemplateVue
};
},
content: function () {
return {
template: contentTemplateVue
};
},
footer: function () {
return {
template: footerTemplateVue
};
}
}
provide('schedule', [Day, 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";
.e-textlabel {
font-weight: bold;
padding-right: 5px;
}
.custom-event-editor td {
padding: 5px;
}
.e-quick-popup-wrapper .e-cell-content {
padding: 0 10px 10px 10px;
}
.e-quick-popup-wrapper .e-cell-content div {
padding-bottom: 10px;
}
.e-quick-popup-wrapper .e-cell-content .e-field {
border-left-width: 0;
border-top-width: 0;
border-right-width: 0;
height: 25px;
width: 100%;
}
.e-quick-popup-wrapper .e-event-content {
display: flex;
}
.e-quick-popup-wrapper .e-event-header {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-cell-footer .e-event-create,
.e-quick-popup-wrapper .e-event-footer .e-event-edit {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-event-content .subject {
padding-top: 10px;
padding-left: 10px;
font-weight: 500;
font-size: 14px;
}
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :quickInfoTemplates='quickInfoTemplates'>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { createApp } from "vue";
import { ScheduleComponent, Day, Week, WorkWeek } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const headerTemplateVue = createApp().component('headerTemplate', {
template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-header">
<div class="e-header-icon-wrapper"><button class="e-close" title="Close"></button></div></div></div>
<div v-else><div class="e-event-header"><div class="e-header-icon-wrapper"><button class="e-close" title="CLOSE"></button></div></div></div></div>`,
data() {
return {
data: {}
};
}
});
const contentTemplateVue = createApp().component('contentTemplate', {
template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-content e-template">
<form class="e-schedule-form"><div><input class="subject e-field" type="text" name="Subject" placeholder="Title"></div><div><input class="location e-field" type="text" name="Location" placeholder="Location"></div></form></div></div><div v-else><div class="e-event-content e-template">
<div class="e-subject-wrap"><div><div v-if="data.Subject !== undefined"><div class="subject"></div></div></div><div><div v-if="data.Location !== undefined"><div class="location"></div></div></div><div><div v-if="data.Description !== undefined"><div class="description"></div></div></div></div></div></div></div>`,
data() {
return {
data: {}
};
}
});
const footerTemplateVue = createApp().component('footerTemplate', {
template: `<div><div v-if= "data.elementType === 'cell' "><div class="e-cell-footer">
<button class="e-event-details" title="Extra Details">Extra Details</button>
<button class="e-event-create" title="Add">Add</button></div></div>
<div v-else><div class="e-event-footer"><button class="e-event-edit" title="Edit">Edit</button>
<button class="e-event-delete" title="Delete">Delete</button></div></div></div>`,
data() {
return {
data: {}
};
}
});
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
views: ['Day', 'Week', 'WorkWeek'],
quickInfoTemplates: {
header: function () {
return {
template: headerTemplateVue
};
},
content: function () {
return {
template: contentTemplateVue
};
},
footer: function () {
return {
template: footerTemplateVue
};
}
}
};
},
provide: {
schedule: [Day, 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";
.e-textlabel {
font-weight: bold;
padding-right: 5px;
}
.custom-event-editor td {
padding: 5px;
}
.e-quick-popup-wrapper .e-cell-content {
padding: 0 10px 10px 10px;
}
.e-quick-popup-wrapper .e-cell-content div {
padding-bottom: 10px;
}
.e-quick-popup-wrapper .e-cell-content .e-field {
border-left-width: 0;
border-top-width: 0;
border-right-width: 0;
height: 25px;
width: 100%;
}
.e-quick-popup-wrapper .e-event-content {
display: flex;
}
.e-quick-popup-wrapper .e-event-header {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-cell-footer .e-event-create,
.e-quick-popup-wrapper .e-event-footer .e-event-edit {
position: absolute;
right: 0;
}
.e-quick-popup-wrapper .e-event-content .subject {
padding-top: 10px;
padding-left: 10px;
font-weight: 500;
font-size: 14px;
}
</style>Quick info popups in adaptive mode can also be customized using
quickInfoTemplateswith the e-device class.
More Events Indicator and Popup
When the number of appointments count that lies on a particular time range * default appointment height exceeds the default height of a cell in month view and all other timeline views, a + more text indicator will be displayed at the bottom of those cells. This indicator denotes that the cell contains few more appointments in it and clicking on that will display a popup displaying all the appointments present on that day.
To disable this option of showing popup with all hidden appointments, while clicking on the text indicator, you can do code customization within the
popupOpenevent.
The same indicator is displayed on all-day row in calendar views such as day, week and work week views alone, when the number of appointment count present in a cell exceeds three. Clicking on the text indicator here will not open a popup, but will allow the expand/collapse option for viewing the remaining appointments present in the all-day row.
The following code example shows how to disable the display of such popups while clicking on the more text indicator.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:currentView='currentView' :eventSettings='eventSettings' :popupOpen='onPopupOpen'>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const currentView = 'Month';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const onPopupOpen = function (args) {
if (args.type === 'EventContainer') {
args.cancel = true;
}
}
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";
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:currentView='currentView' :eventSettings='eventSettings' :popupOpen='onPopupOpen'>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
}
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'EventContainer') {
args.cancel = true;
}
}
},
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";
</style>How to Customize the Popup that Opens on more Indicator
The following code example shows you how to customize the default more indicator popup in which number of events rendered count on the day has been shown in the header.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { Internationalization } from '@syncfusion/ej2-base';
import { ScheduleComponent as EjsSchedule, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const views = ['Month'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const onPopupOpen = function (args) {
if (args.type === 'EventContainer') {
let instance = new Internationalization();
let date = instance.formatDate(args.data.date, { skeleton: 'MMMEd' });
args.element.querySelector('.e-header-date').innerText = date;
args.element.querySelector('.e-header-day').innerText = 'Event count: ' + args.data.event.length;
}
}
provide('schedule', [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";
/* csslint ignore:start */
.e-schedule .e-more-popup-wrapper .e-header-date {
font-size: 15px !important;
max-width: 44% !important;
}
/* csslint ignore:end */
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:eventSettings='eventSettings' :popupOpen='onPopupOpen'></ejs-schedule>
</div>
</div>
</template>
<script>
import { Internationalization } from '@syncfusion/ej2-base';
import { ScheduleComponent, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
views: ['Month'],
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
}
},
methods: {
onPopupOpen: function (args) {
if (args.type === 'EventContainer') {
let instance = new Internationalization();
let date = instance.formatDate(args.data.date, { skeleton: 'MMMEd' });
args.element.querySelector('.e-header-date').innerText = date;
args.element.querySelector('.e-header-day').innerText = 'Event count: ' + args.data.event.length;
}
}
},
provide: {
schedule: [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";
/* csslint ignore:start */
.e-schedule .e-more-popup-wrapper .e-header-date {
font-size: 15px !important;
max-width: 44% !important;
}
/* csslint ignore:end */
</style>How to prevent the display of popup when clicking on the more text indicator
It is possible to prevent the display of popup window by passing the value true to cancel option within the MoreEventsClick event.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:currentView='currentView' :eventSettings='eventSettings' :moreEventsClick='onMoreEventsClick'>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const currentView = 'Month';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const onMoreEventsClick = function (args) {
args.cancel = true;
}
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";
</style><template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:currentView='currentView' :eventSettings='eventSettings' :moreEventsClick='onMoreEventsClick'>
</ejs-schedule>
</div>
</div>
</template>
<script>
import { ScheduleComponent, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-schedule": ScheduleComponent
},
data() {
return {
height: '550px',
width: '100%',
currentView: 'Month',
views: ['Day', 'Week', 'WorkWeek', 'Month'],
eventSettings: {
dataSource: scheduleData
},
selectedDate: new Date(2018, 1, 15),
}
},
methods: {
onMoreEventsClick: function (args) {
args.cancel = true;
}
},
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";
</style>How to navigate Day view when clicking on more text indicator
The following code example shows you how to customize the moreEventsClick property to navigate to the Day view when clicking on the more text indicator.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :views='views' :selectedDate='selectedDate'
:currentView='currentView' :eventSettings='eventSettings' :moreEventsClick='onMoreEventsClick'>
</ejs-schedule>
</div>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ScheduleComponent as EjsSchedule, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
const height = '550px';
const width = '100%';
const currentView = 'Month';
const views = ['Day', 'Week', 'WorkWeek', 'Month'];
const eventSettings = {
dataSource: scheduleData
};
const selectedDate = new Date(2018, 1, 15);
const onMoreEventsClick = function (args) {
args.isPopupOpen = false;
}
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";
</style>How to Close the Editor Window Manually
The editor window can be manually closed using the closeEditor method.
<template>
<div>
<div id='app'>
<div id='container'>
<tr>
<td>
<div>
<ejs-button v-on:click='closeEditor'>Close Editor Window</ejs-button>
</div>
</td>
</tr>
<br><br>
<ejs-schedule ref='scheduleObj' width='100%' height='500px' :eventSettings='eventSettings'
:selectedDate='selectedDate'>
<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>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { extend } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
const scheduleObj = ref(null);
const eventSettings = { dataSource: extend([], scheduleData, null, true) };
const selectedDate = new Date(2018, 1, 15);
provide('schedule', [Day, Week, WorkWeek, Month]);
const closeEditor = function () {
scheduleObj.value.ej2Instances.closeEditor();
}
</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><template>
<div>
<div id='app'>
<div id='container'>
<tr>
<td>
<div>
<ejs-button v-on:click='closeEditor'>Close Editor Window</ejs-button>
</div>
</td>
</tr>
<br><br>
<ejs-schedule ref='scheduleObj' width='100%' height='500px' :eventSettings='eventSettings'
:selectedDate='selectedDate'>
<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>
</div>
</template>
<script>
import { extend } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"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]
},
methods: {
closeEditor: function () {
let scheduleObj = this.$refs.scheduleObj.ej2Instances;
scheduleObj.closeEditor();
},
}
}
</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>How to Open the Quick info Popup Manually
The quick info popup can be opened manually by invoking the openQuickInfoPopup public method. Passing cell data opens the cell quick info popup; passing event data opens the event quick info popup.
<template>
<div>
<div id="app">
<div id="container">
<tr>
<td>
<div>
<ejs-button v-on:click="onCellClick">Show Cell QuickInfo Popup</ejs-button>
</div>
</td>
<td>
<div>
<ejs-button v-on:click="onEventClick">Show Event QuickInfo Popup</ejs-button>
</div>
</td>
</tr>
<br /><br />
<ejs-schedule ref='scheduleObj' width="100%" height="500px" :eventSettings="eventSettings"
:selectedDate="selectedDate">
<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>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month } from "@syncfusion/ej2-vue-schedule";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
const scheduleObj = ref(null);
const eventSettings = {
dataSource: [
{
Id: 1,
Subject: "Review Meeting",
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0),
},
],
};
const selectedDate = new Date(2023, 2, 5);
provide('schedule', [Day, Week, WorkWeek, Month],);
const onEventClick = function () {
let schedule = scheduleObj.value.ej2Instances;
let eventData = {
Id: 1,
Subject: "Review Meeting",
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0),
};
schedule.openQuickInfoPopup(eventData, "Save");
}
const onCellClick = function () {
let schedule = scheduleObj.value.ej2Instances;
let cellData = {
Subject: "Review Meeting",
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0),
};
schedule.openQuickInfoPopup(cellData, "Add");
}
</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><template>
<div>
<div id="app">
<div id="container">
<tr>
<td>
<div>
<ejs-button v-on:click="onCellClick">Show Cell QuickInfo Popup</ejs-button>
</div>
</td>
<td>
<div>
<ejs-button v-on:click="onEventClick">Show Event QuickInfo Popup</ejs-button>
</div>
</td>
</tr>
<br /><br />
<ejs-schedule ref='scheduleObj' width="100%" height="500px" :eventSettings="eventSettings"
:selectedDate="selectedDate">
<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>
</div>
</template>
<script>
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month } from "@syncfusion/ej2-vue-schedule";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-schedule": ScheduleComponent,
"e-views": ViewsDirective,
"e-view": ViewDirective
},
data() {
return {
eventSettings: {
dataSource: [
{
Id: 1,
Subject: "Review Meeting",
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0),
},
],
},
selectedDate: new Date(2023, 2, 5),
};
},
provide: {
schedule: [Day, Week, WorkWeek, Month],
},
methods: {
onEventClick: function () {
let scheduleObj = this.$refs.scheduleObj.ej2Instances;
let eventData = {
Id: 1,
Subject: "Review Meeting",
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0),
};
scheduleObj.openQuickInfoPopup(eventData, "Save");
},
onCellClick: function () {
let scheduleObj = this.$refs.scheduleObj.ej2Instances;
let cellData = {
Subject: "Review Meeting",
StartTime: new Date(2023, 2, 5, 20, 0, 0),
EndTime: new Date(2023, 2, 5, 21, 0, 0),
};
scheduleObj.openQuickInfoPopup(cellData, "Add");
},
},
};
</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>How to Close the Quick info Popup Manually
You can close the quick info popup in scheduler by using the closeQuickInfoPopup public method. The following code example demonstrates the how to close quick info popup manually.
<template>
<div>
<div id='app'>
<div id='container'>
<tr>
<td>
<div>
<ejs-button v-on:click='closeQuickInfo'>Close QuickInfo Popup</ejs-button>
</div>
</td>
</tr>
<br><br>
<ejs-schedule ref='scheduleObj' width='100%' height='500px' :eventSettings='eventSettings'
:selectedDate='selectedDate'>
<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>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { extend } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent as EjsSchedule, ViewDirective as EView, ViewsDirective as EViews, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
const scheduleObj = ref(null);
const eventSettings = { dataSource: extend([], scheduleData, null, true) };
const selectedDate = new Date(2018, 1, 15);
provide('schedule', [Day, Week, WorkWeek, Month]);
const closeQuickInfo = function () {
scheduleObj.value.closeQuickInfoPopup();
}
</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><template>
<div>
<div id='app'>
<div id='container'>
<tr>
<td>
<div>
<ejs-button v-on:click='closeQuickInfo'>Close QuickInfo Popup</ejs-button>
</div>
</td>
</tr>
<br><br>
<ejs-schedule ref='scheduleObj' width='100%' height='500px' :eventSettings='eventSettings'
:selectedDate='selectedDate'>
<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>
</div>
</template>
<script>
import { extend } from '@syncfusion/ej2-base';
import { scheduleData } from './datasource.js';
import { ScheduleComponent, ViewDirective, ViewsDirective, Day, Week, WorkWeek, Month } from '@syncfusion/ej2-vue-schedule';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"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]
},
methods: {
closeQuickInfo: function () {
let scheduleObj = this.$refs.scheduleObj.ej2Instances;
scheduleObj.closeQuickInfoPopup();
},
}
}
</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>Refer to the Vue Scheduler feature tour page for a detailed overview. Explore the Vue Scheduler example sample for live interaction examples.