Calendar

Interface of Calendar
🏗 Coming Soon
Inform
Note: Calendar must be imported from its specific location rather than the package root.

Import path: @looker/components/lib/Calendar

Inform
If you need an interactive date picker, use InputDate or InputDateRange instead.

Calendar is a stateless component which renders a standard calendar month. It accepts a limited amount of props, and is the foundation of our more useful InputDate and InputDateRange components.

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
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
31
1

Props

Calendar shares many of the same props as InputDate. Please view those docs for interactive examples. But if you wish to use Calendar to build fully custom experiences, the following props are available for you:

PropType Values
localization{month: string[], weekdaysShort:[], firstDayOfWeek: number}
onDayClick(date: Date) => void
selectedDatesDate | Date[] | DateRange (i.e. { from: Date, to: Date })
sizeOne of: small, medium*, large
showNextButtonOne of: true*, false
showPreviousButtonOne of: true*, false
onNextClick(date: Date) => void
onNowClick(date: Date) => void
onPrevClick(date: Date) => void
onMonthChange(date: Date) => void
viewMonthDate
*default

Size

We support three sizes: small, medium (default), and large. The font and grid are sized accordingly.

Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
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
31
1

We support four different callbacks to hook into various navigation events:

  • onNextClick: the user clicked the right arrow
  • onPrevClick: the user clicked the right arrow
  • onNowClick: the user clicked the month label to return to the current month
  • onMonthChange: the user navigated to a new month (could be through any mouse or keyboard interaction)
Su
Mo
Tu
We
Th
Fr
Sa
28
29
30
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
31
1

I18n

For localization purposes, Calendar accepts a localization object to pass transated month/weekday names and the standard first-day-of-the-week.

Lu
Ma
Me
Gi
Ve
Sa
Do
29
30
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
31
1
2