Feature Request: Calendar container customization and connected multi-day events

[Denny09310]

Hi! I’m using the Calendar/Event components from Blazor Blueprint and would like to suggest a couple of improvements that would make the calendar easier to customize and understand.

1. Add a ContainerClass property

It would be useful if the Calendar/Event component exposed a ContainerClass (or similar) property that is applied to the event container/grid element.

This would allow consumers to customize the calendar layout, such as controlling its height. For example:

<CalendarEvent ContainerClass="my-event-container" />

This would make it possible to customize the calendar container so that it can fill the available page height.

2. Visually connect events that span multiple days

The bigger issue is with events that span multiple days.

An event spanning several days is currently rendered as separate blocks in each day cell. Although these represent the same event, visually they look like independent events, which can be confusing.

For example, an event spanning November 27–29 currently appears as:

Nov 27    Nov 28    Nov 29
───────   ───────   ───────
70676226  70676226  70676226

It would be much clearer if the segments were visually connected across the days, similar to how multi-day events are commonly represented in calendar applications:

Nov 27    Nov 28    Nov 29
┌────────────────────────────┐
│ 70676226                   │
└────────────────────────────┘

Ideally, the component could render the event as one continuous visual element across the relevant day cells, or otherwise style the individual segments so that it is immediately clear that they belong to the same event.

The current behavior can make it look like there are multiple separate events with the same identifier/title rather than a single event spanning multiple days.

Thanks!

[mathewtaylor]

Both parts shipped in Components 4.0.0, now on NuGet.

1. ContainerClass — BbEventCalendar takes it and applies it to the scrolling grid element, which is what lets the calendar fill the available height:

<BbEventCalendar Class="bb:flex bb:h-full bb:flex-col"
                 ContainerClass="grow overflow-auto"
                 Events="@events" />

2. Multi-day events are one bar. A run that spans several days is drawn as a single continuous bar across the days it covers, in both the month and week views, rather than a chip repeated in every day cell. Runs that overlap stack into rows, longest at the top; runs that never touch share a row. A run leaving the visible range is squared off at the join, and both halves carry the whole event's dates in their aria-label rather than their own segment's, so a screen reader reads the event rather than the fragment.

The agenda view still lists each day separately — that is what a chronological list is for.

Thanks for the clear write-up; the before/after sketch made the second one easy to scope. Closing as delivered.