Calendar

v1.0.0-rc.11
@ui5/webcomponents
<ui5-calendar>

Basic Calendar

<ui5-calendar></ui5-calendar>
	

Calendar with Minimum and Maximum Date - 7/7/2020 - 20/10/2020 format-pattern="dd/MM/yyyy"

<ui5-calendar min-date="7/7/2020" max-date="20/10/2020" format-pattern="dd/MM/yyyy"></ui5-calendar>
	

Calendar with hidden week numbers

<ui5-calendar hide-week-numbers></ui5-calendar>
	

Calendar with selection type Multiple

<ui5-calendar selection-mode="Multiple"></ui5-calendar>
	

Calendar with selection type Range

<ui5-calendar selection-mode="Range"></ui5-calendar>
	

Japanese Calendar

<ui5-calendar primary-calendar-type='Japanese'></ui5-calendar>
	

Islamic Calendar

<ui5-calendar primary-calendar-type='Islamic'></ui5-calendar>
	

Buddhist Calendar

<ui5-calendar primary-calendar-type='Buddhist'></ui5-calendar>
	

Overview

The ui5-calendar component allows users to select one or more dates.

Currently selected dates are represented with instances of ui5-date as children of the ui5-calendar. The value property of each ui5-date must be a date string, correctly formatted according to the ui5-calendar's formatPattern property. Whenever the user changes the date selection, ui5-calendar will automatically create/remove instances of ui5-date in itself, unless you prevent this behavior by calling preventDefault() for the selected-dates-change event. This is useful if you want to control the selected dates externally.

Usage

The user can navigate to a particular date by:
  • Pressing over a month inside the months view
  • Pressing over an year inside the years view

The user can confirm a date selection by pressing over a date inside the days view.

Keyboard Handling

The ui5-calendar provides advanced keyboard handling. When a picker is showed and focused the user can use the following keyboard shortcuts in order to perform a navigation:
- Day picker:
  • [F4] - Shows month picker
  • [SHIFT] + [F4] - Shows year picker
  • [PAGEUP] - Navigate to the previous month
  • [PAGEDOWN] - Navigate to the next month
  • [SHIFT] + [PAGEUP] - Navigate to the previous year
  • [SHIFT] + [PAGEDOWN] - Navigate to the next year
  • [CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards
  • [CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards
  • [HOME] - Navigate to the first day of the week
  • [END] - Navigate to the last day of the week
  • [CTRL] + [HOME] - Navigate to the first day of the month
  • [CTRL] + [END] - Navigate to the last day of the month

- Month picker:
  • [PAGEUP] - Navigate to the previous month
  • [PAGEDOWN] - Navigate to the next month
  • [HOME] - Navigate to the first month of the current row
  • [END] - Navigate to the last month of the current row
  • [CTRL] + [HOME] - Navigate to the first month of the current year
  • [CTRL] + [END] - Navigate to the last month of the year

- Year picker:
  • [PAGEUP] - Navigate to the previous year range
  • [PAGEDOWN] - Navigate the next year range
  • [HOME] - Navigate to the first year of the current row
  • [END] - Navigate to the last year of the current row
  • [CTRL] + [HOME] - Navigate to the first year of the current year range
  • [CTRL] + [END] - Navigate to the last year of the current year range

Calendar types

The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian. By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar, you need to set the primaryCalendarType property and import one or more of the following modules:

import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";
import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";
import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";
import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";

Or, you can use the global configuration and set the calendarType key:
<script data-id="sap-ui-config" type="application/json">
{
	"calendarType": "Japanese"
}
</script>


ES6 Module Import

import "@ui5/webcomponents/dist/Calendar";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
hideWeekNumbers
hide-week-numbers
boolean
false
Defines the visibility of the week numbers column.

Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
selectionMode
selection-mode
CalendarSelectionMode
"Single"
Defines the type of selection used in the calendar component. Accepted property values are:
  • CalendarSelectionMode.Single - enables a single date selection.(default value)
  • CalendarSelectionMode.Range - enables selection of a date range.
  • CalendarSelectionMode.Multiple - enables selection of multiple dates.
formatPattern
format-pattern
string
""
Determines the format, displayed in the input field.
maxDate
max-date
string
""
Determines the maximum date available for selection.
since v1.0.0-rc.6
minDate
min-date
string
""
Determines the Đ¼inimum date available for selection.
since v1.0.0-rc.6
primaryCalendarType
primary-calendar-type
CalendarType
Sets a calendar type used for display. If not set, the calendar type of the global configuration is used.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the selected date or dates (depending on the selectionMode property) for this calendar as instances of ui5-date

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
selected-dates-change
Fired when the selected dates change. Note: If you call preventDefault() for this event, ui5-calendar will not create instances of ui5-date for the newly selected dates. In that case you should do this manually.
values
type: Array
description: The selected dates
dates
type: Array
description: The selected dates as UTC timestamps

CalendarDate

Overview

The ui5-date component defines a calendar date to be used inside ui5-calendar

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
value
string
The date formatted according to the formatPattern property of the ui5-calendar that hosts the ui5-date
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel