Kibo UI
Grid

Calendar

The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.

Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Real-time Video Chat
20
21
22
23
24
25
26
AI Scene Analysis
Collaborative Editing
AI-Powered Color Grading
+1 more
27
28
29
30
31
Cloud Asset Management

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 locale prop

Examples

Without a date picker

Sun
Mon
Tue
Wed
Thu
Fri
Sat
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Real-time Video Chat
20
21
22
23
24
25
26
AI Scene Analysis
Collaborative Editing
AI-Powered Color Grading
+1 more
27
28
29
30
31
Cloud Asset Management

Props

The Calendar component is made up of the following subcomponents:

CalendarProvider

The CalendarProvider component is used to provide the features to the calendar.

PropTypeDefault
className?
string
-
children
ReactNode
-
startDay?
number
-
locale?
LocalesArgument
-

CalendarDate

The CalendarDate component is used to display the date of the calendar.

PropTypeDefault
children
ReactNode
-

CalendarDatePicker

The CalendarDatePicker component is used to contain the date picker of the calendar.

PropTypeDefault
children
ReactNode
-
className?
string
-

CalendarMonthPicker

The CalendarMonthPicker component is used to display the month picker of the calendar.

PropTypeDefault
className?
string
-

CalendarYearPicker

The CalendarYearPicker component is used to display the year picker of the calendar.

PropTypeDefault
end
number
-
start
number
-
className?
string
-

CalendarDatePagination

The CalendarDatePagination component is used to display the pagination of the calendar.

PropTypeDefault
className?
string
-

CalendarHeader

The CalendarHeader component is used to display the header of the calendar.

PropTypeDefault
className?
string
-

CalendarBody

The CalendarBody component is used to display the body of the calendar.

PropTypeDefault
children
(props: { feature: Feature; }) => ReactNode
-
features
Feature[]
-

CalendarItem

The CalendarItem component is used to display a single item in the calendar.

PropTypeDefault
className?
string
-
feature
Feature
-

On this page