Premium support for our pure JavaScript UI components


Post by rvinayagam »

Event Store Update:

During the Initial Load we create all the events and resources and assign to the event & resource store respectively. Later on update of any event for a specific resource, we want the event store to be updated only for the selected resource instead of the entire store. Do we have any code snippet/ Documentation which points to selectively updating the event store.

Event Icon

Within an Event we want to have icons along with sometext, currently it supports fontawesome icons is there a provision for us to load external SVG, PNG icons. We are able to add different context menus, but wanted to associate icons for those as well, again fontawesome is supported, can we add SVG, PNG icons for the same

Post by pmiklashevich »

Event Store Update:

During the Initial Load we create all the events and resources and assign to the event & resource store respectively. Later on update of any event for a specific resource, we want the event store to be updated only for the selected resource instead of the entire store. Do we have any code snippet/ Documentation which points to selectively updating the event store.
Please check out resource store and event store API. You can get desired events and apply changes only to them. Please open our basic demo and run in console:
events = scheduler.eventStore.getEventsForResource(scheduler.resourceStore.first);
events.forEach(event => event.name = 'Hello world!')
To listen for changes you can use change event.
Event Icon

Within an Event we want to have icons along with sometext, currently it supports fontawesome icons is there a provision for us to load external SVG, PNG icons. We are able to add different context menus, but wanted to associate icons for those as well, again fontawesome is supported, can we add SVG, PNG icons for the same
Sure, that's doable. Please see eventBodyTemplate and eventRenderer docs and checkout Icons demo for reference.

Best,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by rvinayagam »

Events not being removed from the Scheduler:

We make an API call and from the data we built the event and the resource store and set the same to scheduler. Later for update when we update the event store and rebind to scheduler,

1. Newly added events are successfully added and shown in the scheduler without problems.
2. Now when we want to remove some events against the resource based on the API response, we recreate the events array and bind the same to the scheduler.the event store seems to be updated but the scheduler seems to cache the older events data and shows in the scheduler. For those events none of the events are being triggered, it just shows up in the scheduler for all days and is removed only on complete reload of a page.

Post by mats »

1. How can we reproduce this? Can you please provide us with a test case?
2. Which version of Scheduler are you using?

Post by rvinayagam »

Bryntum Version : 2.0.2
Browser : Chrome v74

Steps To Reproduce. :
1. Create an event array with more than one event to the resource. Everything is rendered on the screen ( no issues )
2. Now try to remove an event, the event array for the resources is updated and assigned to scheduler, but the removed events are not getting removed from the scheduler.

Below is the code snippet for Scheduler Initialization.
<div>
    <scheduler
      #scheduler
      [rowHeight]="50"
      [minHeight]="100"
      [barMargin]="jobSchedule.barMargin"
      [events]="jobSchedule.events"
      [resources]="jobSchedule.resources"
      [timeRanges]="jobSchedule.timeRanges"
      [startDate]="jobSchedule.startDate"
      [endDate]="jobSchedule.endDate"
      [columns]="columns"
      eventColor="green"
      [viewPreset]="viewPreset"
      eventStyle="border"
      [eventRenderer]="eventRenderer"
      (onSchedulerEvents)="onSchedulerEvents($event)"
      (onContextMenuSelect)="onContextMenuSelect($event)"
      [userAssignedBranches]="userAssignedBranches"
      [driverSchedules]="jobSchedule.schedules"
      id="app"
      pDroppable="dd"
      (onDrop)="onJobDrop($event)"
    ></scheduler>
  </div>
Dynamic Resource Store Creation
 initializeResourceStore() {
    const resources = [];
    this.jobSchedule.assignedDrivers.forEach(f => {
      if (this.jobSchedule.schedules[f.driverId]) {
        const resource = {};
        resource['id'] = f.driverId;
        resource['name'] = f.lastName + ', ' + f.firstName;
        resource['branch'] = f.primaryBranchCode;
        resources.push(resource);
      }
    });
    this.jobSchedule.resources = resources;

    this.initializeEventStore(resources);
  }
Dynamic Event Store Creation
initializeEventStore(resources: any[]) {
    this.events = [];
    resources.forEach(s => {
      this.initializeEventStoreByDriverSchedule(this.jobSchedule.schedules[s.id]);
    });
    this.jobSchedule.events = this.events;
    this.jobSchedule.startDate = this.setDate(this.jobSchedule.schedulerDate, this.jobSchedule.rangeValues[0]);
  }

The events array is cleared and assigned new items every time, but the removed items are not removed from the scheduler visually.

Post by mats »

Later on update of any event for a specific resource, we want the event store to be updated only for the selected resource instead of the entire store.
Sounds like you're using a very inefficient way of dealing with updates. Setting the 'events' array on every update of an event is not how you should do it. If an event record changed outside the Scheduler and you want to update it in the EventStore, use "set" to set multiple values:

https://bryntum.com/docs/scheduler/#Com ... nction-set

Post by rvinayagam »

The code for creating the events is during the the initialization of the scheduler later we are updating the events for the selected resources as suggested. The problem seems to be fixed with the latest version of Bryntum (v2.0.3)

Post Reply