react-calendar category filter not working properly

[CollinHunterGOC]

Disclaimer

Yes

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-calendar

Contributor(s)

@Abderahman88, @Eli-Schei, @hugoabernier, @joaojmendes, @derhallim, @mohammadamer, @nanddeepn

What happened?

When using the category filter(s), events show random (inconsistent) colors, and sometimes an event tied to a particular category will not show unless you play with the category filter selections using different combinations (e.g. toggle Show All, select various categories).

Steps to reproduce

1. Navigate to the calendar page
2. Click the Calendar Category dropdown (checkboxes)
3. Toggle the Select All
4. Check / Uncheck different categories
5. Some events will appear, while others do not, depending on the category filter selection. Colors will change for the different events depending on the selection combination.

Expected behavior

I would expect that click Select All will return all events and each separate category when selected shows all the events associated with that category. I would have suspected initially that category would be associated with a unique color.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

v18.20.3

What version of Node.js is required by the sample?

v18

Paste the results of SPFx doctor

√ SharePoint Framework v1.20.0
√ Node v18.20.3
√ yo v4.3.1
√ gulp-cli v3.0.0
× typescript v4.7.4 installed in the project

Additional environment details

No response

[mohammadamer]

@CollinHunterGOC
I'm on it and will provide an update shortly.
@hugoabernier Could you please assign the issue to me?