Events not drawn as expected

[Amos]

Hi

See image below

html part

<ejs-schedule
            :eventSettings="eventSettings"
            :firstDayOfWeek="getFirstDayOfWeek"
            :views="views"
            :selectedDate="selectedDate"
            :currentView="sView"
            style="flex: 1"
            :allowDragAndDrop="allowDragAndDrop"
            readonly="true"
            :eventRendered="onEventRendered"
            :showHeaderBar="showHeaderBar"
            ref="scheduleObj"
            :actionBegin="onActionBegin"
            :popupOpen="onPopupOpen"
        />

code part (events are not there to begin with, they are retrieved from the server and pushed at runtime)

for (var item in response.data.result) {
    this.eventsData.push({
        ...
    });
}
let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
scheduleObj.eventSettings.dataSource = this.eventsData;
scheduleObj.refresh();

I tried using setTimeout to refresh the component but it didn't help.

Please advice

Thanks

[Hareesh Balasubramanian]

Hi Amos, 

Greetings from Syncfusion Support..! 

We have validated your shared snippets at our end and suspect that your requirement is to “render the events from the server at the runtime of the Scheduler”. And for the same, we have prepared a sample using dataBound event of the Scheduler, which can be downloaded from the following link. 

Sample: https://codesandbox.io/s/vue-scheduler-events-are-loaded-at-the-runtime-r293c?file=/src/App.vue:576-794 

let dataManager = []; 

let flag = true; 

let ajax = new Ajax( 

  "https://ej2services.syncfusion.com/production/web-services/api/Schedule", 

  "GET", 

  false 

); 

ajax.onSuccess = function (value) { 

  dataManager = JSON.parse(value); 

}; 

onDataBound() { 

      if (flag) { 

        let schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

        schObj.eventSettings.dataSource = dataManager; 

        flag = false; 

      } 

    }, 

  }, 

Kindly try the above solution and if you still face any problem please share where you assigned the dataSource to the scheduler or replicate the problem in above sample. 

We will be happy to assist you..! 

Regards, 

Hareesh 

[Amos]

As you can see, the events are drawn but as if there is not enough room for all the events per day.

Doing some more tests show that at first, the component is drawn much smaller than the available space and only after calling

scheduleObj.refresh();

The component is drawn correctly, covering all the available space but the events were already drawn.

So then, calling

scheduleObj.refreshEvents();

Makes it draw everything as it should be.

let scheduleObj = document.querySelector(".e-schedule").ej2_instances[0];
scheduleObj.eventSettings.dataSource = this.eventsData;
scheduleObj.refresh();

scheduleObj.refreshEvents();

It's the old story of a component not bounding itself to the css, I had this issue from time to time, usually with a grid and we always fixed it using workarounds.

Just a thought.

[Nevitha Ravi]

Hi Amos, 

Thanks for your update. 

Since we are not able to replicate the issue at our end, could you please share the following details to provide prompt solution. 

• Try to replicate the issue in a sample
• Syncfusion scheduler package version
• Issue depicting video

Regards, 

Nevitha