When using the MonthView widget to display overnight events, the widget is rendering the event over two calendar days. Our Product team would like for us to display an overnight event as an event that spans one day, and the overnight event should display the right arrow.
In playing with the css for overnight events, it looks like I can modify the style of the event to display to our specifications. However, if I modify the css to reduce the width of the overnight event, the events on the next day appear with blank spaces between the event.
Is there a way to achieve this behavior with the existing framework? If not, would it be possible to expose the isOverflow property so that it is configurable during the event rendering process?
Many thanks!
Re: Customize the Rendering of an Overnight Event
Posted: Fri Jan 14, 2022 11:59 am
by Animal
Am I correct in thinking that you would like a week long event to only show a bar on its starting date?
It's internal, but highly unlikely to change. I think it's internal only because we didn't think anybody would ever need to change this!
Re: Customize the Rendering of an Overnight Event
Posted: Fri Jan 14, 2022 2:33 pm
by cgodwin_lm
Good morning,
Not quite. For an event that starts on day 1 and ends on day 2, but the time span between these events is less than 24 hours, we want to display this event only on day 1. Currently, events that meet this use case are displayed on day 1 and day 2. For an example, if I have an event that starts on Thursday January 13, 2022 at 5 pm Eastern time, and ends on Friday January 14, 2022 at 5 am Eastern time, I want the event to render only on the January 13th cell of the MonthView widget.
If you can use just that to infer an ending date to the propagation of the event bar for a while, then I can get a more flexible version out in the next release.
So I have an implementation which looks like this:
Screenshot 2022-01-14 at 15.57.46.png (128.15 KiB) Viewed 1787 times
And testing with a customized propagate calculate which truncates to only 1 day, the familiar hackathon dataset where the "Hackathon 2019" event lasts 7 days looks like this:
Screenshot 2022-01-14 at 15.52.08.png (66.93 KiB) Viewed 1787 times
Re: Customize the Rendering of an Overnight Event
Posted: Fri Jan 14, 2022 10:20 pm
by cgodwin_lm
Perfect! This will allow us to support all use cases for displaying the events on the month view. I'm looking forward to using the updated configuration in the future release. Thank you so much for all of your help!
Re: Customize the Rendering of an Overnight Event
Posted: Mon Jan 17, 2022 3:24 pm
by Animal
Just to let you know that although I have augmented that method as described, I have left it as an @internal method.
I have exposed this operation as an event so that it is easier for app developers to get sight of the data, and just calculate a new value to inject back into the event. The docs look like this now:
Screenshot 2022-01-17 at 14.21.52.png (142.9 KiB) Viewed 1686 times
Re: Customize the Rendering of an Overnight Event
Posted: Tue Jan 18, 2022 2:32 pm
by cgodwin_lm
This is wonderful! Again, thank you so much for creating this solution in a short period of time. Looking forward to implementing this after the next Bryntum calendar release.
Re: Customize the Rendering of an Overnight Event
Posted: Fri Apr 08, 2022 10:03 pm
by cgodwin_lm
Hello!
I've finally gotten around to implementing this code in our month calendar widget, I'm encountering an issue.
I've updated our application to use the Bryntum calendar v.5.0.1. I've added the following block of code that renders the month calendar widget.