Behaviour Lab Design System
Basic Calendar
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar with Range
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar Without Outside Days
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar with Limited Date Range (Disabled Navigation)
This calendar shows a 2-year range (2024-2025). Navigation buttons are disabled when all years fit within the visible area, or when you reach the boundaries of the date range.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Calendar with Custom Year Range
The yearRange prop controls how many years are displayed in the year picker view. Click on the month/year label to see the year picker.
Small Year Range (4 years)
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Default Year Range (12 years)
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Large Year Range (24 years)
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|