ResourcesMonthView custom header
Set withHeader={false} to hide the default header and use ScheduleHeader to build a custom header with navigation controls.
schedule/resources-month-view
22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
ResourcesMonthView radius prop
Use the radius prop to customize the border radius of the ResourcesMonthView component.
ResourcesMonthView scrollAreaProps
Use the scrollAreaProps prop to customize the scroll area behavior.
ResourcesMonthView component overview
ResourcesMonthView displays a month grid where each day cell contains resource lanes. Events are shown within their resource's lane, making it easy to see resource utilization across the month.
ResourcesMonthView static mode
Set mode="static" to disable all interactions on the ResourcesMonthView component.
ResourcesMonthView drag and drop
Enable drag and drop with the withEventsDragAndDrop prop. The onEventDrop callback receives the resourceId of the target resource, allowing you to update the event's resource assignment.
ResourcesMonthView event resize
Enable event resizing with the withEventResize prop. Events can be resized by dragging their start or end edges. The onEventResize callback is called with the updated event start and end dates.
ResourcesMonthView resize snapping behavior
Resizing snaps to whole days and preserves the event's original time of day. Dragging the end edge of an event that ends at 17:00 onto another day keeps the 17:00 end time. Events that end exactly at midnight are treated as ending on the previous day, so their end stays exclusive after a resize.
ResourcesMonthView resize handle rendering
Resize handles are rendered only on the edges where the event actually starts and ends. An event that continues outside the displayed month, or that is split across rows, does not render a handle on those edges. Events hidden behind the "+N more" indicator cannot be resized.
ResourcesMonthView resize does not change resource
Resizing never changes the event's resource. Drag the event itself to move it to another resource. Use canResizeEvent to control which events can be resized.
ResourcesMonthView event form creation
Click a day cell to create a new event, or click an existing event to edit it. Use withDragSlotSelect and onSlotDragEnd to allow drag-to-create across day cells. The onSlotDragEnd callback includes the resourceId of the resource where the drag started.
ResourcesMonthView renderEvent prop
Use the renderEvent prop to customize how events are rendered.
ResourcesMonthView renderResourceLabel prop
Use the renderResourceLabel prop to customize how resource labels are rendered in the row headers.
ResourcesMonthView resource groups
Use the groups prop to group resources under labeled headers. The group labels are displayed as a column to the left of resource labels, spanning vertically across their resources. Use renderGroupLabel to customize group label rendering and groupLabelWidth to control the group column width.
ResourcesMonthView localization
Set the locale prop to change the language. Use the labels prop to override built-in labels.
ResourcesMonthView recurring events
ResourcesMonthView automatically expands recurring events for the visible month. See the Recurring events guide at /schedule/recurring-events for full documentation.
ResourcesMonthView maxEventsPerTimeSlot prop
Use the maxEventsPerTimeSlot prop to limit the number of events visible in each cell. When there are more events than the limit, a "+more" indicator is shown.
ResourcesMonthView dayWidth and rowHeight props
Use the dayWidth and rowHeight props to customize the dimensions of day columns and resource rows.
ResourcesMonthView startScrollDate prop
Use the startScrollDate prop to scroll to a specific date on initial render. This is useful when the month has many days and you want the view to start at a specific date, for example today.
ResourcesMonthView hide weekend days
Set withWeekendDays={false} to hide weekend day columns from the month grid.
ResourcesMonthView more events indicator
When a day cell has more events than maxEventsPerTimeSlot, a "+X more" indicator is shown. Click the indicator to see all events for that day.
ResourcesMonthView moreEventsProps
Use the moreEventsProps prop to customize the more events dropdown, for example to use a modal instead of a popover.