Calendar
The calendar component alows users to view dates and events in a grid layout, navigate between different time periods (day, week, month, year) and select specific dates or date ranges.
API Reference
| Prop | Type | Default |
|---|---|---|
dateRange | boolean | false |
showPrevAndNextDates | boolean | false |
onSelect | () => void | - |
selectedDate | Date | - |
startOfWeek | number | 0 |
Examples
Show Previous and Next Dates
Date Range
Usage
General Guidelines
Do's
- Use clear and concise labels for days, weeks, and months.
- Highlight the current date visually.
- Allow users to easily navigate between different time periods.
- Provide options to filter and search for events.
Don'ts
- Overload the calendar with too much information.
- Use complex navigation controls.
- Make it difficult for users to select dates.
Writing Guidelines
When to use
- Use a calendar component when your application needs to display dates, events, or allow users to select dates.
- Examples include: scheduling appointments, booking reservations, tracking deadlines, or managing tasks.
When not to use
- Don't use a calendar component if your application only needs to display a single date or a limited date range.
- In these cases, a simple text input or dropdown menu might be more appropriate.
Use Case
General Use Cases
Calendars are useful for displaying schedules, appointments, deadlines, and other time-sensitive information in a clear and organized way.
Digital Health Use Cases
For Digital Health Applications, calendars can be used tracking medication schedules, scheduling workouts or other health-related activities, and more.
Accessibility Guidelines
- Add
aria-labelto provide an accessible name for element that don't have visible text. - Use
aria-describedbyattribute to identifies the element (or elements) that describes the element on which the attribute is set. correctly, define an ID for the element you want to use as label and set the property to that ID.