Calendar
An interactive calendar for date selection experiences.
This part of the documentation is under construction
Usage
The Calendar component is an interactive UI element that allows users to view and select dates within a graphical layout representing days, weeks, and months.
This component is often used to schedule events, book appointments, or input dates in forms.
When to use
- Date selection: Use a Calendar when users need to select dates for tasks like booking, scheduling, or entering their date of birth.
- Event planning: Employ a Calendar for planning and managing events, allowing users to see an overview of their scheduled activities.
- User-friendly interfaces: Calendars can make the date selection process more user-friendly by providing a visual context, which is particularly useful in complex scheduling applications.
Avoid using a Calendar for simple date entry that can be handled with a basic input field. Don't rely on the Calendar as the sole date input method; offer a manual input option for users who prefer to type the date directly. Ensure that the Calendar does not become a barrier to completing tasks, especially for users with disabilities or those using devices with small screens.
About
The <Calendar /> component is built on top of React DayPicker (opens in a new tab).
You can use the <Calendar /> component to build a date picker. See the DayPicker documentation for more information.
Example
This part of the documentation is under construction
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: