Scheduler Editor Template Form validation.
For Example i have 10 fields the default validation is ok (save button).
1) my Query is Additionally i need to validate 3 fields by using custom button (Add Button) in the same form.
When i click save button the default validation should work (it is working) but in my case the add button validation is also working. Add button validation should work only when i click add button. How to fix this.
next
can i use the same validation function outside of scheduler form?
Hi Vivek,
We have checked on your query and let you know that by default, when the Save button is clicked, the validation takes place to all the Validation fields in the editor window. Hence we suggest you to dynamically remove the validation rules applied for the Add button to achieve your requirement. Kindly refer the below documentation to remove the validation rules in the form validator.
https://ej2.syncfusion.com/documentation/form-validator/validation-rules/#adding-or-removing-rules
Can i use the same validation function outside of scheduler form?
We suspect you need to validate a form outside the Editor window. Hence, it is not possible to use the same validation function outside the scheduler. We suggest you to validate the fields separately. Kindly refer the below documentation and customize to validate the fields outside the scheduler.
https://ej2.syncfusion.com/documentation/form-validator/validation-rules/#html5-form-validation
Regards,
Ruksar Moosa Sait
Hi Vivek,
Thanks for the update.
Kindly let us know if you need any further assistance on this.
Regards,
Ravikumar Venkatesan
Hi Ravikumar Venkatesan,
1) How to get dynamic form fields values.
Currently, I am able to get the fields values which is presented when popup open.
but I need the fields values which is added dynamically(Array);
2) The scheduler grid is working fine when the data is in same page;
when I change by setstate the the data is not updating for scheduler(group name, list name), any suggestions,
Hi Vivek,
Thanks for the update.
Sample: https://stackblitz.com/edit/ej2-react-schedule-dynamically-change-input-data?file=index.js
Q1: How to get dynamic form fields values
We have set the dynamic data array to the SubEventType field of the editor field based on the EventType chosen in the editor window as shown in the below code snippet.
[index.js]
function editorTemplate(props) { return ((props !== undefined) ? <table className="custom-event-editor" style={{ width: '100%' }} cellPadding={5}><tbody> <tr><td className="e-textlabel">Summary</td><td colSpan={4}> <input id="Summary" className="e-field e-input" type="text" name="Subject" style={{ width: '100%' }} /> </td></tr> <tr><td className="e-textlabel">Status</td><td colSpan={4}> <DropDownListComponent id="EventType" placeholder='Choose status' data-name='EventType' className="e-field" style={{ width: '100%' }} value={props.EventType} change={statusChange.bind(this)} dataSource={['New', 'Requested', 'Confirmed']}> </DropDownListComponent> </td></tr> <tr><td className="e-textlabel">Sub Status</td><td colSpan={4}> <DropDownListComponent id="SubEventType" placeholder='Choose sub status' data-name='SubEventType' className="e-field" value={props.SubEventType} style={{ width: '100%' }} dataSource={setData(props.EventType)}> </DropDownListComponent> </td></tr> <tr><td className="e-textlabel">From</td><td colSpan={4}> <DateTimePickerComponent id="StartTime" format='dd/MM/yy hh:mm a' data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent> </td></tr> <tr><td className="e-textlabel">To</td><td colSpan={4}> <DateTimePickerComponent id="EndTime" format='dd/MM/yy hh:mm a' data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent> </td></tr> <tr><td className="e-textlabel">Reason</td><td colSpan={4}> <textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style={{ width: '100%', height: '60px !important', resize: 'vertical' }}></textarea> </td></tr></tbody></table> : <div></div>); }
function statusChange(args) { let dialog = args.element.closest('.e-popup.e-schedule-dialog'); if (dialog) { var subEventObj = dialog.querySelector('#SubEventType').ej2_instances[0]; subEventObj.dataSource = setData(args.value); } }
function setData(status) { let resultData = ['New one', 'New two']; if (status) { if (status === 'New') { resultData = ['New one', 'New two']; } else if (status === 'Requested') { resultData = ['Requested one', 'Requested two']; } else if (status === 'Confirmed') { resultData = ['Confirmed one', 'Confirmed two']; } } return resultData; } |
Q2: when I change by setstate the the data is not updating for scheduler(group name, list name), any suggestions
We need additional details to validate your reported query at our end. Kindly share the below details it will help us to validate and provide the solution for your problem earlier.
Regards,
Ravikumar Venkatesan
Hi Ravikumar Venkatesan,
Q2: when I change by setstate the the data is not
updating for scheduler(group name, list name), any suggestions
Got the result;
Thank you for the update.
Hi Vivek,
Thanks for the update.
We are happy that you have achieved your requirement.
Regards,
Ravikumar Venkatesan
HI,
How to add additional controls save and cancel button or
how to control save and cancel button function in react scheduler(Editor)
You can add the Save and Cancel buttons and their functions to the React Schedule editor window on the popupOpen event of the Schedule, as shown in the shared snippet.
Sample: https://stackblitz.com/edit/ej2-react-schedule-add-custom-buttons-on-dialog?file=index.js
[index.js]
function EditorTemplate() { let scheduleObj; let isDialogButtonsSet = false;
function onEventSave(args) { // Yon can perform a save action here }
function onDialogClose(args) { // Yon can perform close action here }
function onPopupOpen(args) { if (args.type === 'Editor') { if (!isDialogButtonsSet) { var dialogObj = args.element.ej2_instances[0]; dialogObj.buttons = [ { buttonModel: { content: 'Save', cssClass: 'e-primary e-event-save', isPrimary: true }, click: onEventSave.bind(this) }, { buttonModel: { content: 'Cancel', cssClass: 'e-event-cancel' }, click: onDialogClose.bind(this) } ]; isDialogButtonsSet = true; } } }
return (<div className='schedule-control-section'> <div className='col-lg-12 control-section'> <div className='control-wrapper'> <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021, 1, 15)} ref={schedule => scheduleObj = schedule} editorTemplate={editorTemplate.bind(this)} showQuickInfo={false} popupOpen={onPopupOpen.bind(this)}> </ScheduleComponent> </div> </div> </div>); } export default EditorTemplate; |
Yes, Thank you Ravikumar Venkatesan.
One more question,
1) I have used two timeline scheduler one is for booking and another one is for calculated data;
both working fine but problem is when is flip the second one (calculated data scheduler) the data shows only when is make any changes on that and save. when I refresh the data is not displaying
2) The above code removes all the buttons can i have the remove button back on default or the remove button functionality,
any suggestion to keep the default remove button(i have tried)
Attachment: one_945442ad.zip
Q1: the data shows only when is make any changes on that and save
We require the below details to proceed further with your query and based on those, we will check and provide an appropriate solution.
Issue reproducing video demo.
Reproduce the problem in our shared sample or Issue reproducing sample.
Q2: The above code removes all the buttons can i have the remove button back on default or the remove button functionality,
You can achieve your requirement with the help of the created event in the schedule, as shown in the below snippet.
Sample: https://stackblitz.com/edit/ej2-react-schedule-editor-buttons-sample?file=index.js
[index.js]
function onCreated() { if (scheduleObj) { var dialogObj = scheduleObj.eventWindow.dialogObject; var buttons = [ { buttonModel: { content: 'Save', cssClass: 'e-primary e-event-save', isPrimary: true }, click: onEventSave.bind(this) }, { buttonModel: { content: 'Cancel', cssClass: 'e-event-cancel' }, click: onDialogClose.bind(this) } ]; dialogObj.buttons = dialogObj.buttons.splice(0, 1).concat(buttons); } } |
Thank you, Ravikumar Venkatesan
Q1: the data shows only when is make any changes on that
and save
Issue
reproducing video demo.
I have achieved the Q1 by manually assigning row id,
But now facing another problem that is
When i put scheduler height to < 750px or 70vh the data to grid table has nothing to show.
any sugg
In your shared video demo, you have rendered the appointments, and while checking the Occupancy check box some numbers are displayed inside the Schedule work cells. We suspect that these number contents were hidden while changing the Schedule height. We need additional details to validate this further.
Sorry for the late reply, I have been working in another project.
I used your code mentioned above
the code written in popupopen is
if (!isDialogButtonsSet) {
let footer = document.querySelector(".e-footer-content")
var dialogObj = args.element.ej2_instances[0];
dialogObj.buttons = [
{
buttonModel: { content: "Save Booking", cssClass: "e-primary e-event-save", isPrimary: true },
click: onEventSave,
},
{ buttonModel: { content: "Clear Booking", cssClass: "e-event-cancel" }, click: onDialogClose },
];
isDialogButtonsSet = true;
}
1) its working fine in new popup event but showing error in edit event.
the error code is ( Uncaught TypeError: Cannot read properties of null (reading 'className') )
Any
suggestion's pls..
Vivek,
The cause of the problem is that the delete button is not in the array. To resolve this issue, add the delete button to the dialog, as shown in the snippet below.
Sample: https://stackblitz.com/edit/ej2-react-schedule-add-custom-buttons-on-dialog-ynhvw9?file=index.js
[index.js]
function onPopupOpen(args) { var dialogObj = document.querySelector('.e-dialog').ej2_instances[0]; if (args.type === 'Editor') { if (!isDialogButtonsSet) { let footer = document.querySelector(".e-footer-content") dialogObj.buttons = [ { buttonModel: { content: "Save Booking", cssClass: "e-primary e-event-save", isPrimary: true }, click: onEventSave }, { buttonModel: { content: "Clear Booking", cssClass: "e-event-cancel" }, click: onDialogClose }, { buttonModel: { content: "Delete Booking", cssClass: "e-event-delete" } }, ]; isDialogButtonsSet = true; } } } |
Thank you Swathi.
Vivek,
Please get back to us if you need any other assistance.
Hi,
1) In editor template date column I have a condition to update the end date.
ie if difference between from and to date is greater than 20 days then prompt will open and then if yes selected the date should update in date picker else the previous selected date should be there in date picker.
set state to value is not working.
but manual replace the value in input box is working but in date picker not updating the value which is in the input filed for the first time, please help with this.
2) How to disable default scheduler loader and enable mine.
Thank you.
Hi Vivek,
Q1: You can achieve your requirement by using the Schedule’s popupOpen event and date time picker change event as shown in the below shared snippet.
Sample: https://stackblitz.com/edit/react-schedule-conditional-endtime-update-in-editor?file=index.js
Api: https://ej2.syncfusion.com/react/documentation/api/schedule/#popupopen
https://ej2.syncfusion.com/react/documentation/api/datetimepicker#change
[index.js]
EditorTemplate() { const [fromDate, setFromDate] = useState(); const [toDate, setToDate] = useState(); let scheduleObj;
const handleToDateChange = (event) => { scheduleObj = document.querySelector('.e-schedule').ej2_instances[0]; const newToDate = new Date(event.value); const newStartDate = new Date(document.getElementById("StartTime").value);
const differenceInMilliseconds = Math.abs(newStartDate - newToDate); const dateDifference = differenceInMilliseconds / (1000 * 60 * 60 * 24);
if (dateDifference > 20) { const confirmResponse = window.confirm( "The selected date difference is greater than 20 days. Do you want to update the date?" ); if (confirmResponse) { document.getElementById("EndTime").value = event.value; } else { setToDate(scheduleObj.activeCellsData.endTime); } } else { setToDate(scheduleObj.activeCellsData.endTime); } };
const onPopupOpen = (event) => { setFromDate(event.data.StartTime); setToDate(event.data.EndTime); }
const editorTemplate = (props) => { return ( (props !== undefined) ? <table className="custom-event-editor" style={{ width: '100%' }} cellPadding={5}> <tbody> <td className="e-textlabel">From</td> <td colSpan={4}> <DateTimePickerComponent id="StartTime" data-name="StartTime" value={fromDate} className="e-field" /> </td> </tr> <tr> <td className="e-textlabel">To</td> <td colSpan={4}> <DateTimePickerComponent id="EndTime" data-name="EndTime" value={toDate} className="e-field" change={handleToDateChange} /> </td> </tr> </tbody> </table> : <div></div> ); };
return ( <div className="schedule-control-section"> <div className="col-lg-12 control-section"> <div className="control-wrapper"> <ScheduleComponent editorTemplate={editorTemplate.bind(this)} popupOpen={onPopupOpen.bind(this)} > </ScheduleComponent> </div> </div> </div> ); } |
Q2: In the below forum we addressed the same query. Please refer that to achieve your requirement.
https://www.syncfusion.com/forums/148469/disable-default-loading-bar-of-scheduler
Regards,
Swathi Ravi
You are most welcome Vivek.
Hi,
In grid load (box), Am showing 30 days data to grid boxes, the real problem is when I show less than 10 rows of 30days data the result is showing as expected but when I load more than 10 rows (eg 30-40 rows even higher) the time taken to process the data and to display the data to user is taking too long.
I have used useMemo but still taking too much time. please help me with this.
thankyou.
Hi Vivek,
Beforeproceedingfurther
with
your
query, we need some
more details to validate
further. So kindly share the following details.
Regards,
Vinitha
Hi Vinitha,
1) timeScale={{enable: true, interval: 60 * 24, slotCount: set_occupency ? 1 : 1 }}
2) timeScale={{enable: true, interval: 60 * 24, slotCount: set_occupency ? 1 : 6 }}
First one works fine without any delay but the second one takes some time to load
I found the problem is in slotCount, any suggestions pls.
Hi Vivek,
Online demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/schedule/virtual-scrolling
When rendering many slots in the DOM, it can cause delays and impact performance. To address this issue, we have introduced the allowVirtualScrolling feature. By enabling virtual scrolling, we can optimize the rendering and improve the performance of the component. With virtual scrolling, the Schedule component only renders the visible portion of the schedule while dynamically loading additional slots as the user scrolls. This significantly reduces the initial rendering time and improves the overall performance by avoiding the need to render and manage many slots in the DOM at once. By enabling allowVirtualScrolling, we have effectively addressed the performance issue associated with rendering many slots in the Schedule component. Virtual scrolling has greatly improved the performance of the component and enhanced the user experience by efficiently managing the rendering of many slots.
Regards,
Vijay Ravi
Thank you Vijay Ravi,
This code helped me a lot in performance...
Vivek,
Please get back to us if you need any other assistance.
Hi,Satheesh Kumar Balasubramanian,
When I drag and drop the booking in scheduler, If droppable slot already occupied I need to get both details(draggable data & occupied data).
Get details in onDragStop() if possible.
I can get the draggable data but I need occupied data details.
Please help me with this.
Thank you
Hi Vivek,
We validated your reported requirement at our end, and we suggested to use getEvents
public method in dragStop
event of scheduler, we had prepared a sample based on your requirement
Sample: https://stackblitz.com/edit/react-ddsj42?file=index.js
[index.js]
function onDragStop(args) { if (args.data) { let occupiedEvents = scheduleObj.getEvents(args.data.StartTime, args.data.EndTime, true); console.log(occupiedEvents); } } |
Regards,
Mugilraj G
Hi, Mugilraj G Thank you,
The above code gets all day events (but I need that droppable slot data only)
eg: the code gets all events at same day but I need single droppable slot data onl
Hi Vivek,
Sample: https://stackblitz.com/edit/ej2-react-schedule-appointment-dropped-cell-details?file=index.js
Based on your shared details we suspect that your requirement is to get the appointment dropped cell details. You can get the appointment dropped cell details with the help of the getCellDetails method of the Schedule as shown in the below code snippet. If we misunderstood your requirement share more details about your requirement like an image or video explaining your requirements.
[index.js]
function onDragStop(args) { if (args.data) { // Mouse target cell detail var droppedCellDetails = scheduleObj.getCellDetails(args.target); console.log(droppedCellDetails); // Dropped appointment starting cell detail var droppedStartCell = scheduleObj.element.querySelector('[data-date="' + args.data.StartTime.getTime() + '"]'); var droppedStartCellDetails = scheduleObj.getCellDetails(droppedStartCell); console.log(droppedStartCellDetails); } } |
Regards,
Ravikumar Venkatesan
Hi, Ravikumar Venkatesan, Thank you,
1) What I need is, from below image, If I drag Ram (booking)data and drop to Nandhu data cells. After I drop to nandhu cells, I need that Nandhu (booking)data details,
Vivek,
Sample: https://stackblitz.com/edit/ej2-react-schedule-get-dropped-resource-cells-apps?file=index.js
You can achieve your requirement with the help of the getCellDetails, and getEvents methods of the Schedule as shown in the below code snippet. Try the shared sample and let us know if you need any further assistance.
[index.js]
function onDragStop(args) { if (args.data && args.target) { var cellData = scheduleObj.getCellDetails(args.target); var occupiedEvents = scheduleObj.getEvents(cellData.startTime, cellData.endTime); var occupiedEvent = occupiedEvents.filter((app) => app.TaskId === args.data.TaskId)[0]; console.log(occupiedEvent); } } |
Thank you Ravikumar Venkatesan,
Got the result;
Hi, how to acheive the source and target event in resize.
args.target is not working on resize event, pls help.
from below image I resize prabhu event up to test event and I want to get both abi and test data details as well.
Vivek,
Sample: https://stackblitz.com/edit/ej2-react-schedule-get-resized-resource-cells-apps?file=index.js
You can get the events between the resized time range with the help of the getEvents method of the Schedule as shown in the below code snippet.
[index.js]
function onResizeStop(args) { var eventsInRange = scheduleObj.getEvents(args.data.StartTime, args.data.EndTime); var listOfEventsInRange = eventsInRange.filter((app) => { return app.Id !== args.data.Id && app.TaskId === args.data.TaskId; }); console.log(listOfEventsInRange); } |
Thank you so much, Ravikumar Venkatesan
Hi, when I drag the booking(event) one day to another day placed the drop event correctly , but between dragging the booking is like flickering.
Resize is also working smoothly.
The problem is flickering while dragging, any suggestions pls..
(I don't know the cause of this problem but have changed the row height )
Vivek,
We have checked your reported issue at our end, but we are unable to replicate your reported issue. Please share the below information to proceed further. It would be helpful to us.
Hi, Swathi Ravi, PFA,
Attachment: flickering_issue_c6b2b6f0.rar
Vivek,
We have checked your reported issue at our end, but we are unable to replicate your issue. Please check our shared sample and video and still you are facing the same issue, share the below details to proceed further. It would be helpful to us to validate your issue.
Sample: https://stackblitz.com/edit/ej2-react-schedule-get-resized-resource-cells-app-6ygggx?file=index.js
Hi Swathi Ravi,
.e-appointment {
margin-top: -2px !important;
}
This is the cause for the above flickering issue; I changed class name from
.e-appointment to
.e-appointment-container
and every thing working fine,
Thank you,
Hi
how to control the height of the the cells in scheduler
Found it thanks,
Vivek, we are happy to hear that you have found a solution.