@fluentui/react
Version:
Reusable React components for building web experiences.
266 lines (265 loc) • 8.55 kB
TypeScript
import { AnimationDirection } from '../Calendar/Calendar.types';
import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '@fluentui/date-time-utilities';
import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities';
import type { ICalendarStrings, IDateFormatting, IDayGridOptions } from '@fluentui/date-time-utilities';
import type { IStyle, ITheme, IProcessedStyleSet } from '@fluentui/style-utilities';
/**
* {@docCategory Calendar}
*/
export interface ICalendarDayGrid {
focus(): void;
}
/**
* {@docCategory Calendar}
*/
export interface ICalendarDayGridProps extends IDayGridOptions, IBaseProps<ICalendarDayGrid> {
/**
* Optional callback to access the ICalendarDayGrid interface. Use this instead of ref for accessing
* the public methods and properties of the component.
*/
componentRef?: IRefObject<ICalendarDayGrid>;
/**
* Customized styles for the component.
*/
styles?: IStyleFunctionOrObject<ICalendarDayGridStyleProps, ICalendarDayGridStyles>;
/**
* Theme (provided through customization).
*/
theme?: ITheme;
/**
* Additional CSS class(es) to apply to the CalendarDayGrid.
*/
className?: string;
/**
* Localized strings to use in the CalendarDayGrid
*/
strings: ICalendarStrings;
/**
* The currently selected date
*/
selectedDate: Date;
/**
* The currently navigated date
*/
navigatedDate: Date;
/**
* Callback issued when a date is selected
* @param date - The date the user selected
* @param selectedDateRangeArray - The resultant list of dates that are selected based on the date range type set
* for the component.
*/
onSelectDate?: (date: Date, selectedDateRangeArray?: Date[]) => void;
/**
* Callback issued when a date in the calendar is navigated
* @param date - The date that is navigated to
* @param focusOnNavigatedDay - Whether to set the focus to the navigated date.
*/
onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
/**
* Callback issued when calendar day is closed
*/
onDismiss?: () => void;
/**
* The first day of the week for your locale.
* @defaultvalue DayOfWeek.Sunday
*/
firstDayOfWeek: DayOfWeek;
/**
* Defines when the first week of the year should start, FirstWeekOfYear.FirstDay,
* FirstWeekOfYear.FirstFullWeek or FirstWeekOfYear.FirstFourDayWeek are the possible values
* @defaultvalue FirstWeekOfYear.FirstDay
*/
firstWeekOfYear: FirstWeekOfYear;
/**
* The date range type indicating how many days should be selected as the user
* selects days
* @defaultValue DateRangeType.Day
*/
dateRangeType: DateRangeType;
/**
* The number of days to select while dateRangeType === DateRangeType.Day. Used in order to have multi-day
* views.
* @defaultValue 1
*/
daysToSelectInDayView?: number;
/**
* Value of today. If unspecified, current time in client machine will be used.
*/
today?: Date;
/**
* Whether the calendar should show the week number (weeks 1 to 53) before each week row
* @defaultvalue false
*/
showWeekNumbers?: boolean;
/**
* Apply additional formatting to dates, for example localized date formatting.
*/
dateTimeFormatter: IDateFormatting;
/**
* Ref callback for individual days. Allows for customization of the styling, properties, or listeners of the
* specific day.
*/
customDayCellRef?: (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => void;
/**
* How many weeks to show by default. If not provided, will show enough weeks to display the current
* month, between 4 and 6 depending
* @defaultvalue undefined
*/
weeksToShow?: number;
/**
* If set the Calendar will not allow navigation to or selection of a date earlier than this value.
*/
minDate?: Date;
/**
* If set the Calendar will not allow navigation to or selection of a date later than this value.
*/
maxDate?: Date;
/**
* If set the Calendar will not allow selection of dates in this array.
*/
restrictedDates?: Date[];
/**
* The days that are selectable when `dateRangeType` is WorkWeek.
* If `dateRangeType` is not WorkWeek this property does nothing.
* @defaultvalue [Monday,Tuesday,Wednesday,Thursday,Friday]
*/
workWeekDays?: DayOfWeek[];
/**
* Whether the close button should be shown or not
* @defaultvalue false
*/
showCloseButton?: boolean;
/**
* Allows all dates and buttons to be focused, including disabled ones
* @defaultvalue false
*/
allFocusable?: boolean;
/**
* The ID of the control that labels this one
*/
labelledBy?: string;
/**
* Whether to show days outside the selected month with lighter styles
* @defaultvalue true
*/
lightenDaysOutsideNavigatedMonth?: boolean;
/**
* The cardinal directions for animation to occur during transitions, either horizontal or veritcal
*/
animationDirection?: AnimationDirection;
/**
* Optional callback function to mark specific days with a small symbol. Fires when the date range changes,
* gives the starting and ending displayed dates and expects the list of which days in between should be
* marked.
*/
getMarkedDays?: (startingDate: Date, endingDate: Date) => Date[];
}
/**
* {@docCategory Calendar}
*/
export interface ICalendarDayGridStyleProps {
/**
* Theme provided by High-Order Component.
*/
theme: ITheme;
/**
* Accept custom classNames
*/
className?: string;
/**
* The date range type
*/
dateRangeType?: DateRangeType;
/**
* Whether week numbers are being shown
*/
showWeekNumbers?: boolean;
/**
* Whether to show days outside the selected month with lighter styles
*/
lightenDaysOutsideNavigatedMonth?: boolean;
/**
* Whether grid entering animation should be forwards or backwards
*/
animateBackwards?: boolean;
/**
* The cardinal directions for animation to occur during transitions, either horizontal or vertical
*/
animationDirection?: AnimationDirection;
}
/**
* {@docCategory Calendar}
*/
export interface ICalendarDayGridStyles {
/**
* The style for the root div
*/
wrapper?: IStyle;
/**
* The style for the table containing the grid
*/
table?: IStyle;
/**
* The style to apply to the grid cells for days
*/
dayCell?: IStyle;
/**
* The style to apply to grid cells for days in the selected range
*/
daySelected?: IStyle;
/**
* The style to apply to row around weeks
*/
weekRow?: IStyle;
/**
* The style to apply to the column headers above the weeks
*/
weekDayLabelCell?: IStyle;
/**
* The style to apply to grid cells for week numbers
*/
weekNumberCell?: IStyle;
/**
* The style to apply to individual days that are outside the min/max date range
*/
dayOutsideBounds?: IStyle;
/**
* The style to apply to individual days that are outside the current month
*/
dayOutsideNavigatedMonth?: IStyle;
/**
* The style to apply to the button element within the day cells
*/
dayButton?: IStyle;
/**
* The style to apply to the individual button element that matches the "today" parameter
*/
dayIsToday?: IStyle;
/**
* The style applied to the first placeholder week used during transitions
*/
firstTransitionWeek?: IStyle;
/**
* The style applied to the last placeholder week used during transitions
*/
lastTransitionWeek?: IStyle;
/**
* The style applied to the marker on days to mark as important
*/
dayMarker?: IStyle;
/**
* The styles to apply to days for rounded corners. Can apply multiple to round multiple corners
*/
topRightCornerDate?: IStyle;
topLeftCornerDate?: IStyle;
bottomRightCornerDate?: IStyle;
bottomLeftCornerDate?: IStyle;
/**
* The styles to apply to days for focus borders. Can apply multiple if there are multiple focused days
* around the current focused date
*/
datesAbove?: IStyle;
datesBelow?: IStyle;
datesLeft?: IStyle;
datesRight?: IStyle;
}