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 |
---|---|---|---|---|---|---|
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 | 3 |