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!
I’m jumping in to help you with your latest question.
I’ve confirmed this behavior, and currently the color property for Eventcalendar labels does not offer the same flexibility as background-color in case of the other views.
For now, if advanced label background customization is required, the recommended workaround is to use the renderLabel option to override the default rendering.
Thanks for the answer @szili1 ! Well, that means reimplementing some of the great features the library has by default and will complicate things quite a bit, but I think it is doable. Could this feature be considered for implementation for the sake of parity between the different views?
Now, when implementing this feature with my custom label I’ve found that when an event spans several days and the last of them is the first one of the week, that portion of the event isn’t visible. You can check this live in the example you provided with the event Friends Binge MarathonCalendar Custom event labels Fullscreen Example | Mobiscroll (the example seems to be dynamically generated based on the current date, but at the moment of posting this the event spans the 31st of Jan and the 1st of Feb, Sat and Sun respectively). The event is clearly present on the last day, as it is clickable and makes the Toast appear. The class responsible for this behavior seems to be:
But I don’t feel fully comfortable overriding it without knowing everything it does, as it could have unintended cascading consequences.
Again, if this goes out of scope we can create a new topic to discuss it, but this is a blocking issue for my team while we are currently discussing fully implementing the library.
I’ll pass your request about calendar label color customization on to the dev team and make sure your feedback is added.
I’ve looked into your question, and it seems this is a bug on our end. I’ve reported it to the dev team and attached this thread to the issue, so you’ll be notified once there are updates.
It looks like this bug only affects two-day events. For now, you can use a workaround by overriding the opacity in the .mbsc-calendar-label-hide-resize-end.mbsc-calendar-text CSS rule. This change may cause some visual side effects, but if you’re using custom labels, those side effects won’t be visible.
