Components/Calendar

The calendar component allows users to navigate to a single date, multiple days, whole week(s), or a date range, showing all time-related data within a given timeframe. It is usually paired with components: **Input Group** and **Popover** to comprise **Date Picker**, which is considered a design pattern as the date picker does not contain components of its own. The calendar component is rarely, if ever, used as a standalone component.

**Use the calendar if:** - You want the user to select a single date, multiple days, whole week(s), or a date range. - You want to display multiple months or years at once. - The calendar always needs to be visible and prominent. - Users need to see the year, month, week, weekday and date at a glance to decide which date to select. For example, a user might want to select a date based on the day of the week. - Users might be used to different locale-specific date formats (such as day-month-year or month-day-year). Enabling them to select the date visually using the calendar bypasses format-specific interpretation. - You want to highlight special days or hide/disable specific days. **Do not use the calendar if:** - The user is a power user who has to enter a lot of data fast. In this case, use the **Date Picker** pattern instead. - The keyboard is the primary input device. In this case, use the **Date Picker** pattern instead. - The available screen space is limited and displaying the calendar permanently would take up too much space. The following classes describe the block structure of the calendar component.\n - \ - The user is a power user who has to enter a lot of data fast. In this case, use the **Date Picker** pattern instead. - The keyboard is the primary input device. In this case, use the **Date Picker** pattern instead. - The available screen space is limited and displaying the calendar permanently would take up too much space. The following classes describe the block structure of the calendar component.\n - \

The calendar component can display days of the month by adding the `fd-calendar__content--dates` class to the container element.