ScheduleEventBase interface - all required and optional fields
ScheduleEventBase defines common fields shared by all event types. Required fields: id (string | number, unique event identifier), title (string, displayed in month/week/day views), start (Date | DateTimeStringValue in YYYY-MM-DD HH:mm:ss format), end (Date | DateTimeStringValue), color (MantineColor, key of theme.colors or valid CSS color). Optional fields: variant (default 'light', accepts 'filled' | 'light'), display (default 'default', accepts 'default' | 'background' - background events render as full-width blocks behind regular events and are non-interactive unless withInteractiveBackgroundEvents is set), payload (EventPayload for user-defined additional data not used internally).
ScheduleSingleEventData - one-off event without recurrence
ScheduleSingleEventData represents a one-off event without recurrence. It extends ScheduleEventBase with no additional required fields. Example: { id: 'meeting-1', title: 'Team sync', start: '2024-01-15 10:00:00', end: '2024-01-15 11:00:00', color: 'blue' }.
ScheduleRecurringSeriesEventData - recurring series with RFC 5545 rule
ScheduleRecurringSeriesEventData is a source event for a recurring series. It extends ScheduleEventBase and adds a recurrence field containing: rrule (required, RFC 5545 recurrence rule string, e.g. 'FREQ=WEEKLY;BYDAY=MO;COUNT=12'), exdate (optional, array of exception datetimes in YYYY-MM-DD HH:mm:ss format), dtstart (optional, explicit series start datetime). Example: { id: 'weekly-planning', title: 'Weekly planning', start: '2024-01-15 10:00:00', end: '2024-01-15 11:00:00', color: 'blue', recurrence: { rrule: 'FREQ=WEEKLY;BYDAY=MO;COUNT=12', exdate: ['2024-02-12 10:00:00'], dtstart: '2024-01-15 10:00:00' } }.
ScheduleRecurringOverrideEventData - override single occurrence in series
ScheduleRecurringOverrideEventData replaces a single generated occurrence from a series. It extends ScheduleEventBase and adds: recurringEventId (required, id of parent series event), recurrenceId (required, original occurrence datetime in YYYY-MM-DD HH:mm:ss format). Example: { id: 'weekly-planning-override', title: 'Weekly planning (moved)', start: '2024-01-17 16:00:00', end: '2024-01-17 17:00:00', color: 'grape', recurringEventId: 'weekly-planning', recurrenceId: '2024-01-15 10:00:00' }.
EventPayload - attaching arbitrary data to events
The payload field on ScheduleEventBase allows attaching arbitrary application-specific data to events. The payload is not used internally by the library but can be accessed in callbacks (onEventClick, onEventDrop, etc.) and custom event renderers (renderEventBody). EventPayload is typed as Record<PropertyKey, any>. Typically you pass your own payload type as a generic argument to ScheduleEventData<MyPayload>. Example: ScheduleEventData<{description: string, attendees: string[], location?: string}>.
RecurringInstanceMeta - metadata for generated recurring occurrences
When a recurring series is expanded for the visible date range, each generated event includes a recurringInstance metadata object (added by the library, not user-set). Fields: isRecurringInstance (boolean, true if event is generated from recurrence rule), recurringEventId (string | number, parent series event id), recurrenceId (DateTimeStringValue, original occurrence datetime key), originalStart (DateTimeStringValue, original occurrence start before drag/drop updates), originalEnd (DateTimeStringValue, original occurrence end before drag/drop updates). Access in callbacks and custom renderers to distinguish generated occurrences from regular events.
onEventClick callback payload
onEventClick callback has signature: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void. Called when event is clicked in any view. event parameter includes recurringInstance metadata if it is a generated occurrence. e is the native React mouse event.
onEventDrop callback payload - requires withEventsDragAndDrop
onEventDrop callback has signature: (data: {eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData}) => void. Called when event is dropped after drag. eventId is the dropped event id (for generated recurring instances this is synthesized occurrence id '<seriesId>::<recurrenceId>', use event.recurringInstance?.recurringEventId to get parent series id). newStart and newEnd are new datetimes in YYYY-MM-DD HH:mm:ss format. event includes recurringInstance metadata if applicable. Requires withEventsDragAndDrop prop on view.
onEventResize callback payload - requires withEventResize
onEventResize callback has signature: (data: {eventId: string | number, newStart: DateTimeStringValue, newEnd: DateTimeStringValue, event: ScheduleEventData}) => void. Called when event is resized by dragging its top or bottom edge. Payload shape is identical to onEventDrop, including the caveat about eventId for generated recurring instances. Requires withEventResize prop on view.
onEventDragStart and onEventDragEnd callbacks
onEventDragStart callback has signature: (event: ScheduleEventData) => void. onEventDragEnd callback has signature: () => void. onEventDragStart is called when event drag starts. onEventDragEnd is called both for successful drops and cancelled drags; use onEventDrop if you need the new position.
onTimeSlotClick callback payload - for DayView and WeekView
onTimeSlotClick callback has signature: (data: {slotStart: DateTimeStringValue, slotEnd: DateTimeStringValue, nativeEvent: React.MouseEvent<HTMLButtonElement>}) => void. Called when time slot is clicked in DayView or WeekView. slotStart and slotEnd are the slot range in YYYY-MM-DD HH:mm:ss format. Slot length is controlled by view's intervalMinutes prop.
onAllDaySlotClick callback payload - for DayView and WeekView
onAllDaySlotClick callback has signature: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void. Called when all-day slot is clicked in DayView or WeekView. date parameter is the clicked date in YYYY-MM-DD format.
onDayClick callback payload - for MonthView and YearView
onDayClick callback has signature: (date: DateStringValue, event: React.MouseEvent<HTMLButtonElement>) => void. Called when day is clicked in MonthView or YearView. date parameter is the clicked date in YYYY-MM-DD format.
onSlotDragEnd callback payload - requires withDragSlotSelect
onSlotDragEnd callback has signature: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void. Called when slot range is selected by dragging across time slots or day cells. rangeStart and rangeEnd are the selected range in YYYY-MM-DD HH:mm:ss format. Requires withDragSlotSelect prop.
onExternalEventDrop callback payload - for external drag and drop
onExternalEventDrop callback has signature: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void. Called when item is dragged from outside schedule and dropped onto slot. dataTransfer is the native DataTransfer object set by external item during onDragStart handler - read custom data with dataTransfer.getData(type). dropDateTime is drop target datetime in YYYY-MM-DD HH:mm:ss format.
canDragEvent and canResizeEvent permission callbacks
canDragEvent callback has signature: (event: ScheduleEventData) => boolean. canResizeEvent callback has signature: (event: ScheduleEventData) => boolean. These are permission callbacks - return false to prevent dragging or resizing for a specific event.
Date and time string formats used in schedule
Schedule components use two consistent string formats: DateStringValue is YYYY-MM-DD format (e.g. 2024-01-15). DateTimeStringValue is YYYY-MM-DD HH:mm:ss format (e.g. 2024-01-15 10:00:00). These types are shared across @mantine/dates and @mantine/schedule packages and exported from both.