Updated: November 29, 2022

SAPUI5 Version 1.100

Calendar Date Interval

sap.ui.unified.CalendarDateInterval

Intro

The calendar date interval displays a range of days in a single row. The control allows the user to select a single day, multiple days, or a range of days. Content corresponding to the date selection is usually displayed below the control. The user can navigate the date intervals by browsing through them (using the Previous and Next arrows), or by going directly to a specific month or year.

Compared to the regular date range selection control, this control offers a flexible date range and consumes very little vertical space. You can also adapt the width to fit the available horizontal space.

When to Use

Use the calendar date interval if:

You use the planning calendar or single planning calendar. Both use the calendar date interval internally.
You want to display a range of days in a single row.

Do not use the calendar date interval if:

The user simply needs a calendar. Use the calendar instead.
The user wants to pick a single date out of a calendar view. Use the date picker instead.
The user wants to pick a date and time. Use the date/time picker instead.
The user wants to pick a date range out of a calendar view. Use date range selection instead.
The user wants to set a dynamic date, such as “last x months”. Use the dynamic date instead.

Layout

The date interval control is divided into two main areas: date interval navigation, and date interval display and selection.

The navigation area contains two arrows (one to the left, one to the right), which allow the user to navigate easily to the previous and next date ranges. This area also contains month and year indicators, which display the currently selected month and year. These indicators trigger the month and year navigation mode of the control.

The display/selection area is primarily used to display the range of days in the current date interval. You can also display a second row to show the calendar week (property: showWeekNumbers). When the user triggers month or year navigation, a range of months or years is displayed in this section to enable easy interval navigation.

Schematic visualization of calendar date interval

Components

Current Day

The current day is highlighted by a colored frame. Weekends are shaded in a slightly darker gray.

Calendar date interval

Special Days

You can mark special days, such as public holidays, with a colored line along the lower edge.

Color markings for special days

Behavior and Interaction

The behavior and interaction of the calendar date interval control can be divided into two parts: navigation and selection.

Navigation

Previous/Next

The user clicks the Previous or Next arrow to replace the currently displayed date interval with the previous or next date or period. Previous/Next navigation can be used while the user is in selection mode, as well as in month, year, or year interval navigation mode.

Navigation by Month

The user triggers month navigation mode by clicking the month link above the date range interval. The currently selected month is highlighted. Clicking a month switches the date range interval to the selected month. The user can browse the months by clicking the Previous and Next arrows.

Navigation by month

Navigation by Year

The user triggers year navigation mode by clicking the year link above the date range interval. The currently selected year is highlighted. Clicking a year switches the date range interval to the selected year. The user can browse the years by clicking the Previous and Next arrows.

Navigation by year

Navigation by Year Interval

The user triggers the year interval navigation mode by clicking the year interval above the year selection area. The year interval containing the currently selected year is highlighted. Clicking a year interval switches the year range to the selected set of years. The user can browse the year intervals with the Previous and Next arrows.

Navigation by year interval

Selection

The calendar date interval control can be set up for single day selection, multiple day selection, or date range selection.

Single day

The user clicks an unselected day to select that particular day and deselect all previously selected days. Clicking a selected day a second time removes the selection. Only one day can be selected at a time. The selected day is highlighted.

Selection – Single day

Multiple days

The user clicks an unselected day to select that particular day. Clicking a selected day a second time removes the selection. Multiple days can be selected. Selected days are highlighted.

Selection – Multiple days

Date range

The user clicks an unselected day to select the start date. Clicking a second unselected day selects the end date. Both the start and end dates are highlighted. The days in between are highlighted in a lighter color. The minimum range is one day and only one range can be selected at a time.

Selection – Date range

Responsiveness

The horizontal space occupied by the control is already minimal, so the responsiveness is limited to the width of the control.

On small screens, the maximum number of days per range interval is automatically reduced to eight.