Overflow
Count hidden events and show them on demand.
A day-grid cell fits maxEventsPerDay rows of bars. Bars in further rows are hidden, and each day they cross counts them:
| Day field | Description |
|---|---|
hiddenCount | Hidden bars crossing this day. |
hasMore | hiddenCount > 0, or the view's dayOverflow returned true. |
events | Every event on the day, including hidden ones, in order. |
DayGridViewOverflow renders a button only when hasMore is true. It does nothing by itself: open a popover, a drawer
or the day view from its click. The calendar has no built-in popover.
Example
Render the overflow button inside each DayGridViewDay, and show the day's events in a dialog:
export const DayOverflow = (props: { day: Calendar_DayGridDay<Booking> }) => {
const [open, setOpen] = createSignal(false);
return (
<>
<DayGridViewOverflow day={props.day} onClick={() => setOpen(true)}>
{props.day.hiddenCount > 0 ? `${props.day.hiddenCount} more` : 'More'}
</DayGridViewOverflow>
<Show when={open()}>
<dialog open onClose={() => setOpen(false)}>
<h3>{props.day.date.toLocaleString('en-US', { dateStyle: 'full' })}</h3>
<ul>
<For each={props.day.events}>{event => <li>{event.data.title}</li>}</For>
</ul>
<button onClick={() => setOpen(false)}>Close</button>
</dialog>
</Show>
</>
);
};More than you loaded
If you load a limited number of events per day, the calendar cannot count the rest. Mark those days with
dayOverflow, and hasMore turns on even when nothing is hidden:
export const month = dayGridView({
period: 'month',
maxEventsPerDay: 3,
dayOverflow: (date: Temporal.PlainDate) => truncatedDays.has(date.toString()),
});hiddenCount then stays 0, so label the button without a number for those days.