Scheduler flickering when switching days...

[kotac]

Hi,

I have a scheduler that is subscribed to real-time events and initially, I had some issues with re-rendering/flickering after the underlying datasource has changed from an outside real-time event. That part was sorted with setting the prop delayUpdate to True. But after setting that property what is happening next, is that after I change the days in the scheduler, it flickers - only happening if I have delayUpdate set as true. If I set it to false it doesn't flicker when switching the days but it flickers and sometimes loses resourceHeader after the underlying source changes (which is a bigger issue) - so i would definitely like to have delayUpdate as true...

Any ideas about how I could get rid of flickering when I switch between the dates?

Thanks

[Hareesh Balasubramanian]

Hi Ivan, 

Greetings from Syncfusion Support. 

We have validated your reported problem at our end and we suspect that your requirement is to prevent the re-rendering of the Scheduler component while the state change that could be the reason for the flickering issue. And for that we have prepared a sample using shouldComponentUpdate method and the sample can be viewed from the following link. 

Code snippet: 

  shouldComponentUpdate() { 

    return false; // Will cause component to never re-render. 

  } 

Sample: https://stackblitz.com/edit/react-6gujgn-emb1z3?file=index.js 

Kindly try the above sample and revert us if you have any further assistance. 

Regards, 

Hareesh 

[kotac]

Hi Hareesh, thanks for your answer...

As i am using functional components i wrapped my schedule in a react.memo which should be equivalent of what you are suggesting... anyway I found the issue, I had additional rendering caused by outside calendar setting the date along with the navigation datepicker. Removed it and now works fine. I have another question though... :)

I have real time events updating the scheduler source-appointments through Redux middleware, and it all works fine, but the only issue is that scheduler re-renders all appointment slots in a view when then event/state change happens. I attach short GIF just for easier understanding...
http://g.recordit.co/opEKIzD1qU.gif
Is there a way i can force scheduler to re-render only the particular slots where the new appointment has occurred? So for example if i drag and drop the yellow appointment from the GIF, on the other client ideally i would like only that appointment to move, not all appointments in the View to re-render... Any ideas? 
Regards...

Attachment: schedulerGif_e81bebee.zip

[Vengatesh Maniraj]

Hi Ivan, 

Thanks for the update. 

We have validated your requirement “force to re-render the event for particular slots” at our end and we regret to let you know that we could not force the event re-rendering for particular slots only. The Scheduler re-renders the events at each and every CRUD actions because of handling the overlapping functionality. So event re-rendering for particular slots are not feasible in the Scheduler.  

Kindly get back to us if you need any further assistance. 

Regards, 

Vengatesh 

[kotac]

Hi, many thanks for the update...

Will try to play around and let you know if i manage to hack anything in...

Regards

[Vengatesh Maniraj]

Hi Ivan, 

Thanks for the update. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh   

[Tony]

Hi, had you resolved the issue? I am using react hooks and instead of declaring the function shouldComponentUpdate() wrap the scheduler component into memo(). But the question is how to wrap custom Event template into memo() to prevent redundant re-rendering? The trouble is template param in eventSettings accepts string or undefined. So attempts to convert memoized component into string are being failed. I will be grateful to you

[Vinitha Devi Murugan]

Hi Tony, 

 

Thanks for your update. 

 

We have validated your reported query “how to wrap custom Event template into memo” at our end. We have achieved your requirement with the help of below code. We have prepared below sample for your reference.  

  

https://stackblitz.com/edit/react-functional-component-with-event-template-whfgtb?file=components%2Fchild.js  

 

  const renderEventtemplate = props => { 

    return ( 

      <div className="template-wrap" 

        style={{ background: props.SecondaryColor }}> 

        <div className="subject">{props.Subject}</div> 

        <div className="time"> 

          Time: {getTimeString(props.StartTime)} -{' '} 

          {getTimeString(props.EndTime)} 

        </div> 

      </div> 

    ); 

  }; 

 

      <ScheduleComponent 

        width="100%" 

        height="550px" 

        selectedDate={new Date(2018, 5, 1)} 

        eventSettings={{ 

          dataSource: data, 

          template: renderEventtemplate 

        }} 

      >   ……………… 

……….. 

 

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

 

Regards, 

Vinitha