Page 1 of 1

[ANGULAR] color of events are changing while changing events dynamically.

Posted: Fri Feb 03, 2023 6:00 pm
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.


Re: [ANGULAR] color of events are changing while changing events dynamically.

Posted: Fri Feb 03, 2023 6:23 pm
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?


Re: [ANGULAR] color of events are changing while changing events dynamically.

Posted: Sat Feb 04, 2023 11:17 am
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 599 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 599 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 599 times

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


Re: [ANGULAR] color of events are changing while changing events dynamically.

Posted: Sat Feb 04, 2023 12:28 pm
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');
        }
    }
]

Re: [ANGULAR] color of events are changing while changing events dynamically.

Posted: Sat Feb 04, 2023 1:57 pm
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 593 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 593 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.


Re: [ANGULAR] color of events are changing while changing events dynamically.

Posted: Tue Feb 07, 2023 3:12 pm
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.