Event Types in the React Scheduler

Normal events

Normal events are appointments with defined start and end times that appear in the time slots. This example shows how to create and render a standard timed event.

Spanned Events

Spanned events extend beyond a single day. Events longer than 24 hours appear in the all-day row, while cross-day events under 24 hours are split and shown on each affected day.

For example, an event from April 20, 2026 at 4:00 AM to April 21, 2026 at 2:30 AM (less than 24 hours) is split into two segments and shown on both days.

Customize the rendering of the spanned events

By default, events longer than 24 hours render in the all-day row. To place them in time slots, set eventSettings.spannedEventPlacement="TimeSlot". This example shows long events rendered directly in the time grid.

All-Day Events

All-day events occupy the entire day (e.g., holidays) and appear in a dedicated all-day row below the date header. To convert a normal event to all-day, set the isAllDay field to true.