Our powerful JS Calendar component


Post by freePlusxx01 »

Hi.

I used filter in SchedulerComponent, but now I'm migrating to CalendarComponent. this is my code in scheduler:

<input type="text" class="form_field_filter" (input)="filterEvents('name', $event.target.value)"/>

my .ts:

@ViewChild(SchedulerComponent, { static: false }) scheduler: SchedulerComponent;
filterEvents(field, value) {
   
switch (field) { case 'name': value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); this.scheduler.schedulerEngine.eventStore.filter({ filters: event => event.name.match(new RegExp(value, 'i')), replace: true }); break; case 'category': value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); this.scheduler.schedulerEngine.eventStore.filter({ filters: event => event.category.match(new RegExp(value, 'i')), replace: true }); break; case 'organizationName': value = value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); this.scheduler.schedulerEngine.eventStore.filter({ filters: event => event.organizationName.match(new RegExp(value, 'i')), replace: true }); break; } }

I'm with troubles to adapt to calendarComponent, could you help me?


Post by mats »

The store API is the same regardless of which product of ours you use. If you made eventStore filtering work for scheduler, same code will work for calendar.


Post by freePlusxx01 »

But it returns error, in calendar component I can't access calendarEngine as I accessed schedulerEngine in schedulerComponent, this property doesn't exist in CalendarComponent.


Post by Animal »

Try it using calendarInstance instead of calendarEngine


Post by fabio.mazza »

Hi freePlusxx01,

Here is an example how to filter the calendar by event store on https://www.bryntum.com/examples/calendar/basic/:

calendar.eventStore.filter({
    filters: event => event.name.match(new RegExp('Breakfast', 'i')),
    replace: true
});
Attachments
Screen Shot 2020-08-04 at 09.54.25.png
Screen Shot 2020-08-04 at 09.54.25.png (131.29 KiB) Viewed 2579 times

Best regards,
Fabio


Post by Animal »

The issue arises because the Calendar is released from a more advanced branch which has part of the new 4.0 Scheduler code.

The names have been changed in 4.0. The upgrade guide from Scheduler will contain this information, but for new Calendar users, it has been calendarInstance from the start. I'm not sure where this is documented, but it should be.

From the upcoming release notes (Trying to to have too much of a spoiler!):

Screenshot 2020-08-04 at 18.31.59.png
Screenshot 2020-08-04 at 18.31.59.png (23.27 KiB) Viewed 2573 times

Post by Animal »


Post by freePlusxx01 »

It worked using calendarInstance, but I had to add @ts-ignore commented (I don't know the reason), like this:

// @ts-ignore
    this.calendar.calendarInstance.eventStore.filter({
      id: 'eventNameFilter',
      filterBy: event => event.name.match(new RegExp(value, 'i'))
    });

Post by saki »

It should not be necessary to use //@ts-ignore in the code.

The ticket is here: https://github.com/bryntum/support/issues/1297

However, keep it there until we fix the issue.


Post Reply