Schedule - No spinner and tooltip stuck when updating an event

[Justin Schnurer]

When a user of the Schedule component drags and drops or resizes an event, the event disappears from the calendar but the event tooltip remains. Then, after saving the update to the server, the Schedule component re-queries its data source (using my custom DataManager). During this entire process, there is no spinner or loading indication shown to the user.

This is what it looks like as the user is resizing the event item:

Then, when the user lets go of the mouse button, this is what it looks like as it is saving to the server and reloading the data again:

 

How can I ensure that during an update and a re-load of data, a spinner is shown to the user and the tooltip is not visible?

Also, when initially loading the data or when changing the date range (week or month), the calendar DOES display a spinner as shown in the below screenshot. Why is that spinner not shown during update/refresh?

[Vinitha Devi Murugan]

Hi Justin,

Greetings from Syncfusion Support.

Q1: We have validated your reported query “Show spinner on crud actions”
and achieved it by using actionBegin and dataBound events with showSpinner and hideSpinner methods. Please refer to the following sample.

Sample: https://stackblitz.com/edit/show-spinner-on-crud-actions?file=index.js

Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Service-1598592068

  onActionBegin(args) {

    if (

      args.requestType === 'eventCreate' ||

      args.requestType == 'eventChange' ||

      args.requestType == 'eventRemove'

    ) {

      this.scheduleObj.showSpinner();

    }

  }

  onDataBound(args) {

    this.scheduleObj.hideSpinner();

  }

Q2: We hided the tooltip while update the event by making use of hover and resizeStop events of our scheduler using below code and same can be available in above shared sample.

onResizeStop(args) {

    this.hideScheduleTooltip();

  }

  hideScheduleTooltip() {

    if (document.querySelector('.e-schedule-event-tooltip ')) {

      var
tooltipObj = document.querySelector('.e-schedule-event-tooltip ')

        .ej2_instances[0];

      if (tooltipObj) {

        // Hide tooltip

        tooltipObj.element.style.display = 'none';

      }

    }

  }

  onHover(args) {

    if (args.element.classList.contains('e-appointment')) {

      this.hideScheduleTooltip();

    }

  }

API: https://ej2.syncfusion.com/react/documentation/api/schedule/#showspinner

         https://ej2.syncfusion.com/react/documentation/api/schedule/#hidespinner

        

Kindly try with the above sample and get back to us if you need any further assistance.

Regards,

Vinitha