We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Vue scheduler does not refresh when dataSource is updated

Thread ID:

Created:

Updated:

Platform:

Replies:

144326 Apr 30,2019 10:47 PM UTC Oct 25,2020 04:39 PM UTC Vue 16
loading
Tags: Schedule
Harrison Haigler
Asked On April 30, 2019 10:47 PM UTC

After calling an API, I update the datasource for the scheduler with the response, yet none of the events render on the page.


<template>
<div>
<div id="calendar-content">
<div class="calendar-holder">
<ejs-schedule height="650px"
id="schedule"
ref="ScheduleObj"
:selectedDate='selectedDate'
:eventSettings='eventSettings'
:views='views'
></ejs-schedule>
</div>
</div>
</div>
</template>

<script>
import { SchedulePlugin, Day, Month, Agenda, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";
import { extend } from '@syncfusion/ej2-base';
import Events from '@/services/events'

import Vue from 'vue'
Vue.use(SchedulePlugin);

const eventTemplate = {
Id: -1,
Subject: '',
StartTime: new Date(),
EndTIme: new Date(),
IsAllDay: false,
}

export default {
name: 'Calender',
data() {
return {
events: [],
eventSettings: { dataSource: extend([{}], this.events, null, true)},
selectedDate: new Date("2018-08-19T12:00:00"),
views: ['Month', 'Day', 'Agenda'],
}
},
provide: {
schedule: [Day, Month, Agenda, Resize, DragAndDrop]
},
mounted() {
this.getEvents()
},
methods: {
async getEvents () {
const response = await Events.getEvents()
const data = response['event(s)']
for (let index = 0; index < data.length; index++) {
const event = data[index];
this.events.push({
Id: event.id,
Subject: event.eventName,
StartTime: new Date(event.startTime),
EndTIme: new Date(event.endTime),
})
}
this.eventSettings.dataSource = this.events
}
},
}
</script>




The data is being passed into the component as the screen shot below shows.
It is just not rendering

Vinitha Devi Murugan [Syncfusion]
Replied On May 1, 2019 08:04 AM UTC

Hi Harrison, 
 
Greetings from Syncfusion Support. 
 
We have checked the reported scenario by preparing a sample based on your shared code, and we are able to reproduce the issue. we suggest you use the below highlighted code to overcome the issue. 
 
    async getEvents () { 
      const response = await Events.getEvents() 
      const data = response['event(s)'] 
      for (let index = 0; index < data.length; index++) { 
        const event = data[index]; 
        this.events.push({ 
          Id: event.id, 
          Subject: event.eventName, 
          StartTime: new Date(event.startTime), 
          EndTIme: new Date(event.endTime), 
        })         
      } 
      //this.eventSettings.dataSource = this.events  
      let scheduleObj = document.getElementById("Schedule").ej2_instances[0]; 
      scheduleObj.eventSettings.dataSource = this.events 
    } 
 
Kindly use the above suggested way and let us know, if it resolves your problem and also, if you need any further assistance on this 
 
Regards,  
M. Vinitha devi. 
 


Harrison Haigler
Replied On May 1, 2019 05:01 PM UTC

Thanks for the quick response! I tried it and it still does not work. The component seems to have all the correct info yet it is not rendering.


Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 2, 2019 11:29 AM UTC

Hi Harrison,  
 
Thanks for your update. 
 
We suspect that using this could be the cause for the issue. We have prepared the below sample to update the data source on button click. 
 
onSubmit: function() { 
let scheduleObj = document.getElementById("Schedule").ej2_instances[0]; 
scheduleObj.eventSettings.dataSource = [{ 
Id: 1, 
Subject: 'Explosion of Betelgeuse Star', 
StartTime: new Date(2018, 5, 4, 9, 30), 
EndTime: new Date(2018, 5, 4, 11, 0), 
}, 
{ 
Id: 2, 
Subject: 'Analysis', 
StartTime: new Date(2018, 5, 4, 9, 30), 
EndTime: new Date(2018, 5, 4, 11, 0), 
}]; 
} 
 
 
Regards, 
Karthi 


Harrison Haigler
Replied On May 15, 2019 06:57 PM UTC

This is still not working. It will only work it the data source array is explicitly declared in the function. It does not work if the array is loaded in from an API.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 16, 2019 06:24 AM UTC

Hi Harrison,   
  
Thanks for your update.  
 
We have checked the reported case and remote API data is rendered in Schedule on button click. 
 
onSubmit: function() { 
  let scheduleObj = document.getElementById("Schedule").ej2_instances[0]; 
  var dataManger = new DataManager({ 
    url: "https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData", 
    adaptor: new WebApiAdaptor(), 
    crossDomain: true 
  }) 
    .executeQuery(new Query().take(100)) 
    .then(e => { 
      scheduleObj.eventSettings.dataSource = e.result; 
    }); 
} 
 
Kindly try the sample and if the issue persists, try to reproduce the error in a sample and revert else share your code example/runnable sample (if possible) to serve you better. 
 
Regards, 
Karthi 


Harrison Haigler
Replied On May 16, 2019 05:41 PM UTC

I got it working! However I had to do quite a few workarounds. I figured out the issue is that if the dataSource has an observer on it then the scheduler will reject it (example below). Can y'all fix this so we don't have to hack around it. Also, instead of needing to look up the element by it's element id, it would be great to just change the dataSource that is passed to the component.

This works:


This does not: 


Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 17, 2019 07:06 AM UTC

Hi Harrison,    
   
Thanks for your update. 
 
We have checked the reported case and observer datasource working fine with addEvent. Kindly try to reproduce the error in a sample and revert else share your code example/runnable sample (if possible) to serve you better. 
 
If you wish to share your files in private, please create the incident. 
 
Regards, 
Karthi 


Caxer Tsang
Replied On June 20, 2019 03:07 AM UTC

I have same issue here, I fix this problem with clearing the existing array and pushing new data in it. Assigning new array will not update the events.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On June 20, 2019 03:31 AM UTC

Thanks for your suggestion 😊 


Harrison Haigler
Replied On July 8, 2019 08:40 PM UTC

Thanks for the solution!

Karthigeyan Krishnamurthi [Syncfusion]
Replied On July 9, 2019 03:41 AM UTC

Most welcome 😊 


Adam
Replied On August 1, 2020 01:57 AM UTC

Was there ever a good resolution to this? I feel like the scheduler should simply update when the reactive variable is updated. I am having the same problem (even a year later), and am unsure how best to handle it. The solutions posted by support here seem awfully hacky.

Vengatesh Maniraj [Syncfusion]
Replied On August 3, 2020 11:30 AM UTC

Hi Adam, 

Greetings from Syncfusion Support. 

We checked your requirement and we suggest you please change the eventSetting variable like the below code snippet to achieve your requirement. 

onSubmit: function() { 
   this.eventSettings = { dataSource: this.generateData() }; 
} 


Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 
Vengatesh  


Tomasz Bednarek
Replied On August 18, 2020 10:01 AM UTC

Hi Syncfusion,

Yes, this works, although I've lost quite a few hours finding this solution. Please update the documentation or make the .refresh() and/or refreshEvents() methods work, because many people may stumble uppon this. Adding an event with .addEvent(...) and the calling any refresh method also doesn't work, so what's the use of those methods in the Vue version anyway?

Kind Regards
Tomasz

Balasubramanian Sattanathan [Syncfusion]
Replied On August 19, 2020 01:32 PM UTC

Hi Tomasz Bednarek, 

Thanks for the date. 

We have validated your reported scenario at our side and let you know that the refresh method is used to only refresh the Schedule UI and refreshEvents method is used to refresh the events alone and it will be suited for the Vue framework too. If we add the new appointment in the Scheduler by using the addEvent method, we can use the refresh method to reflect the changes in the DOM if the event is not added in the DOM. We would suggest you to refer the below UG links. 


Please let us know if you need further assistance. 

Regards, 
Balasubramanian S 


Ronald Bradley
Replied On October 25, 2020 04:39 PM UTC

You can create a new data property and set it and the eventSettings.dataSource to the same object. Then create a "deep watcher" for the data property and update the eventSettings object so that Scheduler knows the dataSource has changed. Although this causes a weird pause as the whole scheduler is rerendered. There has to be a better way.

let data = []

export default {
data() {
return {
eventSettings: {
dataSource: data,
},
dataSource: data,
}
},
watch: {
dataSource: {
deep: true,
handler(e) {
this.eventSettings = {...this.eventSettings}
}
}
}, }

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon