different editor templates for different event types

Question

I have two types of events on my scheduler. Booked events and not booked events. I want to display different editor templates for them like thisThe editor template I want along with different header and footers areThe above is for the not booked event.And this is for the not booked session.How can I accomplish the same?I am using React.js with functional componentsThis is my initial codeimport React, { useRef } from 'react';import { ScheduleComponent, Day, Week, Resize, DragAndDrop, Inject, ViewsDirective, ViewDirective, RecurrenceEditorComponent } from '@syncfusion/ej2-react-schedule';import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';import { L10n } from '@syncfusion/ej2-base';import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';import { useSelector } from 'react-redux';import { createSchedule, deleteSchedule, updateSchedule } from '../../api/index';import './ScheduleCalendar.scss';L10n.load({ 'en-US': { schedule: { saveButton: 'Save', cancelButton: 'Cancel', deleteButton: 'Remove', newEvent: 'Add Time Slot', editEvent: 'Update Time Slot', deleteEvent: 'Delete Time Slot', }, },});function ScheduleCalendar() { const scheduleObj = useRef(); const recurrenceObj = useRef(); const { schedules } = useSelector((state) => state.schedules); const user = JSON.parse(localStorage.getItem('profile'))?.user; const onActionBegin = (args) => { if (args.requestType === 'eventCreate') { createSchedule({ startTime: args.data[0].startTime.toISOString(), endTime: args.data[0].endTime.toISOString(), sessionType: args.data[0].sessionType, mhp: user.id, }); } else if (args.requestType === 'eventChange') { if (args.data.isBooked) { // eslint-disable-next-line args.cancel = true; } else { updateSchedule(args.data.id, { startTime: args.data.startTime.toISOString(), endTime: args.data.endTime.toISOString(), sessionType: args.data.sessionType, }); } } else if (args.requestType === 'eventRemove') { if (args.data.isBooked) { // eslint-disable-next-line args.cancel = true; } else { deleteSchedule(args.data[0].id); } } }; const eventTemplate = (props) => { if (props.sessionType === 'Therapy Session') { if (props.isBooked) { return (

Booked

); } return (

); }; const onSessionTypeChange = (args) => { if (args.itemData !== null) { const startObj = document.querySelector('#startTime').ej2_instances[0]; const endObj = document.querySelector('#endTime').ej2_instances[0]; if (args.itemData.value === 'Consultation Call') { endObj.value = new Date(startObj.value.getTime() + 15 * 60000); } else { endObj.value = new Date(startObj.value.getTime() + user.sessionDuration * 60000); } } }; const onStartTimeChange = (args) => { const sessionObj = document.querySelector('#sessionType').ej2_instances[0]; const endObj = document.querySelector('#endTime').ej2_instances[0]; if (sessionObj.value === 'Consultation Call') { endObj.value = new Date(args.value.getTime() + 15 * 60000); } else { endObj.value = new Date(args.value.getTime() + user.sessionDuration * 60000); } }; const editorTemplate = (props) => { return (props !== undefined ? (

Session Type
Start Time
End Time
Recurrence

) :

); }; const onPopupOpen = (args) => { if (args.data.isBooked) { // eslint-disable-next-line args.cancel = true; } else if (args.type === 'Editor') { scheduleObj.current.eventWindow.recurrenceEditor = recurrenceObj.current; const statusElement = args.element.querySelector('#sessionType'); statusElement.setAttribute('name', 'sessionType'); const sessionObj = document.querySelector('#sessionType').ej2_instances[0]; sessionObj.value = args.data.sessionType ? args.data.sessionType : 'Therapy Session'; const endObj = document.querySelector('#endTime').ej2_instances[0]; endObj.value = args.data.endTime ? args.data.endTime : new Date(endObj.value.getTime() + (user.sessionDuration - 30) * 60000); } }; const onCellClick = (args) => { scheduleObj.current.openEditor(args, 'Add'); }; const onEventClick = (args) => { if (!args.event.RecurrenceRule) { scheduleObj.current.openEditor(args.event, 'Save'); } else { scheduleObj.current.quickPopup.openRecurrenceAlert(); } }; return ( );}export default ScheduleCalendar;

Balasubramanian Sattanathan · Accepted Answer

Please find the below sample to have different footer buttons.https://stackblitz.com/edit/react-schedule-editor-template-numeric-textbox-w1xkow?file=index.js

Mansi Sharma · Answer

Basically, I want to show this modal if the session is booked.

Balasubramanian Sattanathan · Answer

You can have a different editor window based on the appointment type by using the below code snippet. Code snippet: editorTemplate(props) { return ((props !== undefined) ? :

); } . . . . . . class EditorContent extends React.Component { constructor() { super(...arguments); this.instance = new Internationalization(); } getTimeString(value) { return this.instance.formatDate(value, { skeleton: 'hm' }); } render() { return ( (this.props.currentType.EventType != "Booked") ?

Summary
Reason

:

{ (this.props.currentType.Subject !== undefined) ?

{this.props.currentType.Subject}

: "" } { (this.props.currentType.StartTime !== undefined) ?

{this.getTimeString(this.props.currentType.StartTime)}

: "" } { (this.props.currentType.EndTime !== undefined) ?

{this.getTimeString(this.props.currentType.EndTime)}

: "" }

) } } Sample: https://stackblitz.com/edit/react-schedule-editor-template-numeric-textbox-8dmgjt?file=index.jsKindly try the above solution and let us know if this is helpful

Mansi Sharma · Answer

This would work if I don't want to change the footer button but as you can see in the screenshots I provided,

There are different buttons in the footer too. So how can I achieve that since the button of booked session needs to perform a different action too.

Balasubramanian Sattanathan · Answer

As we mentioned in our last reply. You can have a different editor window based on the appointment type by using the below code snippet. Here you need to form the editor window on your own and use it in the below-highlighted code.

The Skyblue color code will open the editor window for the not-booked appointment type. Here you can use the custom editor window as same as your screenshot
The green color code will open the editor window for booked appointment type. Here you can use the custom editor window only having the Appointment details as same as your screenshot.

Code snippet: