Time Grid Options
The week and day views share a configurable time grid: visible hours, slot density, snapping, business hours and the live now-indicator.
Options
| Prop | Default | Effect |
|---|---|---|
dayStartHour / dayEndHour | 0 / 24 | Crop the visible hour range. Events outside are clipped. |
slotDuration | 30 | Minutes between minor grid lines. |
snapDuration | 15 | Snapping step for dragging, resizing and selecting. |
hourHeight | 48 | Pixel height of one hour — the zoom level. |
scrollToHour | 7 | Hour scrolled into view when the grid opens. |
businessHours | null | true = Mon–Fri 9–17, or { days, startHour, endHour }. Non-working time is shaded. |
nowIndicator | true | The red current-time line on today’s column, updated every 30 s. |
weekNumbers | false | ISO week number in the gutter. |
hour12 | locale | Force 12/24-hour labels. |
Overlapping events
Overlapping events are packed into columns per collision cluster — the same algorithm family used by Google and Apple calendars. Freed columns are reused, so a long event and two short consecutive ones only need two columns.
Constraints
validRange limits navigation and interaction to a date window (days outside are dimmed and inert, navigation clamps). eventOverlap={false} rejects drops, resizes and quick-creates that would collide with another timed event — ideal for bookings.
Keyboard editing
Focus an event block (Tab) and use Alt+↑/↓ to move it by one snap step, Alt+←/→ to move it a day, and Alt+Shift+↑/↓ to resize. Changes are announced to screen readers via a live region.
All-day lane
All-day and multi-day events render in a dedicated lane above the grid, with bars spanning the exact days they cover and arrows when they continue beyond the visible week.