[ANGULAR] Custom HTML UI for events on Calendar's Month View

[accounts@projul.com]

Hi, Before using bryntum we were using the fullcalendar js plugin & customized it as per our needs. Currently we are rewriting our scheduling module using bryntum controls. On calendar month view we have the capability to view the tasks in compact & expanded mode. Compact mode is what by default we can see events on bryntum calendar month view. But for expanded view we need the task event tickets with customized UI. I have attached the screenshots for better understanding. Please let me know how we can achieve the similar thing.

[marcio]

Hi,

I believe that eventRenderer is what you're looking for, with that, you can render custom HTML based on some other variables (whether it is on compact view or not).

https://www.bryntum.com/docs/calendar/api/Calendar/widget/CalendarRow#config-eventRenderer

[Animal]

It's actually going to be a bit more difficult than that.

What did your original product do if the events overflowed the available vertical space in the cell?

As the Calendar stands, event bars have a configurable fixed height, and it calculates how many will fit in a cell before the +n more button is shown.

Here, it calculates that only seven event bars (or six plus the +n more button which is exactly the same size as an event bar)

Screenshot 2022-07-19 at 06.38.30.png (32.98 KiB) Viewed 478 times

With variable height event bars, each cell would need to have this value calculated separately. This is a possible feature request, but would need some more detail.

[Animal]

OK, I was assuming that single event bars or single cells would be changed to the expanded mode. That would be difficult.

If you toggle to all the events in the month UI being the expanded version, then this is just setting the eventHeight value and using a custom renderer which knows what mode the UI is in.

[accounts@projul.com]

Thank you very much, this is what i think will work, using eventHeight value with custom eventRenderer. Enabling the expanded view for calendar should show all the events on the calendar month view expanded, not only few.
If events overflow in a cell then we are currently showing them in stacked way inside the cell, cell height increased accordingly. We don't need the +n more thing. How i can show events in stacked way in a cell without +n more thing ?

[Animal]

https://www.bryntum.com/docs/calendar/api/Calendar/widget/MonthView#config-autoRowHeight

See https://bryntum.com/examples/calendar/bigdataset/

Screenshot 2022-07-19 at 15.47.54.png (55.93 KiB) Viewed 462 times