@syncfusion/react-calendars
Version:
A complete package of date or time components with built-in features such as date formatting, inline editing, multiple (range) selection, range restriction, month and year selection, strict mode, and globalization.
248 lines (247 loc) • 6.57 kB
TypeScript
import * as React from 'react';
/**
* Specifies the view options for the calendar.
*
* @enum {string}
*/
export declare enum CalendarView {
/**
* Displays the calendar by month.
*
*/
Month = "Month",
/**
* Displays the calendar by year.
*
*/
Year = "Year",
/**
* Displays the calendar by decade.
*
*/
Decade = "Decade"
}
/**
* Defines the event arguments for the Change event.
*/
export interface ChangeEvent {
/**
* The selected time value.
*
*/
value: Date | Date[] | null;
/**
* The original event object.
*
*/
event?: React.MouseEvent<Element> | React.FocusEvent<Element> | React.KeyboardEvent<Element>;
}
/**
* Specifies the Type of the calendar.
*
*/
export type CalendarType = 'Gregorian';
/**
* Specifies the format of the day to be displayed in the header.
*
* @enum {string}
*/
export declare enum WeekDaysFormats {
/**
* Short format, typically a single letter.
*
*/
Short = "Short",
/**
* Narrow format, usually a minimal abbreviation.
*
*/
Narrow = "Narrow",
/**
* Abbreviated format, a shortened form of the day name.
*
*/
Abbreviated = "Abbreviated",
/**
* Wide format, the full name of the day.
*
*/
Wide = "Wide"
}
/**
* Specifies the rules used to determine which week is considered
* the first week of a calendar year.
*
*/
export declare enum WeekRule {
/**
* The first week begins on January first, regardless of
* which day of the week it falls on.
*
*/
FirstDay = "FirstDay",
/**
* The first week begins on the first occurrence of the
* designated weekday on or after January first.
*
*/
FirstFullWeek = "FirstFullWeek",
/**
* The first week must contain at least four days of the new year,
* following the ISO standard definition.
*
*/
FirstFourDayWeek = "FirstFourDayWeek"
}
export interface ViewChangeEvent {
/**
* Specifies the current view of the Calendar.
*
* @default null
*/
view?: string;
/**
* Specifies the focused date in a view.
*
* @default null
*/
date?: Date;
/**
* Specifies the original event arguments.
*
* @default null
*/
event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
}
export interface CalendarProps {
/**
* Specifies the selected date of the Calendar.
*
* @default null
*/
value?: Date | Date[] | null;
/**
* Specifies the default selected date of the Calendar for uncontrolled mode.
*
* @default null
*/
defaultValue?: Date | Date[] | null;
/**
* Specifies the option to enable the multiple dates selection of the calendar.
*
* @default false
*/
multiSelect?: boolean;
/**
* Specifies the minimum date that can be selected in the Calendar.
*
* @default new Date(1900, 00, 01)
*/
minDate?: Date;
/**
* Specifies the maximum date that can be selected in the Calendar.
*
* @default new Date(2099, 11, 31)
*/
maxDate?: Date;
/**
* Specifies the first day of the week for the calendar. By default, the first day of the week will be determined by the current culture.
*
* @default 0
*/
firstDayOfWeek?: number;
/**
* Specifies the initial view of the Calendar when it is opened.
*
* @default Month
*/
start?: CalendarView;
/**
* Sets the maximum level of view such as month, year, and decade in the Calendar.
* Depth view should be smaller than the start view to restrict its view navigation.
*
* @default Month
*/
depth?: CalendarView;
/**
* Specifies whether the week number of the year is to be displayed in the calendar or not.
*
* @default false
*/
weekNumber?: boolean;
/**
* Specifies the component to be disabled or not.
*
* @default true
*/
disabled?: boolean;
/**
* Specifies whether the Calendar should be in read-only mode.
*
* @default false
*/
readOnly?: boolean;
/**
* Specifies the rule for defining the first week of the year.
*
* @default FirstDay
*/
weekRule?: WeekRule;
/**
* Specifies whether the today button is to be displayed or not.
*
* @default true
*/
showTodayButton?: boolean;
/**
* Specifies the format of the day that to be displayed in header. By default, the format is 'short'.
* Possible formats are:
* * `Short` - Sets the short format of day name (like Su ) in day header.
* * `Narrow` - Sets the single character of day name (like S ) in day header.
* * `Abbreviated` - Sets the min format of day name (like Sun ) in day header.
* * `Wide` - Sets the long format of day name (like Sunday ) in day header.
*
* @default Short
*/
weekDaysFormat?: WeekDaysFormats;
/**
* Provides a template for rendering custom content for each day cell in the calendar.
* Can be a function that accepts CalendarCellProps, a function that accepts date parameters,
* or a React element.
*
* @default null
*/
cellTemplate?: Function | React.ReactNode;
/**
* Specifies whether the calendar is displayed in full screen mode.
* Used by DatePicker for mobile view.
*
* @default false
*/
fullScreenMode?: boolean;
/**
* Triggers when the Calendar value is changed.
*
* @event onChange
*/
onChange?: ((args: ChangeEvent) => void);
/**
* Triggers when the Calendar is navigated to another level or within the same level of view.
*
* @event onViewChange
*/
onViewChange?: (args: ViewChangeEvent) => void;
}
export interface ICalendar extends CalendarProps {
/**
* The content to be rendered inside the component.
*
* @private
* @default null
*/
element?: HTMLDivElement | null;
}
type ICalendarProps = ICalendar & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'value' | 'onChange'>;
export declare const Calendar: React.ForwardRefExoticComponent<ICalendarProps & React.RefAttributes<ICalendar>>;
declare const _default: React.NamedExoticComponent<ICalendar & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "value" | "onChange"> & React.RefAttributes<ICalendar>>;
export default _default;