import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaProps, StylesApiProps } from '@mantine/core'; import { ScheduleLabelsOverride } from '../../labels'; import { DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleResourceData, ScheduleResourceGroup, ScheduleViewLevel } from '../../types'; import { MoreEventsProps, MoreEventsStylesNames } from '../MoreEvents/MoreEvents'; import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent'; import { MonthYearSelectProps } from '../ScheduleHeader/MonthYearSelect/MonthYearSelect'; import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader'; import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect'; export type ResourcesMonthViewStylesNames = 'resourcesMonthView' | 'resourcesMonthViewRoot' | 'resourcesMonthViewScrollArea' | 'resourcesMonthViewDayLabelsRow' | 'resourcesMonthViewCorner' | 'resourcesMonthViewDayLabel' | 'resourcesMonthViewDayLabelWeekday' | 'resourcesMonthViewDayLabelNumber' | 'resourcesMonthViewRow' | 'resourcesMonthViewResourceLabel' | 'resourcesMonthViewRowSlots' | 'resourcesMonthViewCell' | 'resourcesMonthViewInner' | 'resourcesMonthViewGroupColumn' | 'resourcesMonthViewGroupColumnEmpty' | MoreEventsStylesNames | CombinedScheduleHeaderStylesNames; export type ResourcesMonthViewCssVariables = { resourcesMonthView: '--resources-month-view-radius' | '--resources-month-view-day-width' | '--resources-month-view-row-height' | '--resources-month-view-group-label-width'; }; export interface ResourcesMonthViewProps extends BoxProps, StylesApiProps, ElementProps<'div'> { __staticSelector?: string; /** Date 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[]; /** Locale passed down to dayjs */ locale?: string; /** `dayjs` format for weekdays in day column headers @default 'dd' */ weekdayFormat?: DateLabelFormat; /** Indices of weekend days */ weekendDays?: DayOfWeek[]; /** If set to false, weekend days are hidden @default true */ withWeekendDays?: boolean; /** Date to scroll to on initial render, in `YYYY-MM-DD` format */ startScrollDate?: string; /** Called when a cell is clicked, includes resourceId */ onDayClick?: (data: { date: DateStringValue; nativeEvent: React.MouseEvent; resourceId?: string | number; }) => void; /** If set, highlights the current day @default true */ highlightToday?: boolean; /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */ radius?: MantineRadius; /** If set, the header is displayed @default true */ withHeader?: boolean; /** Props passed down to `MonthYearSelect` component */ monthYearSelectProps?: Partial; /** 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; /** Events to display */ events?: ScheduleEventData[]; /** Width of each day column @default 40px */ dayWidth?: React.CSSProperties['width']; /** Height of each resource row @default 48px */ rowHeight?: React.CSSProperties['height']; /** 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, 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 event is clicked */ onEventClick?: (event: ScheduleEventData, e: React.MouseEvent) => void; /** If set, enables drag-to-select day ranges @default false */ withDragSlotSelect?: boolean; /** Called when a day range is selected by dragging, includes resourceId */ onSlotDragEnd?: (data: { rangeStart: DateTimeStringValue; rangeEnd: DateTimeStringValue; resourceId?: string | number; }) => void; /** Labels override for i18n */ labels?: ScheduleLabelsOverride; /** Interaction mode @default default */ mode?: ScheduleMode; /** Props passed down to `ScrollArea` component */ scrollAreaProps?: Partial & DataAttributes; /** Called when an external item is dropped */ onExternalEventDrop?: (data: { dataTransfer: DataTransfer; dropDateTime: DateTimeStringValue; resourceId?: string | number; }) => void; /** Maximum number of events visible per cell before "+more" indicator @default 2 */ maxEventsPerTimeSlot?: number; /** Props passed down to `MoreEvents` component */ moreEventsProps?: Partial; /** Max number of generated recurring instances @default 2000 */ recurrenceExpansionLimit?: number; } export type ResourcesMonthViewFactory = Factory<{ props: ResourcesMonthViewProps; ref: HTMLDivElement; stylesNames: ResourcesMonthViewStylesNames; vars: ResourcesMonthViewCssVariables; }>; export declare const ResourcesMonthView: import("@mantine/core").MantineComponent<{ props: ResourcesMonthViewProps; ref: HTMLDivElement; stylesNames: ResourcesMonthViewStylesNames; vars: ResourcesMonthViewCssVariables; }>;