Event Timeline - Presets
Choose a time-scale preset to display events at daily, weekly, monthly, or yearly granularity.
Day and hour preset
The dayAndHour preset displays a few days with hourly granularity—ideal for scheduling tasks within specific hours.
Use the presetConfig prop to limit the hours displayed for each day. The prop is keyed by preset name, and only the dayAndHour preset supports an hour range: presetConfig={{ dayAndHour: { startTime: 8, endTime: 20 } }} displays the 8:00 AM–8:00 PM window (startTime is inclusive, endTime exclusive: the last rendered hour cell is 7:00 PM, and an event ending exactly at 8:00 PM is still fully visible).
Events that fall entirely within the hidden hours are not rendered at all. An event whose start or end falls inside the hidden hours is clipped to the window edge and flagged with the data-starting-before-edge / data-ending-after-edge attributes, like an event overflowing the visible date range. An event that only spans the hidden hours (for example a multi-day rental) keeps both edges and renders as a single continuous bar, with the hidden hours simply removed from the axis.
The Event Calendar's day and week views support the same hour range through their viewConfig prop.
Day and month preset
The dayAndMonth preset displays several weeks with daily granularity grouped by month—ideal for bookings and short-term planning.
Day and week preset
The dayAndWeek preset displays several months with weekly granularity—ideal for project planning and sprint tracking.
Month and year preset
The monthAndYear preset displays several years with monthly granularity—ideal for long-term roadmaps and strategic planning.
Year preset
The year preset displays decades with yearly granularity—ideal for high-level overviews of multi-year initiatives.
Zoom in and out 🚧
With this feature, users would be able to zoom in and out of the timeline to adjust the visible time range.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.