[REACT] How to set dynamic timeline based on events (timezone-handled) in Bryntum Calendar?

[neha]

Hi Bryntum Team,

We want the Calendar’s visible timeline (dayStartTime/dayEndTime) to dynamically adjust according to the earliest and latest events in the current view. Since Bryntum already handles time zone conversion for events, is there a recommended or built-in way to determine these boundaries and set the timeline dynamically using the data as displayed by Bryntum?

Any best practices or examples would be appreciated.
Thanks!

[Animal]

This example does that: https://bryntum.com/products/calendar/examples/dual-dayview/

Screenshot 2025-06-13 at 12.50.05.png (206.8 KiB) Viewed 1678 times

[Animal]

You could also add the following enhancement to the method you inject into the views:

Screenshot 2025-06-13 at 12.56.12.png (264.74 KiB) Viewed 1677 times

[Animal]

Obviously, when you add that to your DayView class, theres no primaryView, it will just be the view itself...

[neha]

Hi Bryntum Team,

Thanks for the reference to the “Fit Events”/“Zoom To Events” feature. I’ve reviewed the example and the code—this approach successfully scrolls and zooms to show the range of events in view.

However, our requirement is a bit different:

We want the calendar’s visible timeline itself (the hour window, not just the scroll position) to dynamically start at the earliest event’s start time and end at the latest event’s end time for the current range. In other words, we want the day/week timeline to be cropped so that only the relevant hours for scheduled events are visible.

The “Fit Events” option still displays the full 24-hour timeline, only scrolling to the relevant hours. We would like to actually resize the timeline window to fit the event times, so that there’s no empty/unused time visible before or after the events.

Is there a recommended way to achieve this—dynamically adjusting the dayStartTime and dayEndTime properties in the calendar config based on the loaded events (using the timezone-adjusted event data from Bryntum)? Or is there a built-in feature for this use-case?

[Animal]

Is there a recommended way to achieve this—dynamically adjusting the dayStartTime and dayEndTime properties in the calendar config based on the loaded events (using the timezone-adjusted event data from Bryntum)? Or is there a built-in feature for this use-case?

Yes. Illustrated in the post above. In which I posted this image:

Screenshot 2025-06-13 at 12.56.12.png (264.74 KiB) Viewed 1663 times

[neha]

this is fine but it's not fit the hours or not able to clearly visible the hours

[alex.l]

Hi,

Please describe your problem in format:
Steps to reproduce, actual result, expected result.
Same as Animal, I don't understand your request. For it feels like a demo he provided exactly does that you requested - it calculates visible time according to provided events set.

[neha]

Hi,

Steps to reproduce:

Add an event with a very short duration (e.g., 12:45 AM – 1:00 AM) in the calendar.

Set the calendar configuration to use

 fitHours: { minHeight: 60 }  

(or another value).

Open the Week view.

Actual result:

The event appears very small—almost unreadable and difficult to interact with (see first screenshot).

When I increase fitHours.minHeight to 100 or higher, the short event is more visible (see second screenshot), but the calendar layout now shows a lot of empty space and looks visually unbalanced—especially on days with only one or two short events.

Expected result:

Short-duration events should always be clearly visible and usable, even if they are the only event within the visible range.

The calendar layout should remain visually balanced and not display excessive empty space when there are only a few hours/events scheduled.

Request for guidance:

Is there a better way to ensure short-duration events are always readable and clickable, without causing the calendar to look “stretched” or awkward when there are few events?

Is there a config to set a minimum event block height that isn’t directly tied to the hour height or fitHours, so that the hour rows don’t have to be made excessively tall?

Or is there a recommended UI pattern for these cases in Bryntum Calendar?

Summary:
I’ve followed the docs and your suggestion to use fitHours with a minHeight property. While this improves event visibility, it introduces new UI/UX issues when the schedule is sparse. I’d appreciate any best practices or configuration tips you can provide.

[Animal]

There's a limit to what is physically possible.

If you ask for a min hour height of 60, then a 15 minute event will be 15 pixels high.

What should we do about that? We already add s special 'b-short-event' class which shrinks the font size a little.

Maybe you should render the event without that line break in it. which makes it unreadable.

Below is a 15 minute event in the "Basic" example with the fitHours set to { minHeight : 60 }

As you can see, it is only 15 pixels tall, but perfectly legible:

Screenshot 2025-06-17 at 16.41.26.png (819.64 KiB) Viewed 1573 times