import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaAutosizeProps, StylesApiProps } from '@mantine/core'; import { ScheduleLabelsOverride } from '../../labels'; import { AnyDateValue, DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types'; import { BusinessHoursValue } from '../../utils'; import { AgendaViewStylesNames } from '../AgendaView/AgendaView'; import { CurrentTimeIndicatorStylesNames } from '../CurrentTimeIndicator/CurrentTimeIndicator'; import { RenderEvent, RenderEventBody } from '../ScheduleEvent/ScheduleEvent'; import { CombinedScheduleHeaderStylesNames } from '../ScheduleHeader/ScheduleHeader'; import { ViewSelectProps } from '../ScheduleHeader/ViewSelect/ViewSelect'; export type WeekViewStylesNames = 'weekView' | 'weekViewRoot' | 'weekViewHeader' | 'weekViewInner' | 'weekViewAllDaySlotsEvents' | 'weekViewAllDaySlots' | 'weekViewAllDaySlotsList' | 'weekViewAllDaySlot' | 'weekViewAllDaySlotsLabel' | 'weekViewScrollArea' | 'weekViewCorner' | 'weekViewSlotLabels' | 'weekViewSlotLabel' | 'weekViewDayLabel' | 'weekViewDayWeekday' | 'weekViewDay' | 'weekViewDayNumber' | 'weekViewDaySlot' | 'weekViewDaySlots' | 'weekViewWeekLabel' | 'weekViewWeekNumber' | 'weekViewBackgroundEvent' | CurrentTimeIndicatorStylesNames | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames; export type WeekViewCssVariables = { weekView: '--week-view-radius' | '--week-view-slot-height' | '--week-view-all-day-slots-height'; }; export interface WeekViewProps extends BoxProps, StylesApiProps, ElementProps<'div'> { __staticSelector?: string; /** Week 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; /** 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; /** If set, grid lines are displayed for intervals smaller than one hour, for example 15 and 30 minutes intervals @default true */ withSubHourGridLines?: boolean; /** Dayjs format for slot labels or a callback function that returns formatted value @default HH:mm */ slotLabelFormat?: DateLabelFormat; /** Number 0-6, where 0 – Sunday and 6 – Saturday. @default 1 – Monday */ firstDayOfWeek?: DayOfWeek; /** `dayjs` format for weekdays names. @default 'ddd' */ weekdayFormat?: DateLabelFormat; /** Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday. The default value is defined by `DatesProvider`. */ weekendDays?: DayOfWeek[]; /** If set to false, weekend days are hidden @default true */ withWeekendDays?: boolean; /** If set to true, highlights today in the weekday row @default false */ highlightToday?: boolean; /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */ radius?: MantineRadius; /** Props passed down to the `ScrollArea.Autosize` component */ scrollAreaProps?: ScrollAreaAutosizeProps & DataAttributes; /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */ locale?: string; /** If set, the week number is displayed at the top left corner @default true */ withWeekNumber?: boolean; /** If set, displays a line indicating the current time @default true */ withCurrentTimeIndicator?: boolean; /** If set, the time indicator displays the current time in the bubble @default true */ withCurrentTimeBubble?: boolean; /** If set, displays the current time indicator on the same day of week even when viewing a different week @default false */ forceCurrentTimeIndicator?: boolean; /** A function to get the current time, called on every tick. Can be used to display the current time indicator in a different timezone. @default () => dayjs() */ getCurrentTime?: () => AnyDateValue; /** If set, displays all-day slots at the top of the view @default true */ withAllDaySlots?: 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 month control */ previousControlProps?: React.ComponentProps<'button'> & DataAttributes; /** Props passed to next month 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; /** Format for week label @default 'MMM DD' */ weekLabelFormat?: DateLabelFormat; /** List of events to display in the week view */ events?: ScheduleEventData[]; /** Height of 1hr slot @default 64px */ slotHeight?: React.CSSProperties['height']; /** Height of all-day slot @default 48px */ allDaySlotHeight?: 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 shared across all days, or a per-day record keyed by day of the week (`0` – Sunday, `6` – Saturday) for day-specific ranges. Set a day to `null` to mark it as fully outside business hours. @default ['09:00:00', '17:00:00'] */ businessHours?: BusinessHoursValue; /** Function to customize event body, `event` object is passed as first argument */ renderEventBody?: RenderEventBody; /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */ renderEvent?: RenderEvent; /** If true, events can be dragged and dropped @default false */ withEventsDragAndDrop?: boolean; /** Called when event is dropped at new time */ onEventDrop?: (data: { eventId: string | number; newStart: DateTimeStringValue; newEnd: DateTimeStringValue; event: ScheduleEventData; }) => 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 */ onTimeSlotClick?: (data: { slotStart: DateTimeStringValue; slotEnd: DateTimeStringValue; nativeEvent: React.MouseEvent; }) => void; /** Called when all-day slot is clicked */ onAllDaySlotClick?: (day: DateStringValue, event: React.MouseEvent) => 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 */ onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void; /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */ mode?: ScheduleMode; /** Time to scroll to on initial render, in `HH:mm:ss` format */ startScrollTime?: string; /** Function to customize week label in the header */ renderWeekLabel?: (params: { weekStart: DateStringValue; weekEnd: DateStringValue; }) => React.ReactNode; /** Called when an external item is dropped onto the schedule. Receives the `DataTransfer` object and the drop target datetime. */ onExternalEventDrop?: (dataTransfer: DataTransfer, dropDateTime: DateTimeStringValue) => void; /** If true, events can be resized by dragging their 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; /** Function to get additional props for each time slot. Receives slot start and end datetime strings. Returned props are spread onto the slot element. Event handlers returned by this function are composed with internal handlers (e.g. onClick) rather than overriding them. */ getTimeSlotProps?: (data: { start: DateTimeStringValue; end: DateTimeStringValue; }) => Record | undefined; /** If set, displays an Agenda button in the header that opens an agenda list view @default false */ withAgenda?: boolean; } export type WeekViewFactory = Factory<{ props: WeekViewProps; ref: HTMLDivElement; stylesNames: WeekViewStylesNames; vars: WeekViewCssVariables; }>; export declare const WeekView: import("@mantine/core").MantineComponent<{ props: WeekViewProps; ref: HTMLDivElement; stylesNames: WeekViewStylesNames; vars: WeekViewCssVariables; }>; export declare namespace WeekView { type Props = WeekViewProps; type Factory = WeekViewFactory; type StylesNames = WeekViewStylesNames; type CssVariables = WeekViewCssVariables; }