Is there any way to declare an array of resources, but disable its grouping? Let’s say I have a week view where I’m using users as resources, which can be added or removed dynamically. When the user count is low, everything fits nicely in the screen, but when there are several users being shown at the same time, no matter if you group by date or by resource, a lot of space is used.
The desired look would be something similar to what Google Calendar does, where all the events are shown together and differentiated by their resource color alone:
That’s not exactly the desired result, because then in a non trivial case like in the picture above, where every user has events pretty much every day, the space is distributed weirdly.
What I want to achieve would be similar to having a groupBy=‘none’ prop, where all the events are shown under their own date next to any other events from with other resources, without any subdivisions, similar to how Google Calendar displays the events of different users (see the screenshot above).
I understand that this can be achieved with custom properties, treating them as resources and using them in conjunction with renderScheduleEvent to give them the appropiate color of the pseudoresource, but this feels like redoing a lot of logic that the Eventcalendar already supports natively via resources for that visual change, and complicates dynamic changes that should be easy (for example, grouping by resource on a day type view, and not grouping on a week type view).
Currently, resources are only not rendered if they’re not passed to the calendar. However, you don’t need renderScheduleEvent to set colors. Events can have colors assigned explicitly. You can preprocess your events before passing them to the calendar and set their color based on the corresponding resource.
Thanks so much for the help pointing towards the solution @gabi ! I’m new to the library and I am still discovering all the nooks and crannies. There’s quite a bit of custom logic to implement, but I’m pretty sure that using custom dynamic event colors should directly remove the need of renderScheduleEvent.
However, I’ve found that while the docs say the color property of a MbscCalendarEvent is the Background color of the event, the implementation is different for the schedule and the calendar view. In the schedule view, this property allows anything that the css background-color property would accept, such as a gradient, because it sets the background-color directly with the given value. On the other hand, the Calendar view first sets the color property with the provided value, then uses background-color: currentColor to set the background. This is problematic, as color doesn’t accept nearly as many types of values as background-color does, and thus this intermediate step renders them useless before setting the background-color, removing a lot of power from the event property.
I don’t know if this should be a new topic to discuss it specifically, let me know!
