Editor template validation

[Vivek]

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?

[Ruksar Moosa Sait]

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

[Vivek]

Thankyou. 

[Ravikumar Venkatesan]

Hi Vivek,

Thanks for the update.

Kindly let us know if you need any further assistance on this.

Regards,

Ravikumar Venkatesan

[Vivek]

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,

[Ravikumar Venkatesan]

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.

• Share a video demo of your reported issue.
• Share issue reproducing code snippets or
• Reproduce the problem in our shared sample or
• Share a simple issue reproducing sample if possible.

Regards,

Ravikumar Venkatesan

[Vivek]

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.

[Ravikumar Venkatesan]

Hi Vivek,

Thanks for the update.

We are happy that you have achieved your requirement.

Regards,

Ravikumar Venkatesan

[Vivek]

HI,

How to add additional controls  save and cancel button or

how to control save and cancel button function in react scheduler(Editor)

[Ravikumar Venkatesan]

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;

[Vivek]

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

[Ravikumar Venkatesan]

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);

    }

  }

[Vivek]

Thank you, Ravikumar Venkatesan

Q1: the data shows only when is make any changes on that and save

Issue reproducing video demo.

Attachment: dataload_issue_6bf538d1.zip

[Vivek]

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

[Ravikumar Venkatesan]

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.

• The entire issue of reproducing code snippets or
• Reproduce the problem in our shared sample or
• Sample demonstrating the issue

[Vivek]

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..

[Swathi Ravi]

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;

      }

    }

  }

[Vivek]

Thank you  Swathi.

[Ravikumar Venkatesan]

Vivek,

Please get back to us if you need any other assistance.

[Vivek]

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.

[Swathi Ravi]

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

[Vivek]

Thank you Swathi.

[Vinitha Devi Murugan]

You are most welcome Vivek.

[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.

[Vinitha Devi Murugan]

Hi Vivek,

Beforeproceedingfurther
with
your
query, we need some more details to validate
further. So kindly share the following details.

• Can you please share all the scheduler related code snippets (or) share a simple issue replicating sample if possible?
• Can you please share the video clearly which depicts your issue?

Regards,

Vinitha

[Vivek]

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.

[Vijay Ravi]

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

[Vivek]

Thank you  Vijay Ravi, 

This code helped me a lot in performance...

[Satheesh Kumar Balasubramanian]

Vivek,

Please get back to us if you need any other assistance.

[Vivek]

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

[Mugilraj Govindarajan]

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

[Vivek]

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

[Ravikumar Venkatesan]

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

[Vivek]

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,

[Ravikumar Venkatesan]

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);

        }

    }

[Vivek]

Thank you  Ravikumar Venkatesan,

Got the result;

[Vivek]

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.

[Ravikumar Venkatesan]

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);

    }

[Vivek]

Thank you so much, Ravikumar Venkatesan

[Vivek]

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 )

[Swathi Ravi]

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.

• Entire Schedule related code snippets with sample end styles that you are using for customize the Schedule styles or
• Video demo that represents the issue or
• Steps to reproduce the issue or
• Issue replicating sample.

[Vivek]

Hi, Swathi Ravi, PFA,

• Video demo that represents the issue,

Attachment: flickering_issue_c6b2b6f0.rar

[Swathi Ravi]

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

• Entire Schedule related code with sample end customizations or
• Replicate the issue in our shared sample or
• Issue replicating sample.

Attachment: ScreenCapture_6222023_5.59.27_PM_e62cc3c8.zip

[Vivek]

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,

[Vivek]

Hi 

how to control the height of the the cells in scheduler 

[Vivek]

Found it thanks,

[Satheesh Kumar Balasubramanian]

Vivek, we are happy to hear that you have found a solution.