Calendar
Calendar component is used for categorize content with a keyword.
Basic
Basic usage of Calendar.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Range
RangeCalendar have similar behavior with Calendar, but it able to select start and end date.
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Custom render
You can render custom day elements or apply styles & className to days with these
dayStyle, dayClassName & renderDay props.| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Disabled certain date
Disabled part of dates by using
disabledDate prop callback.| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Disable out of period date
Setting
minDate & maxDate props to limit available date within a period.| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Multiple date view
Calender or RangeCalendar can have mutiple date view by setting
dateViewCount more than 1.| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Multiple selection
Calendar component allow multiple dates selection by setting
multipleSelection props| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
API
Calendar
| Prop | Description | Type | Default |
|---|---|---|---|
| dateViewCount | Amount of date view display in picker | number | 1 |
| dayClassName | Apply className to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | Apply style to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultMonth | Default month for uncontrolled DatePickerRange | Date | - |
| defaultView | Default DatePickerRange view | 'date' | 'month' | 'year' | 'date' |
| disabledDate | Specify the date that cannot be selected | (date: Date) => boolean | - |
| disableOutOfMonth | Whether to disable days that out of given month | boolean | false |
| enableHeaderLabel | Whether to disable header label to trigger view change | boolean | true |
| firstDayOfWeek | First day of week | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | Whether to hide days that out of given month | boolean | false |
| hideWeekdays | Whether to hide week days | boolean | false |
| isDateFirstInRange | Highlight date as first in a range | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateInRange | Highlight date in a range | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateLastInRange | Highlight date as last in a range | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| labelFormat | Seperator between date display on input | string | '~' |
| locale | DatePickerRange locale | dayjs locale | en |
| maxDate | Maximum date to select | Date | - |
| minDate | Minimum date to select | Date | - |
| monthLabelFormat | Month label format | string | 'YYYY' |
| onChange | Callback when date is selected | function(date: Date) | - |
| onDayMouseEnter | Callback when date is hovered | function(date: Date) | - |
| paginateBy | Paginate by count of view | number | dateViewCount | 1 |
| preventFocus | Prevent focusing upon click | boolean | false |
| range | Highlight given date range | [Date | null, Date | null] | - |
| renderDay | Render custome day element based on the given params | (date: Date) => ReactNode | false |
| value | Value of calender (Controlled) | Date | - |
| weekdayLabelFormat | Format for weekday display | string | 'dd' |
| weekendDays | Indicate the days of weekend | number[] | [0, 6] |
| yearLabelFormat | Year label format | string | 'YYYY' |
RangeCalendar
| Prop | Description | Type | Default |
|---|---|---|---|
| dateViewCount | Amount of date view display in picker | number | 1 |
| dayClassName | Apply className to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string | - |
| dayStyle | Apply style to days based on argument | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties | - |
| defaultMonth | Default month for uncontrolled DatePickerRange | Date | - |
| defaultView | Default DatePickerRange view | 'date' | 'month' | 'year' | 'date' |
| disabledDate | Specify the date that cannot be selected | (date: Date) => boolean | - |
| disableOutOfMonth | Whether to disable days that out of given month | boolean | false |
| enableHeaderLabel | Whether to disable header label to trigger view change | boolean | true |
| firstDayOfWeek | First day of week | 'sunday' | 'monday' | 'monday' |
| hideOutOfMonthDates | Whether to hide days that out of given month | boolean | false |
| hideWeekdays | Whether to hide week days | boolean | false |
| isDateFirstInRange | Highlight date as first in a range | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateInRange | Highlight date in a range | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| isDateLastInRange | Highlight date as last in a range | (date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean | - |
| labelFormat | Seperator between date display on input | string | '~' |
| locale | DatePickerRange locale | dayjs locale | en |
| maxDate | Maximum date to select | Date | - |
| minDate | Minimum date to select | Date | - |
| monthLabelFormat | Month label format | string | 'YYYY' |
| onChange | Callback when date is selected | function(date: Date) | - |
| onDayMouseEnter | Callback when date is hovered | function(date: Date) | - |
| paginateBy | Paginate by count of view | number | dateViewCount | 1 |
| preventFocus | Prevent focusing upon click | boolean | false |
| range | Highlight given date range | [Date | null, Date | null] | - |
| renderDay | Render custome day element based on the given params | (date: Date) => ReactNode | false |
| singleDate | Only one date can be selected | boolean | false |
| value | Value of calender (Controlled) | [Date | null, Date | null] | - |
| weekdayLabelFormat | Format for weekday display | string | 'dd' |
| weekendDays | Indicate the days of weekend | number[] | [0, 6] |
| yearLabelFormat | Year label format | string | 'YYYY' |