Our powerful JS Calendar component


Post by kumarbv »

Is there a way to refresh calendar view?

The color of the events are changing while I am tryin to change events dynamically.


Post by mats »

You should never have to refresh the calendar manually. Can you please share some more context on what you are trying to achieve?


Post by kumarbv »

Hi mats,

I have been trying to change the events dynamically based on the text filter.
step1:

trying to filter evenets based on subject
trying to filter evenets based on subject
text filter subject.PNG (51.94 KiB) Viewed 348 times

Now I have typed a text which is not matching with any event
step:2

step 2 non matching text.PNG
step 2 non matching text.PNG (50.12 KiB) Viewed 348 times

Next I have typed text in step1, event loaded but with different color(grey).

event color changed.PNG
event color changed.PNG (51.22 KiB) Viewed 348 times

I am thinking if there is any way I can refresh view to regain the event color


Post by mats »

Sounds a bit like you're looking for a highlight feature, as showcased here? https://bryntum.com/products/scheduler/examples/filtering/

You can inspect how that's done in the Scheduler sample sources:

 tbar : [
        {
            type                 : 'textfield',
            ref                  : 'highlight',
            placeholder          : 'Highlight tasks',
            clearable            : true,
            keyStrokeChangeDelay : 100,
            triggers             : {
                filter : {
                    align : 'start',
                    cls   : 'b-fa b-fa-search'
                }
            },
            onChange({ value }) {
                scheduler.eventStore.forEach(task => {
                    const taskClassList = new DomClassList(task.cls);

                if (value !== '' && task.name.toLowerCase().includes(value.toLowerCase())) {
                    taskClassList.add('b-match');
                }
                else {
                    taskClassList.remove('b-match');
                }

                task.cls = taskClassList.value;
            });

            scheduler.element.classList[value.length > 0 ? 'add' : 'remove']('b-highlighting');
        }
    }
]

Post by kumarbv »

Hey Mats,

The event is already highlighted based on event type.

meetingType: Array<CalendarResouce> = [
    {
      id: ResourceIds.ALL_CALENDAR_ENTRIES_RESOURCE_ID,
      name: 'All Calendar entries',
      eventColor: '#7498BF',
    },
    {
      id: 6,
      name: 'Analyst/Consultant Meeting',
      eventColor: '#8A8E2B',
    },
    {
      id: 1,
      name: 'Company Visit',
      eventColor: '#958BBF',
    },
    {
      id: 2,
      name: 'Conference',
      eventColor: '#C67A9E',
    },
    {
      id: 3,
      name: 'Group',
      eventColor: '#7C9D7C',
    },
    {
      id: 4,
      name: 'One on One',
      eventColor: '#DBAA5A',
    },
    {
      id: 5,
      name: 'Other',
      eventColor: '#AA5051',
    },
    {
      id: ResourceIds.UNDEFINED_RESOURCE_ID,
      name: 'Undefined',
      eventColor: '#AAAAAA',
    },
    {
      id: ResourceIds.MY_MEETINGS_ID,
      name: 'My Meetings',
      eventColor: '#6871C1',
    },
  ];
events highlighted.PNG
events highlighted.PNG (60.95 KiB) Viewed 342 times

but when try to use filters on events, the event color is changing, turned to green.

event turned green.PNG
event turned green.PNG (56.69 KiB) Viewed 342 times

If I reload again event getting right color, SO I thought if there is a way to refresh Calendar UI to regain right color.


Post by alex.l »

Could you please share your code? It's not clear how did highlight events, as well how did you filter events.
I tested here https://bryntum.com/products/calendar/examples/basic/
It has colours defined for events and filter textfield that I tried to type and see if events change color after filtering.

All the best,
Alex


Post Reply