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 year
[PAGEDOWN] - Navigate to the next year
[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
Fast Navigation
This component provides a build in fast navigation group which can be used via F6 / Shift + F6 or Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"
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:
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.
Note: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
since v1.0.0-rc.6
minDate
min-date
string
""
Determines the minimum date available for selection.
Note: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
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.
secondaryCalendarType
secondary-calendar-type
CalendarType
undefined
Defines the secondary calendar type. If not set, the calendar will only show the primary calendar type.
since v1.0.0-rc.16
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, the component 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 component.
Theme:Morning Horizon (Light)Evening Horizon (Dark)Horizon High Contrast BlackHorizon High Contrast WhiteQuartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast White
