Calendar
A date calendar grid with selection, navigation, and keyboard interaction.
Single Date
Click a date to select it. Click again to deselect.
February 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 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 | |
Date Range
Select a start and end date to create a range.
February 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 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 | |
Multiple Dates
Click multiple dates to select them individually.
February 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 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 | |
Two Months
Display two months side by side for range selection.
January 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 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 | |
February 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
| 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 | |
Usage
julia
using Suite
# Single date selection (default)
Calendar()
# Range selection with two months
Calendar(mode="range", number_of_months=2)
# Multiple date selection
Calendar(mode="multiple")
# Pre-selected date
Calendar(selected="2026-02-14", month=2, year=2026)
# Disabled dates
Calendar(disabled_dates="2026-02-14,2026-02-15")
# Without outside days
Calendar(show_outside_days=false)
# Fixed 6-week grid
Calendar(fixed_weeks=true)Keyboard Interactions
| Key | Action |
|---|---|
| ArrowLeft | Move focus to previous day |
| ArrowRight | Move focus to next day |
| ArrowUp | Move focus to same day in previous week |
| ArrowDown | Move focus to same day in next week |
| PageUp | Move focus to same day in previous month |
| PageDown | Move focus to same day in next month |
| Shift+PageUp | Move focus to same day in previous year |
| Shift+PageDown | Move focus to same day in next year |
| Home | Move focus to start of week (Monday) |
| End | Move focus to end of week (Sunday) |
| Space / Enter | Select focused date |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | String | "single" | Selection mode: single, multiple, or range |
| month | Int | current month | Displayed month (1-12) |
| year | Int | current year | Displayed year |
| selected | String | "" | Pre-selected date(s), comma-separated ISO strings |
| disabled_dates | String | "" | Disabled dates, comma-separated ISO strings |
| show_outside_days | Bool | true | Show days from adjacent months |
| fixed_weeks | Bool | false | Always show 6 weeks |
| number_of_months | Int | 1 | Number of months to display side by side |
| class | String | "" | Additional CSS classes |
| theme | Symbol | :default | Theme preset |