Figma component
Show the component in Figma
Beta
Show details
Overview
The Calendar component has an intuitive and customizable interface that allows users to select single dates or date ranges. It includes built-in formatting, locale support, and shortcut options for quick selection.
Key Features
- Selection Type: Supports both single date and date range selection.
- Customizable Values: Allows users to select single or range values with flexible date formats.
- Shortcut & Action Controls: Users can define a custom set of shortcuts or action buttons.
- First Day of the Week: Configurable start day for the week (e.g., Sunday or Monday).
- Disabled Dates: Ability to define specific dates as unavailable for selection.
- Week Numbers: Optionally display week numbers alongside dates.
- Locale & Date Format: Customizable locale and date formatting options.
- Accessibility: Fully keyboard navigable and screen-reader accessible.
Anatomy
-
Date controls:
The Date Controls section allows users to navigate through the calendar. - Displays the current month and year.
-
It includes arrow buttons to navigate to the previous month or next month.
-
Calendar:
The Calendar Grid is the main area where users can select dates. - Displays a grid of selectable days.
- Supports various date states:
- Disabled: Non-selectable dates.
- Outside-month: Days from adjacent months (optional visibility).
- Selected: Highlighted for chosen dates.
- Today: Visually distinct to indicate the current date.
-
Optional week number column for additional reference.
-
Controls :
The Controls Section provides additional actions for users. - Customizable Shortcuts: Quick-selection buttons for predefined date ranges. Can be fully customized to include additional actions.
-
Buttons to apply or discard selections
Look and Feel
Examples
Basic Calendar
A standard calendar with default settings.
Single and range selection
A calendar allowing users to pick only one date or a date range.
One vs. Two Calendar Grids
- One Calendar Grid: Displays a single month at a time.
- Two Calendar Grids: Displays two months side by side.
With Week Numbers
A calendar that displays the week number in addition to dates.
Controls Section Placement
- Bottom: Controls appear below the calendar.
- Left: Controls appear to the left.
- Right: Controls appear to the right.
Different Shortcuts
Examples of different pre-defined date range shortcuts for quick selection.
Best Practice
Do
Offer customizable shortcuts for frequently selected ranges.
Don't
Overload the interface with too many shortcuts.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Component checklist
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.