Our pure JavaScript Scheduler component


Post by jyoti »

I have three schedulers on same page. I have an array of objects which is containing the events of each scheduler . Whenever this array changes, i want to re-render all three schedulers. How can i do that?

Post by pmiklashevich »

Please provide more details on what you're trying to achieve. What's the usecase?

P.S. Just redrawing scheduler content can be done by refreshRows function.

P.S.2 Also please mention what browsers you're going to use.

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

To update scheduler data you can set resources and events to corresponding scheduler properties.
scheduler.resources = newResourcesArray;
scheduler.events = newEventsArray;
Basically it loads data to the corresponding resourceStore and eventStore.
scheduler.resourceStore.data = newResourcesArray;
scheduler.eventStore.data = newEventsArray;
As an alternative of using event store and resource store separately please consider the possibility of implementing CrudManager usage. It handles multiple stores loading/saving at once.

Pavlo Miklashevych
Sr. Frontend Developer


Post by jyoti »

Hi, thank you for your quick response.
I am using chrome browser.
I have multiple schedulers on same page. All resources are same for each scheduler. When i add a new event in any of the scheduler, i want it to be added to rest of the schedulers automatically without refreshing the page. I have code the which is appending the new events in event array. but since the schedulers are not re-rendering they are showing old data. But when i refresh the page it shows me the correct data. I want to re-render all schedulers without refreshing the page.

<scheduler *ngFor="let resource of resources; let i = index"
        #scheduler
        id="scheduler_{{i}}"
        class="col-md-12"
        [autoHeight]=false
        [rowHeight]="rowHeight"
        [group]="group"
       [eventDragCreate]="eventDragCreate"
        [events]="resource.events"
        [resources]="resource.resources"
        [groupSummary]="groupSummary"
        [viewPreset]="viewPreset"
        [startDate]="resource.startTime"
        [endDate]="resource.endTime"
        [columns]="columns"
        eventColor="green"
        eventStyle="border"
        [eventRenderer]="eventRenderer"
        [eventEdit]="eventEdit"
      ></scheduler>
Image
Attachments
Task Scheduler demo.png
Task Scheduler demo.png (226.45 KiB) Viewed 2061 times

Post by mats »

I have code the which is appending the new events in event array
Please show us the code you have written that doesn't work.

Post by jyoti »

this.resources is an array containing complete data of schedulers. this.resource.events is having all events of a scheduler.I am pushing the newly created event inside this.resource.events array. When i console.log it shows the updated event values but it doesn't reflect back in scheduler.
this.resources.forEach((res,index)=>{
                if(res.id == eventDetails.bookingID){
                  var data = { id: newBooking.id, resourceId: event.resourceRecord.id, name: newBooking.attributes.name, startDate:newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].value : "", endDate: newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].end_value : "", eventColor: "blue", iconCls: "b-fa b-fa-calendar", draggable: true, assigmnentId: eventDetails.bookingID, cls: "booked" };
                  this.resources[index].events.push(data)
                } else{
                  var d = { id: newBooking.id, resourceId: event.resourceRecord.id, name: "Already on assignment", startDate:newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].value : "", endDate: newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].end_value : "", eventColor: "orange", iconCls: "b-fa b-fa-calendar", draggable: true, assigmnentId: eventDetails.bookingID, cls: "not-booked" };
                  this.resources[index].events.push(d)
                }           
              })

Post by mats »

Ok, that's incorrect. You can either replace the dataset completely by setting on the Scheduler instance:
scheduler.events = [ .... ]
Or use the Store API to *add* the events to the existing dataset.

https://bryntum.com/docs/scheduler/#Sch ... nction-add

Post by jyoti »

Okay. Can you please tell me how can i use scheduler.eventStore.add({}) as i am having multiple schedulers. Isn't scheduler instance refers to a single scheduler?

Post by mats »

Yes, just call it on each

Post by jyoti »

I tried but its adding new event in same (first) scheduler.
this.resources.forEach((res,index)=>{
                var data;

                if(res.id == eventDetails.bookingID){
                  data = { id: newBooking.id, resourceId: event.resourceRecord.id, name: newBooking.attributes.name, startDate:newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].value : "", endDate: newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].end_value : "", eventColor: "blue", iconCls: "b-fa b-fa-calendar", draggable: true, assigmnentId: eventDetails.bookingID, cls: "booked" };

                } else{
                  data = { id: newBooking.id, resourceId: event.resourceRecord.id, name: "Already on assignment", startDate:newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].value : "", endDate: newBooking.attributes.timeslot.length > 0 ? newBooking.attributes.timeslot[0].end_value : "", eventColor: "orange", iconCls: "b-fa b-fa-calendar", draggable: false, assigmnentId: eventDetails.bookingID, cls: "non-booked" };
                    
                }
                this.scheduler.eventStore.add(data);   
              })

Post Reply