Kendo Scheduler Event Rendering Issue at start

[Vaibhav]

Hello,
We are integrating kendo scheduler angular which is having issue for data rendering.
We are calling an api and pushing the data to array for first time when page load it is not showing any data. I debug the code data is going into binded events just need to render when it loads for first time.
When we are clicking to week or month at that time it shows data. (anything for refreshing the scheduler).
We are using kendo scheduler, Facing an issue that data items (events) are being binded in the kendoSchedulerBinding. But its not rendering in UI, when we swap between MonthView or Week View or Day View it's automatically rendering in UI.
Providing image after click on week view.

<kendo-scheduler [kendoSchedulerBinding]="schedulerEvent"
                                         [modelFields]="editService.fields"
                                         [slotDuration]="60"
                                         [editable]="true"
                                         [selectedDate]="selectedDate"
                                         (slotDblClick)="slotDblClickHandler($event)"
                                         (eventDblClick)="eventDblClickHandler($event)"
                                         (remove)="removeHandler($event)"
                                         (drop)="onDrop($event)"
                                         style="height: 800px;">
                            <kendo-scheduler-day-view>
                            </kendo-scheduler-day-view>
                            <kendo-scheduler-week-view>
                            </kendo-scheduler-week-view>
                            <kendo-scheduler-month-view>
                            </kendo-scheduler-month-view>
                        </kendo-scheduler>
                        <scheduler-edit-form [event]="editedEvent" #remindermodal
                                             [editMode]="editMode"
                                             [isNew]="isNew"
                                             (save)="saveHandler($event)"
                                             (cancel)="cancelHandler()"
                                             style="display: block; margin-top: 20px;">
                        </scheduler-edit-form>

[Martin]

Hello Vaibhav,

Thank you for the provided screenshot.

Based on the provided details it seems that the Angular change detection is not triggered when the data is passed initially. Please ensure that the data for the Scheduler is available before its rendering on the page. e.g. provide the array of SchedulerEvent objects in ngOnInit hook. For more details check this article:

https://www.telerik.com/kendo-angular-ui/components/scheduler/data-binding/#toc-using-built-in-directive

As I am not sure how schedulerEvent array is created in the TS code I am unable to provide more suitable assistance for the case. Please could I ask you for some more details about the TS code responsible for creating the Scheduler collection, or ideally provide a runnable demo that reproduces the issue (like this StackBlitz for example). We will debug the code and be able to allocate the issue faster. Thank you in advance.

Regards,
Martin
Progress Telerik

[Vaibhav]

https://stackblitz.com/edit/angular-f8yvzp?file=app/app.component.ts
Please open above link and add
<kendo-scheduler-month-view startTime="07:00">
            </kendo-scheduler-month-view>  @12 line
<button (click)="add()">Add</button> @ 15 line
public extraEvents: SchedulerEvent[] = [
    {
      id: 2,
      title: 'Lunch',
      start: new Date('2018-10-25T09:00:00'),
      end: new Date('2018-10-25T09:30:00'),
      recurrenceRule: 'FREQ=DAILY;COUNT=5;'
    },
    {
      id: 3,
      title: 'Dinner',
      start: new Date('2018-10-26T09:00:00'),
      end: new Date('2018-10-26T09:30:00'),
      recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,TU,WE,TH,FR;COUNT=1461;'
    }
  ];
  add() {
    // console.log(this.events);
    this.events.push.apply(this.events, this.extraEvents);
    console.log(this.events);
  } @ 27 line
Please add this and check that if I press add button event got created but not render then switch it to month view to week view then it will be visible

[Vaibhav]

https://stackblitz.com/edit/angular-f8yvzp-v73xh1?file=app/app.component.ts

Now you can directly go to this link and click on add button on calendar which is pushing two more events in existing one ( you can check on stackblitz console that events got pushed ) but not reflecting immediately you need to swap between month and week to see that events.

[Martin]

Hi Vaibhav,

There is no special method that can be used to reload the Scheduler. The component might not be reloaded as te Angular's change detection mechanism not being triggered. A common pitfall is when a component property isn't updated by reference, just its value is changed. In such cases, the change detection isn't triggered and the view won't be re-rendered.

There are a few methods that would help to change the reference collection but the most popular are using the slice method or the spread operator [...].

Generally speaking, when replacing the data collection, the Scheduler is bound to, with a new one will automatically trigger the Angular change detection and the view will re-rendered.

Please check the updated demo:

https://stackblitz.com/edit/angular-f8yvzp-qz4yeo?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik