I am using a custom editor template for the editor window. There is a dropDownListComponent there, which I want to be a required field. So I'm using the validator in the onPopupOpen function to make it a required field but it is returning undefined. Here is my code.
import React, { useRef } from 'react';
import { ScheduleComponent, Day, Week, Resize, DragAndDrop, Inject, ViewsDirective, ViewDirective } 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 { useDispatch, useSelector } from 'react-redux';
import { createSchedule, deleteMhpSchedule, updateSchedule } from '../../actions/schedule';
import './ScheduleCalendar.scss';
L10n.load({
'en-US': {
schedule: {
saveButton: 'Save',
cancelButton: 'Cancel',
deleteButton: 'Remove',
newEvent: 'Add Time Slot',
},
},
});
function ScheduleCalendar() {
const scheduleObj = useRef();
const { schedules } = useSelector((state) => state.schedules);
const user = JSON.parse(localStorage.getItem('profile'))?.user;
const dispatch = useDispatch();
const onActionBegin = (args) => {
if (args.requestType === 'eventCreate') {
dispatch(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') {
dispatch(updateSchedule(args.data.id, {
startTime: args.data.startTime.toISOString(),
endTime: args.data.endTime.toISOString(),
sessionType: args.data.sessionType,
}));
} else if (args.requestType === 'eventRemove') {
dispatch(deleteMhpSchedule(args.data[0].id));
}
};
const eventTemplate = (props) => {
if (props.sessionType === 'regular') {
return (
<div className="schedulePage__schedulerEvent" style={{ background: '#AB70CA' }} />
);
}
return (
<div className="schedulePage__schedulerEvent" style={{ background: '#FA8A8A' }} />
);
};
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 === 'free-call') {
endObj.value = new Date(startObj.value.getTime() + 15 * 60000);
} else {
endObj.value = new Date(startObj.value.getTime() + 60 * 60000);
}
}
};
const onStartTimeChange = (args) => {
const sessionObj = document.querySelector('#sessionType').ej2_instances[0];
const endObj = document.querySelector('#endTime').ej2_instances[0];
if (sessionObj.value === 'free-call') {
endObj.value = new Date(args.value.getTime() + 15 * 60000);
} else {
endObj.value = new Date(args.value.getTime() + 60 * 60000);
}
};
const editorTemplate = (props) => {
return (props !== undefined ? (
<table className="custom-event-editor" style={{ width: '100%', cellpadding: '5' }}>
<tbody>
<tr>
<td className="e-textlabel">Session Type</td>
<td className="custom-dropdown" colSpan={4}>
<DropDownListComponent
id="sessionType"
required
placeholder="Session Type"
data-name="sessionType"
className="e-field"
style={{ width: '100%' }}
dataSource={[
{ text: 'Therapy Session', value: 'regular' },
{ text: 'Consultation Call', value: 'free-call' },
]}
fields={{ text: 'text', value: 'value' }}
value={props.sessionType || 'null'}
change={onSessionTypeChange}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">Start Time</td>
<td colSpan={4}>
<DateTimePickerComponent
format="dd/MM/yy hh:mm a"
step={60}
id="startTime"
data-name="startTime"
value={new Date(props.startTime || props.StartTime)}
className="e-field"
change={onStartTimeChange}
/>
</td>
</tr>
<tr>
<td className="e-textlabel">End Time</td>
<td colSpan={4}>
<DateTimePickerComponent
format="dd/MM/yy hh:mm a"
step={60}
id="endTime"
data-name="endTime"
value={new Date(props.endTime || props.EndTime)}
className="e-field"
/>
</td>
</tr>
</tbody>
</table>
) : <div />);
};
const onPopupOpen = (args) => {
if (args.type === 'Editor') {
const statusElement = args.element.querySelector('#sessionType');
statusElement.setAttribute('name', 'sessionType');
const formElement = args.element.querySelector('.e-schedule-form');
const validator = (formElement).ej2_instances[0];
validator.addRules('sessionType', { required: true });
const endObj = document.querySelector('#endTime').ej2_instances[0];
endObj.value = new Date(endObj.value.getTime() + 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 (
<ScheduleComponent
ref={scheduleObj}
showQuickInfo={false}
eventClick={onEventClick}
cellClick={onCellClick}
eventSettings={{
dataSource: schedules,
template: eventTemplate,
fields: {
id: 'id',
sessionType: { name: 'sessionType', validation: { required: true } },
startTime: { name: 'startTime', validation: { required: true } },
endTime: { name: 'endTime', validation: { required: true } },
},
}}
popupOpen={onPopupOpen}
actionBegin={onActionBegin}
editorTemplate={editorTemplate}
className="schedulePage__scheduler"
width="100%"
height="73vh"
selectedDate={new Date()}
enablePersistence
>
<ViewsDirective>
<ViewDirective option="Week" />
<ViewDirective option="Day" />
</ViewsDirective>
<Inject services={[Day, Week, Resize, DragAndDrop]} />
</ScheduleComponent>
);
}
export default ScheduleCalendar;
And the screenshot of the error.
Please look into this and please tell me if you have a solution for the same.
