Calendar
A calendar allows users to select a single date.
Calendar uses typed objects from @internationalized/date instead of native JavaScript Date. Import date utilities from @cfa/react-core/dates and components from @cfa/react-core. See the Dates and Times guide for how to create values and convert to and from Date.
For date range selection, use RangeCalendar.
Import
import { Calendar, CalendarGrid, CalendarCell } from "@cfa/react-core";
import { CalendarDate } from "@cfa/react-core/dates";Live Editor
The Calendar component allows users to select a single date.
Guidelines
When to use
- Calendar is an always-visible date grid for selecting a single date.
Do
- Use Calendar on its own, or inside DatePicker and DateRangePicker.
- Always highlight today’s date.
- Disable or constrain dates that fall outside allowed ranges or business rules, including minimums, maximums, and specific blocked dates.
Avoid
- Using Calendar as the only way to enter a date when people already know it. Use DatePicker with a typeable field.
- Using Calendar on its own for date ranges. Use DateRangePicker.
- Using Calendar for time of day. Use TimeInput.
- Using Calendar when the choice is one of a few fixed dates. Use Select or RadioGroup.
Date Highlighting
Highlight specific dates in the calendar using the isDateHighlighted prop. This example highlights the 1st and 15th of each month.
Date Restrictions
Set minimum and maximum dates to restrict selection, or disable specific dates.
Multiple Months
Display multiple months at once using the visibleDuration prop.
Subcomponents
CalendarGrid & CalendarCell
The CalendarGrid component renders the calendar grid structure. It’s typically used internally but can be used for custom calendar layouts.
The CalendarCell component renders individual date cells within the calendar grid.