Updated: July 16, 2024

Calendar

ui5-calendar | v.1.0

Intro

The calendar shows time-related data at a glance. It allows the user to select a single day, multiple days, or date ranges and to navigate through different months and years.

Calendar – live example

When to Use

Do

Use the calendar:

  • To select a single date, multiple days, or a date range.
  • To enable date selection independently of the specific date format.
  • To enable context-based selection (such as a specific day of the week).
  • If you need to keep the calendar visible and prominent.
Don't

Don’t use the calendar:

  • Тo enter a lot of data quickly or primarily using the keyboard. Use the date picker instead.
  • To primarily select date ranges. Use the date range picker instead.
  • If the available screen space is limited.
  • To select a combination of date and time values. Use the date/time picker instead.

Anatomy

  1. Previous button: Navigates back to previous month.
  2. Month view button: Opens the view for month selection.
  3. Year view button: Opens the view for year selection.
  4. Next button: Navigates to next month.
  5. Days of the week
  6. Calendar weeks: Gregorian calendar type only. Can be hidden.
  7. Working day
  8. Selected day
  9. Today
  10. Non-working day
  11. Days from next month
Calendar anatomy
Calendar anatomy

Variants

You can show one calendar type or two:

  • Single calendar type: Gregorian, Japanese, Buddhist, Islamic, or Persian
  • Two calendar types: A primary and a secondary calendar
Islamic calendar – live example
Calendar with a secondary calendar type – live example


You can hide the calendar weeks. They are hidden by default for all calendar types except the Gregorian calendar.

Calendar with hidden calendar weeks

Behavior and Interaction

Selection

The calendar supports different types of selection:

  • Single day: The user can select a single day at a time.
  • Multiple days: The user can select multiple days, which do not have to be next to each other. Navigating to other months doesn’t cancel the selection.
  • Range: The user can select multiple days from a start date to an end date.

Selection of a single day – live example
Selection of multiple days – live example
Range selection – live example


Navigation

To change the month, the user can either use the previous/next arrows or select a specific month in the month view.

To change the year, the user can either scroll through the months with the previous/next arrows or select a specific year in the year view.

Calendar – month view
Calendar – year view


Minimum and Maximum Dates

You can define the earliest and latest valid dates for the calendar (minimum and maximum dates). Selection and navigation are then disabled for dates outside this range.

Calendar with minimum and maximum dates

Responsive Behavior

Use the calendar within a responsive layout container. The calendar itself is not responsive.

Related Links

Components

Implementation

  • Calendar
    (UI5 Web Components documentation)