Calendar
The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.
Installation
npx kibo-ui@latest add calendar
Features
- Features are grouped by day
- Features are color-coded by their status
- Features are truncated if there are too many to fit in the grid cell
- Selectable date range
- Pagination of dates
- Internationalization through
localeprop
Examples
Without a date picker
Props
The Calendar component is made up of the following subcomponents:
CalendarProvider
The CalendarProvider component is used to provide the features to the calendar.
| Prop | Type | Default |
|---|---|---|
locale? | LocalesArgument | - |
startDay? | number | - |
children | ReactNode | - |
className? | string | - |
CalendarDate
The CalendarDate component is used to display the date of the calendar.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | - |
CalendarDatePicker
The CalendarDatePicker component is used to contain the date picker of the calendar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
children | ReactNode | - |
CalendarMonthPicker
The CalendarMonthPicker component is used to display the month picker of the calendar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
CalendarYearPicker
The CalendarYearPicker component is used to display the year picker of the calendar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
start | number | - |
end | number | - |
CalendarDatePagination
The CalendarDatePagination component is used to display the pagination of the calendar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
CalendarHeader
The CalendarHeader component is used to display the header of the calendar.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
CalendarBody
The CalendarBody component is used to display the body of the calendar.
| Prop | Type | Default |
|---|---|---|
features | Feature[] | - |
children | (props: { feature: Feature; }) => ReactNode | - |
CalendarItem
The CalendarItem component is used to display a single item in the calendar.
| Prop | Type | Default |
|---|---|---|
feature | Feature | - |
className? | string | - |