Unable to call refreshEvents() method

[Paul Jackson]

Hello, I'm attempting to create a simple button that calls this method outlined in your documentation:

https://ej2.syncfusion.com/react/documentation/schedule/appointments/#refresh-appointments

It does not seem to work for me.

One difference is that I'm using functional React, so I'm using useRef() to access the component. I can log the scheduler to the browser console, and browsing the schedule object I find that the refreshEvents() method can be found under a Prototype, but I can't call that method in my code.

I am hoping as well that I can have the scheduler show a spinner or something to let the user know that a refresh action has been initiated.

[Praveenkumar Narasimhanaidu]

Hi Paul, 

  

Greetings from Syncfusion support..! 

  

Please find the responses below. 

  

Q1: Unable to call refreshEvents() method 

  

With the help of following code snippet, you can call the refreshEvents method properly. 

  

const scheduleObj = useRef<ScheduleComponent>(null); 

  

  const onButtonClick = () => { 

    if (scheduleObj.current) { 

      scheduleObj.current.showSpinner(); // show the spinner 

      setTimeout(function () { 

        if (scheduleObj.current) { 

          scheduleObj.current.refreshEvents(); // refreshing the events 

          scheduleObj.current.hideSpinner(); // hide the spinner 

        } 

      }, 5000); 

    } 

  }; 

  const onDataBound = () => { 

    console.log("Events refreshed") // ensuring the events are properly refreshed. 

  } 

  

  return ( 

    <div> 

      <ButtonComponent id='add' title='RefereshEvents' onClick={onButtonClick}>Referesh Events</ButtonComponent> 

      <ScheduleComponent id="schedule" height="550px" ref={scheduleObj} eventSettings={{ dataSource: data}} 

        cssClass='event-template' dataBound={onDataBound} showQuickInfo={false} allowResizing={false}> 

        <ViewsDirective> 

          <ViewDirective option={Browser.isDevice ? 'Day' : 'Week'} /> 

          <ViewDirective option={Browser.isDevice ? 'TimelineDay' : 'TimelineWeek'} /> 

        </ViewsDirective> 

        <Inject services={[Day, Week, TimelineViews, Resize, DragAndDrop]} /> 

      </ScheduleComponent> 

    </div> 

  ); 

  

  

Q2: I am hoping as well that I can have the scheduler show a spinner or something to let the user know that a refresh action has been initiated. 

  

By default, the scheduler will show a spinner in the UI once the events are refreshed. But if there is a smaller number of events the spinner will hide within a fraction of a second. So, here we use showSpinner and hideSpinner methods to add custom behavior. Please refer to the below-highlighted code snippet. 

  

const scheduleObj = useRef<ScheduleComponent>(null);; 

  

  const onButtonClick = () => { 

    if (scheduleObj.current) { 

      scheduleObj.current.showSpinner(); // show the spinner 

      setTimeout(function () { 

        if (scheduleObj.current) { 

          scheduleObj.current.refreshEvents(); // refreshing the events 

          scheduleObj.current.hideSpinner(); // hide the spinner 

        } 

      }, 5000); 

    } 

  }; 

  

  

We have prepared a sample for your reference which can be downloaded from following link. 

  

Sample: https://www.syncfusion.com/downloads/support/forum/170152/ze/EJ2-React-Functional-Scheduler-Custom-Spinner151094278 

  

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

  

Regards, 

Praveenkumar