Calendar
Base component for custom date pickers
Import
Source
Docs
Package
Usage
Use Calendar
component to create custom date pickers if DatePicker
component does not meet your requirements. Calendar
supports all DatePicker
props and some other props that are listed in props table – check it out to learn about all component features.
By default, Calendar
works the same way as DatePicker component but does not
include any logic of dates selection:
Mo | Tu | We | Th | Fr | Sa | Su |
---|---|---|---|---|---|---|
Custom date pickers
Use Calendar
as a base for custom date pickers. For example, you can create a date picker
that allows user to pick three or less dates:
Mo | Tu | We | Th | Fr | Sa | Su |
---|---|---|---|---|---|---|
Another custom date picker example – week picker:
Mo | Tu | We | Th | Fr | Sa | Su |
---|---|---|---|---|---|---|
Static prop
Set static
prop to display a calendar that user cannot interact with.
It is useful when you want to display data with in calendar view but do
not want it to be interactive.
Mo | Tu | We | Th | Fr | Sa | Su |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 1 | 2 | 3 | 4 | 5 |
Calendar component props
Name | Type | Description |
---|---|---|
ariaLabels | CalendarAriaLabels | aria-label attributes for controls on different levels |
columnsToScroll | number | Number of columns to scroll when user clicks next/prev buttons, defaults to numberOfColumns |
date | Date | Date that is displayed, used for controlled component |
decadeLabelFormat | string | ((startOfDecade: Date, endOfDecade: Date) => ReactNode) | dayjs label format to display decade label or a function that returns decade label based on date value, defaults to "YYYY" |
defaultDate | Date | Initial date that is displayed, used for uncontrolled component |
defaultLevel | "month" | "year" | "decade" | Initial level displayed to the user (decade, year, month), used for uncontrolled component |
excludeDate | (date: Date) => boolean | Callback function to determine whether the day should be disabled |
firstDayOfWeek | 0 | 1 | 2 | 3 | 4 | 5 | 6 | number 0-6, 0 – Sunday, 6 – Saturday, defaults to 1 – Monday |
getDayAriaLabel | (date: Date) => string | Assigns aria-label to days based on date |
getDayProps | (date: Date) => Partial<DayProps> | Adds props to Day component based on date |
getMonthControlProps | (date: Date) => Partial<PickerControlProps> | Adds props to month picker control based on date |
getYearControlProps | (date: Date) => Partial<PickerControlProps> | Adds props to year picker control based on date |
hideOutsideDates | boolean | Determines whether outside dates should be hidden, defaults to false |
hideWeekdays | boolean | Determines whether weekdays row should be hidden, defaults to false |
level | "month" | "year" | "decade" | Current level displayed to the user (decade, year, month), used for controlled component |
locale | string | dayjs locale, defaults to value defined in DatesProvider |
maxDate | Date | Maximum possible date |
maxLevel | "month" | "year" | "decade" | Max level that user can go up to (decade, year, month), defaults to decade |
minDate | Date | Minimum possible date |
minLevel | "month" | "year" | "decade" | Min level that user can go down to (decade, year, month), defaults to month |
monthLabelFormat | string | ((month: Date) => ReactNode) | dayjs label format to display month label or a function that returns month label based on month value, defaults to "MMMM YYYY" |
monthsListFormat | string | dayjs format for months list |
nextIcon | ReactNode | Change next icon |
nextLabel | string | aria-label for next button |
numberOfColumns | number | Number of columns to render next to each other |
onDateChange | (date: Date) => void | Called when date changes |
onLevelChange | (level: CalendarLevel) => void | Called when level changes |
onMonthMouseEnter | (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void | Called when mouse enters month control |
onMonthSelect | (date: Date) => void | Called when user clicks month on year level |
onNextDecade | (date: Date) => void | Called when next decade button is clicked |
onNextMonth | (date: Date) => void | Called when next month button is clicked |
onNextYear | (date: Date) => void | Called when next year button is clicked |
onPreviousDecade | (date: Date) => void | Called when previous decade button is clicked |
onPreviousMonth | (date: Date) => void | Called when previous month button is clicked |
onPreviousYear | (date: Date) => void | Called when previous year button is clicked |
onYearMouseEnter | (event: MouseEvent<HTMLButtonElement, MouseEvent>, date: Date) => void | Called when mouse enters year control |
onYearSelect | (date: Date) => void | Called when user clicks year on decade level |
previousIcon | ReactNode | Change previous icon |
previousLabel | string | aria-label for previous button |
renderDay | (date: Date) => ReactNode | Controls day value rendering |
size | "xs" | "sm" | "md" | "lg" | "xl" | Component size |
static | boolean | Determines whether days should be static, static days can be used to display month if it is not expected that user will interact with the component in any way |
weekdayFormat | string | ((date: Date) => ReactNode) | dayjs format for weekdays names, defaults to "dd" |
weekendDays | DayOfWeek[] | Indices of weekend days, 0-6, where 0 is Sunday and 6 is Saturday, defaults to value defined in DatesProvider |
withCellSpacing | boolean | Determines whether controls should be separated by spacing, true by default |
yearLabelFormat | string | ((year: Date) => ReactNode) | dayjs label format to display year label or a function that returns year label based on year value, defaults to "YYYY" |
yearsListFormat | string | dayjs format for years list |
Calendar component Styles API
Name | Static selector | Description |
---|---|---|
calendar | .asuikit-Calendar-calendar | Calendar root element |
calendarHeader | .asuikit-Calendar-calendarHeader | Calendar header root element |
calendarHeaderControl | .asuikit-Calendar-calendarHeaderControl | Previous/next calendar header controls |
calendarHeaderControlIcon | .asuikit-Calendar-calendarHeaderControlIcon | Icon of previous/next calendar header controls |
calendarHeaderLevel | .asuikit-Calendar-calendarHeaderLevel | Level control (changes levels when clicked, month -> year -> decade) |
decadeLevelGroup | .asuikit-Calendar-decadeLevelGroup | Group of decades levels |
decadeLevel | .asuikit-Calendar-decadeLevel | Decade level root element |
pickerControl | .asuikit-Calendar-pickerControl | Button used to pick months and years |
yearsList | .asuikit-Calendar-yearsList | Years list table element |
yearsListRow | .asuikit-Calendar-yearsListRow | Years list row element |
yearsListCell | .asuikit-Calendar-yearsListCell | Years list cell element |
yearLevelGroup | .asuikit-Calendar-yearLevelGroup | Group of year levels |
yearLevel | .asuikit-Calendar-yearLevel | Year level root element |
monthsList | .asuikit-Calendar-monthsList | Months list table element |
monthsListRow | .asuikit-Calendar-monthsListRow | Months list table row element |
monthsListCell | .asuikit-Calendar-monthsListCell | Months list table cell element |
monthLevelGroup | .asuikit-Calendar-monthLevelGroup | Group or month levels |
monthLevel | .asuikit-Calendar-monthLevel | Month level root element |
monthThead | .asuikit-Calendar-monthThead | thead element of month table |
monthRow | .asuikit-Calendar-monthRow | tr element of month table |
monthTbody | .asuikit-Calendar-monthTbody | tbody element of month table |
monthCell | .asuikit-Calendar-monthCell | td element of month table |
month | .asuikit-Calendar-month | Month table element |
weekdaysRow | .asuikit-Calendar-weekdaysRow | Weekdays tr element |
weekday | .asuikit-Calendar-weekday | Weekday th element |
day | .asuikit-Calendar-day | Month day control |