Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Calendar

Calendar

 Overview API Examples Style Tokens

The Calendar component is a flexible date selection tool supporting multiple precision levels and comprehensive navigation options.

Basic usage

The Calendar component allows users to select dates with configurable precision levels and range constraints.

Component anatomy

Precision Levels

The Calendar supports three precision levels that can be configured using the precision Input. By default, it's set to 'date' for full date selection, but you can set it to 'month' for month/year selection only, or 'year' for year selection only.

The component's navigation behavior is influenced by several Inputs. Use date to set a preselected date, while minDate and maxDate control the navigable range. These Inputs work together to create a cohesive navigation experience with automatic button enabling/disabling based on the valid range.

Date Range Control

To restrict date selection within specific bounds, use the minDate and maxDate Inputs. Any dates outside this range will be automatically disabled. The component intelligently handles these constraints across all precision levels.

View Modes

The calendar's interface adapts based on the precision Input. When set to 'date', it shows a full calendar grid with weekday headers. Setting it to 'month' displays a month selection grid, while 'year' shows a year selection interface. The navigation controls and header automatically adjust to match the selected precision.

Negative Theme

For use on dark backgrounds, enable the negative theme variant using the negative Input. When set to true, the component adjusts its colors and contrasts to maintain visibility and accessibility on dark surfaces.

Accessibility

Keyboard Navigation

The Calendar component provides comprehensive keyboard support:

  • Arrow keys navigate between dates within the current view
  • Page Up/Down keys move between months
  • Home/End keys jump to the start/end of the current range
  • Enter or Space selects the focused date

ARIA Implementation

The component includes proper ARIA attributes and roles:

  • Navigation controls have descriptive labels
  • Calendar grid uses appropriate ARIA roles
  • View changes are announced via live regions
  • Selection state changes are properly communicated

Focus Management

Focus handling is carefully implemented to ensure a smooth user experience:

  • Logical tab order through interactive elements
  • Focus is maintained during view changes
  • Visual focus indicators meet contrast requirements
  • Selected date remains tracked for screen readers

Best Practices for Developers

  1. Date Range Implementation DEMO HERE

  2. View Transitions DEMO HERE

  3. Keyboard Support DEMO HERE

Previous
Button
Next
Card