apps/mantine.dev/src/pages/schedule/day-view.mdx
import { DayViewDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.DayView);
DayView displays events for a single day with time slots. It supports all-day events, overlapping events, drag and drop, custom time ranges, and more.
<Demo data={DayViewDemos.usage} />Use startTime and endTime props to set the visible time range. Times should be in HH:mm:ss format.
This is useful for focusing on specific hours like business hours.
Use startScrollTime prop to set the initial scroll position to a specific time.
The value should be in HH:mm:ss format. This is useful when you want the view to
open at a specific time (e.g., business hours start) instead of midnight.
intervalMinutes prop controls the granularity of time slots. Default is 15 minutes.
Common values are 15, 30, or 60 minutes.
When intervalMinutes is smaller than 60, set withSubHourGridLines={false} to display only one
grid line per hour while keeping the smaller interval for creating and resizing events. This is useful
to achieve a Google Calendar like layout: events snap to 15 or 30 minutes increments, but the grid
stays clean with hourly lines.
Events that span the entire day are displayed in a dedicated all-day section at the top. When there are more than 2 all-day events, the component shows a "More events" indicator.
<Demo data={DayViewDemos.allDayEvents} />When multiple events overlap in time, they are automatically positioned side by side with appropriate widths and offsets.
<Demo data={DayViewDemos.overlappingEvents} />Set withCurrentTimeIndicator to display a line showing the current time.
By default, it's only shown for the current day. Set withCurrentTimeBubble={false}
to hide the time bubble.
@mantine/schedule works with timezone-agnostic YYYY-MM-DD HH:mm:ss strings and does not
perform any timezone conversions on its own. By default, the current time indicator is positioned
based on the user's local time.
To display the indicator in a different timezone, use the getCurrentTime prop. It is a function
that returns the current time and is called on every tick, so the indicator keeps updating
automatically. In the example below, the current time is converted to the selected timezone with
the dayjs timezone plugin – switch the timezone to
see the indicator and the time bubble move accordingly:
Use highlightBusinessHours and businessHours props to visually distinguish business hours
from non-business hours. The businessHours prop accepts a tuple with start and end times
in HH:mm:ss format.
Use getTimeSlotProps to add custom props to individual time slots based on their time range.
The function receives { start, end } datetime strings in YYYY-MM-DD HH:mm:ss format
and should return an object of props to spread onto the slot element, or undefined.
This is useful for setting data-business-hours on a custom range that differs from the
default 9:00–17:00, or for attaching custom event handlers to specific slots.
Event handlers like onClick returned by getTimeSlotProps are composed with internal handlers
(onTimeSlotClick) – both will fire without overriding each other.
Customize the height of time slots and the all-day section using slotHeight and
allDaySlotHeight props. The slotHeight represents the height of a 1-hour slot.
Set withHeader={false} to hide the header controls. This is useful when you want to
build a custom header or embed the view in a larger component.
You can build a custom header using ScheduleHeader compound components combined with your own controls.
Set withHeader={false} on the view and compose the header externally.
Use headerFormat prop to customize the date format in the header. The format uses
dayjs format syntax or can be a function that returns a formatted string.
slotLabelFormat prop controls the format of time labels. It accepts a dayjs format string
or a function that returns a formatted string.
Use radius prop to control the border radius of the day view container.
Enable drag and drop by setting withDragDrop prop. Use onEventDrop callback to handle
event drops. All-day events cannot be dragged.
Use onExternalEventDrop to allow dragging items from outside the component into
the schedule. External items must set data in dataTransfer during their onDragStart.
The callback receives the DataTransfer object and the drop target datetime.
Combine onExternalEventDrop with withEventsDragAndDrop to enable bidirectional
drag and drop. Items dragged from the sidebar are removed from the list and added
to the schedule. Events dragged from the schedule back to the sidebar are removed
from the schedule. The schedule sets application/json with { eventId } in
dataTransfer when an event is dragged, which the sidebar drop zone reads to
identify the event.
Use canDragEvent callback to control which events can be dragged. This is useful for
implementing locked or read-only events.
Enable event resizing by setting withEventResize prop. Users can drag the top or bottom
edge of an event to adjust its start or end time. Use onEventResize callback to handle
the resize.
Use canResizeEvent callback to control which events can be resized. This is useful for
implementing locked or read-only events that should not be resizable.
Use renderEventBody prop to customize how events are displayed. This allows you to
add custom icons, badges, or any other content to events.
Use renderEvent prop to fully customize event rendering. This function receives the event
data as the first argument and all props that would be passed to the event root element
(including children) as the second argument, allowing you to wrap events in custom components
like HoverCard, Tooltip, or custom wrappers.
DayView automatically expands recurring events for the visible day. See Recurring events guide for full documentation.
<Demo data={DayViewDemos.recurringEvents} />Set display="background" on an event to render it as a full-width, semi-transparent,
non-interactive block behind regular events. Background events are useful for marking
unavailability, lunch breaks, focus time, or other blocked periods. They cannot be
clicked, dragged, or resized.
Use Styles API to customize background event appearance and prevent dropping regular events into blocked time ranges. This example uses diagonal red lines to indicate blocked time and rejects drops that overlap with background events.
<Demo data={DayViewDemos.backgroundEventsCustomStyle} />Set withAgenda prop to display an "Agenda" button in the header. When clicked, it opens
an AgendaView showing events for the current day as a list.
Set mode="static" to disable all interactions. In static mode, events and time slots
are not clickable, draggable, or hoverable. This is useful for read-only displays or reports.
Use labels prop to override default labels for internationalization or custom text.
Use locale prop to set the dayjs locale for date formatting.
Combine it with labels prop to translate all UI text.
Control the date externally using the date prop and onDateChange callback.
This allows you to build custom navigation or integrate with other components.
Use onViewChange prop to handle view level changes when the user clicks on view selector buttons.
Set withDragSlotSelect prop to allow users to drag across time slots to select a time range.
When the drag ends, the onSlotDragEnd callback is called with the range start and end dates.
Combined with onTimeSlotClick, onAllDaySlotClick, and onEventClick callbacks, this enables
a complete event creation and editing experience.
DayView uses @container queries for responsive styles. The component automatically adjusts its layout based on the container width, hiding labels and reducing padding on smaller screens. Container queries are supported in all modern browsers.
In the DayView component, focus is managed to provide an efficient keyboard navigation experience:
tabIndex={0})tabIndex={-1} and can only be reached via arrow key navigation<KeyboardEventsTable data={[ { key: 'ArrowDown', description: 'Focuses next time slot', }, { key: 'ArrowUp', description: 'Focuses previous time slot', }, ]} />
Each time slot button has an aria-label attribute with the complete slot information including the time range (e.g., "Time slot 08:00:00 - 09:00:00"). This provides screen reader users with complete context about each slot.