Our powerful JS Calendar component


Post by cgodwin_lm »

Hello,

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!

Attachments
1.13.22_overnight_event_current_rendering.png
1.13.22_overnight_event_current_rendering.png (96.44 KiB) Viewed 1773 times
1.13.22_overnight_event_proposed_rendering.png
1.13.22_overnight_event_proposed_rendering.png (96.11 KiB) Viewed 1773 times

Post by Animal »

Am I correct in thinking that you would like a week long event to only show a bar on its starting date?


Post by Animal »

I think this is what you could use: https://www.bryntum.com/docs/calendar/api/Calendar/widget/MonthView#function-calculatePropagateEndDate

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!


Post 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.


Post by Animal »

This Should be solvable using https://www.bryntum.com/docs/calendar/api/Calendar/widget/MonthView#function-calculatePropagateEndDate but it's not quite flexible enough. It only gets passed the ending date, not the full info about the event and where it is in the flow.

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.

I think that needs to be passed the full context to make the decision. Here is a ticket: https://github.com/bryntum/support/issues/4024


Post by Animal »

So I have an implementation which looks like this:

Screenshot 2022-01-14 at 15.57.46.png
Screenshot 2022-01-14 at 15.57.46.png (128.15 KiB) Viewed 1740 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
Screenshot 2022-01-14 at 15.52.08.png (66.93 KiB) Viewed 1740 times

Post 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!


Post 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
Screenshot 2022-01-17 at 14.21.52.png (142.9 KiB) Viewed 1639 times

Post 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.


Post 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.

                        if (event.eventEndDate < Ext.Date.add(new Date(event.date), Ext.Date.DAY, 2)) {
                            event.propagateEndDate = Ext.Date.add(Ext.Date.clearTime(new Date(event.eventRecord.data.startDate)), Ext.Date.DAY, 1);
                        }
                    }
 

For overnight events, the calendar is rendering these event as one day, but the right arrow is not displaying.

04.08.22_month_widget_view_bug.png
04.08.22_month_widget_view_bug.png (6.54 KiB) Viewed 1269 times

I've tried setting these properties after setting the event.propagateEndDate value, and the right arrow is still not appearing.

event.overflows = true;
event.isAllDay = false;
event.overflows = false;

Am I missing something or is this a possible bug?

Many thanks!


Post Reply