Calendar
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
-
[Page Up] - Navigate to the previous month
-
[Page Down] - Navigate to the next month
-
[Shift] + [Page Up] - Navigate to the previous year
-
[Shift] + [Page Down] - Navigate to the next year
-
[Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
-
[Ctrl] + [Shift] + [Page Down] - 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:
-
[Page Up] - Navigate to the previous year
-
[Page Down] - 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:
-
[Page Up] - Navigate to the previous year range
-
[Page Down] - 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] / [Ctrl] + [Alt/Option] / [Down] or [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:
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.js";
Basic Sample​
Properties​
selectionMode​
hideWeekNumbers​
primaryCalendarType​
secondaryCalendarType​
formatPattern​
minDate​
maxDate​
Slots​
calendarLegend​
default​
specialDates​
Events​
selected-dates-change​
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.
More Samples​
Selection Modes​
The Calendar supports Single, Multiple and Range selection.
Min and Max Dates​
Define min and max date boundaries to contrain user choice.
Calendar Types​
Several calendars are supported: Gregorian, Islamic, Persian and Japanese.
Calendar with Legend​
You can use the CalendarLegend component in addition to the Calendar to highlight specific days. Discover all the available CalendarLegendItem Types.