import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaProps, StylesApiProps } from '@mantine/core'; import { ScheduleLabelsOverride } from '../../labels'; import { DateLabelFormat, DateStringValue, DateTimeStringValue, ScheduleEventData, ScheduleMode, ScheduleResourceData, ScheduleResourceGroup, ScheduleViewLevel } from '../../types'; import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents'; import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent'; import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader'; import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect'; export type ResourcesDayViewStylesNames = 'resourcesDayView' | 'resourcesDayViewRoot' | 'resourcesDayViewInner' | 'resourcesDayViewTimeLabelsRow' | 'resourcesDayViewScrollArea' | 'resourcesDayViewCorner' | 'resourcesDayViewTimeLabel' | 'resourcesDayViewResourceLabel' | 'resourcesDayViewRow' | 'resourcesDayViewRowSlot' | 'resourcesDayViewRowSlots' | 'resourcesDayViewBackgroundEvent' | 'resourcesDayViewAllDayEvent' | 'resourcesDayViewCurrentTimeIndicator' | 'resourcesDayViewCurrentTimeIndicatorLine' | 'resourcesDayViewCurrentTimeIndicatorThumb' | 'resourcesDayViewCurrentTimeIndicatorTimeBubble' | 'resourcesDayViewEventWrapper' | 'resourcesDayViewResizeHandle' | 'resourcesDayViewGroupColumn' | 'resourcesDayViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames; export type ResourcesDayViewCssVariables = { resourcesDayView: '--resources-day-view-radius' | '--resources-day-view-slot-width' | '--resources-day-view-row-height' | '--resources-day-view-group-label-width'; }; export interface ResourcesDayViewProps extends BoxProps, StylesApiProps, ElementProps<'div'> { __staticSelector?: string; /** Day to display, Date object or date string in `YYYY-MM-DD` format */ date: Date | string; /** Called with the new date value when a date is selected */ onDateChange?: (value: DateStringValue) => void; /** List of resources to display as rows */ resources: ScheduleResourceData[]; /** Start time for the day view, in `HH:mm:ss` format @default 00:00:00 */ startTime?: string; /** End time for the day view, in `HH:mm:ss` format @default 23:59:59 */ endTime?: string; /** Number of minutes for each interval in the day view @default 60 */ intervalMinutes?: number; /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */ slotLabelFormat?: DateLabelFormat; /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */ radius?: MantineRadius; /** Time to scroll to on initial render, in `HH:mm:ss` format */ startScrollTime?: string; /** Props passed down to the `ScrollArea` component */ scrollAreaProps?: Partial & DataAttributes; /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */ locale?: string; /** If set, displays a vertical line indicating the current time. By default, displayed only for the current day. */ withCurrentTimeIndicator?: boolean; /** If set, the time indicator displays the current time in the bubble @default true */ withCurrentTimeBubble?: boolean; /** If set, the header is displayed @default true */ withHeader?: boolean; /** Called when view level select button is clicked */ onViewChange?: (view: ScheduleViewLevel) => void; /** Props passed to previous control */ previousControlProps?: React.ComponentProps<'button'> & DataAttributes; /** Props passed to next control */ nextControlProps?: React.ComponentProps<'button'> & DataAttributes; /** Props passed to today control */ todayControlProps?: React.ComponentProps<'button'> & DataAttributes; /** Props passed to view level select */ viewSelectProps?: Partial & DataAttributes; /** Dayjs format for header label @default 'MMMM D, YYYY' */ headerFormat?: DateLabelFormat; /** List of events to display */ events?: ScheduleEventData[]; /** Width of each time slot column @default 80px */ slotWidth?: React.CSSProperties['width']; /** Height of each resource row @default 64px */ rowHeight?: React.CSSProperties['height']; /** Labels override */ labels?: ScheduleLabelsOverride; /** If set to true, highlights business hours with white background @default false */ highlightBusinessHours?: boolean; /** Business hours range in `HH:mm:ss` format @default ['09:00:00', '17:00:00'] */ businessHours?: [string, string]; /** Function to customize event body */ renderEventBody?: RenderEventBody; /** Function to fully customize event rendering */ renderEvent?: RenderEvent; /** Function to customize resource label rendering */ renderResourceLabel?: (resource: ScheduleResourceData) => React.ReactNode; /** List of resource groups to display as a column to the left of resource labels */ groups?: ScheduleResourceGroup[]; /** Function to customize group label rendering */ renderGroupLabel?: (group: ScheduleResourceGroup) => React.ReactNode; /** Width of the group label column @default 80px */ groupLabelWidth?: React.CSSProperties['width']; /** If true, events can be dragged and dropped @default false */ withEventsDragAndDrop?: boolean; /** Called when event is dropped at new time, includes target resourceId */ onEventDrop?: (data: { eventId: string | number; newStart: DateTimeStringValue; newEnd: DateTimeStringValue; event: ScheduleEventData; resourceId?: string | number; }) => void; /** Function to determine if event can be dragged */ canDragEvent?: (event: ScheduleEventData) => boolean; /** Called when any event drag starts */ onEventDragStart?: (event: ScheduleEventData) => void; /** Called when any event drag ends */ onEventDragEnd?: () => void; /** Called when time slot is clicked, includes resourceId */ onTimeSlotClick?: (data: { slotStart: DateTimeStringValue; slotEnd: DateTimeStringValue; nativeEvent: React.MouseEvent; resourceId?: string | number; }) => void; /** Called when event is clicked */ onEventClick?: (event: ScheduleEventData, e: React.MouseEvent) => void; /** If set, enables drag-to-select time slot ranges @default false */ withDragSlotSelect?: boolean; /** Called when a time slot range is selected by dragging, includes resourceId */ onSlotDragEnd?: (data: { rangeStart: DateTimeStringValue; rangeEnd: DateTimeStringValue; resourceId?: string | number; }) => void; /** Interaction mode @default default */ mode?: ScheduleMode; /** Called when an external item is dropped onto the schedule */ onExternalEventDrop?: (data: { dataTransfer: DataTransfer; dropDateTime: DateTimeStringValue; resourceId?: string | number; }) => void; /** If true, events can be resized by dragging their left/right edges @default false */ withEventResize?: boolean; /** Called when event is resized */ onEventResize?: (data: { eventId: string | number; newStart: DateTimeStringValue; newEnd: DateTimeStringValue; event: ScheduleEventData; }) => void; /** Function to determine if event can be resized */ canResizeEvent?: (event: ScheduleEventData) => boolean; /** Max number of generated recurring instances per recurring series @default 2000 */ recurrenceExpansionLimit?: number; /** Maximum number of events visible per time slot before "+more" indicator shows, minimum value is 1 @default 2 */ maxEventsPerTimeSlot?: number; /** Props passed down to `MoreEvents` component */ moreEventsProps?: Partial; } export type ResourcesDayViewFactory = Factory<{ props: ResourcesDayViewProps; ref: HTMLDivElement; stylesNames: ResourcesDayViewStylesNames; vars: ResourcesDayViewCssVariables; }>; export declare const ResourcesDayView: import("@mantine/core").MantineComponent<{ props: ResourcesDayViewProps; ref: HTMLDivElement; stylesNames: ResourcesDayViewStylesNames; vars: ResourcesDayViewCssVariables; }>;