💠 Calendar

An interactive calendar for date selection experiences.

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

Default

With form

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: