Event Calendar - Vanishing grid on scroll

Event calendars & schedulers
1

While scroll into the event calendar, for some resources, the calendar grid is vanished.

I’m using this configurations :

<mbsc-eventcalendar
      #eventCalender
      class="md-work-order-scheduling"
      [data]="myEvents"
      [resources]="myResources"
      [options]="calendarOptions"
      [(selectedDate)]="calendarSelectedDate"
      [headerTemplate]="customTemplate"
      [extendDefaultEvent]="extendDefaultEvent"
      [dayTemplate]="dayTemp"
      [scheduleEventContentTemplate]="eventTemp"
      [resourceTemplate]="resourceTemp"
      [resourceHeaderTemplate]="resourceHeader"
      [showEventTooltip]="false"
    >

And facing issue while scrolling as below attached image :

2023-09-11_12h30_46
2023-09-11_12h30_461888×484 54.5 KB

2

Hello @Ghanshyam_Godhani :wave:

As Szili mentioned on the other thread: so far we haven’t came across with this problem. He tried to re-create this problem in a local test app: tried with the scheduleEventContentTemplate, resourceTemplate, resourceHeaderTemplate templates and loaded multiple events and resources to the Timeline view, but so far the reported issue is not appearing on our end.

Are you using any css overrides to alter the default sizes of the Timeline element? If yes, can you also please share those as well.

3

I have encountered this as well. I’ve created a copy of your timeline demo and modified it a bit to add a larger number of resources and events.

most of the relevant code is in src/timeline.tsx

just run npm install && npm start. I’ve seen this in both Chrome and Firefox.

When I scroll down toward the bottom of the list of resources and then maximize or un-maximze the window, I get portions of the timeline grid to not repaint and shows as just white area. Then if I scroll a bit, it repaints correctly.

I have a video of the problem and how I reproduce it. I’m a new user so it’s not letting me upload. Let me know and I can get that to you some other way.

4

Another detail I forgot to add. If I turn off virtualScroll, I don’t see the problem anymore. But for our use, the performance becomes a problem

5

Hello @Ghanshyam_Godhani and @Randy :wave:

Good news: we have shipped Mobiscroll 5.28.1, where we fixed an issue where the timeline grid was not always repainted correctly after window resize.

Here you can find a guide of how you can update the Mobiscroll version to the latest: Update guide on the latest version of Mobiscroll for plain JS, jQuery, Angular, Ionic and React.

6

Thank you @Zsombor. That has solved our problem.

1 Like