import { BoxProps, DataAttributes, ElementProps, Factory, MantineRadius, ScrollAreaProps, StylesApiProps } from '@mantine/core'; import { ScheduleLabelsOverride } from '../../labels'; import { DateLabelFormat, DateStringValue, DateTimeStringValue, DayOfWeek, ScheduleEventData, ScheduleMode, ScheduleViewLevel } from '../../types'; import { AgendaViewStylesNames } from '../AgendaView/AgendaView'; import { MoreEventsProps } 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 MonthViewStylesNames = 'monthView' | 'monthViewScrollArea' | 'monthViewInner' | 'monthViewWeek' | 'monthViewDay' | 'monthViewDayLabel' | 'monthViewWeekNumber' | 'monthViewWeekday' | 'monthViewWeekdays' | 'monthViewWeekdaysCorner' | 'monthViewEvents' | 'monthViewBackgroundEvent' | CombinedScheduleHeaderStylesNames | AgendaViewStylesNames; export type MonthViewCssVariables = { monthView: '--month-view-radius' | '--month-view-max-events'; }; export interface MonthViewProps extends BoxProps, StylesApiProps, ElementProps<'div'> { __staticSelector?: string; /** Date to display, Date object or date string in `YYYY-MM-DD 00:00:00` format */ date: Date | string; /** Called with the new date value when a date is selected */ onDateChange?: (value: DateStringValue) => void; /** If set, week numbers are displayed in the first column @default false */ withWeekNumbers?: boolean; /** If set, weekdays names are displayed in the first row @default true */ withWeekDays?: boolean; /** If set, weekend days are displayed. When `false`, days defined by `weekendDays` are hidden and the grid shrinks to the remaining columns @default true */ withWeekendDays?: boolean; /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */ locale?: string; /** Number 0-6, where 0 – Sunday and 6 – Saturday. @default 1 – Monday */ firstDayOfWeek?: DayOfWeek; /** `dayjs` format for weekdays names. By default, the first letter of the weekday. */ 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[]; /** Props passed down to the week number button */ getWeekNumberProps?: (weekStartDate: DateStringValue) => Record; /** Props passed down to the day button */ getDayProps?: (date: DateStringValue) => Record; /** Called when day is clicked */ onDayClick?: (date: DateStringValue, event: React.MouseEvent) => void; /** Called with first day of the week when week number is clicked */ onWeekNumberClick?: (date: DateStringValue, event: React.MouseEvent) => void; /** If set, always renders 6 weeks in the month view @default true */ consistentWeeks?: boolean; /** 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, days from the previous and next months are displayed to fill the weeks @default true */ withOutsideDays?: boolean; /** If set, the header is displayed @default true */ withHeader?: boolean; /** Props passed down to `MonthYearSelect` component in the header */ monthYearSelectProps?: Partial; /** 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; /** Events to display */ events?: ScheduleEventData[]; /** Props passed down to `MoreEvents` component */ moreEventsProps?: Partial; /** 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 on new date */ 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 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 */ onSlotDragEnd?: (rangeStart: DateTimeStringValue, rangeEnd: DateTimeStringValue) => void; /** Labels override for i18n */ labels?: ScheduleLabelsOverride; /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default default */ mode?: ScheduleMode; /** Props passed down to `ScrollArea` component */ scrollAreaProps?: Partial & DataAttributes; /** 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; /** Max number of generated recurring instances per recurring series @default 2000 */ recurrenceExpansionLimit?: number; /** Maximum number of events visible per day before "+more" indicator shows, value is clamped between 1 and 10 @default 2 */ maxEventsPerDay?: number; /** If set, displays an Agenda button in the header that opens an agenda list view @default false */ withAgenda?: boolean; } export type MonthViewFactory = Factory<{ props: MonthViewProps; ref: HTMLDivElement; stylesNames: MonthViewStylesNames; vars: MonthViewCssVariables; }>; export declare const MonthView: import("@mantine/core").MantineComponent<{ props: MonthViewProps; ref: HTMLDivElement; stylesNames: MonthViewStylesNames; vars: MonthViewCssVariables; }>; export declare namespace MonthView { type Props = MonthViewProps; type Factory = MonthViewFactory; type StylesNames = MonthViewStylesNames; type CssVariables = MonthViewCssVariables; }