@ui5/webcomponents 0.0.0-f9b9eadb8 → 0.0.0-fd6264051

package/dist/Calendar.js

@@ -1,18 +1,19 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import {
+	isF4,
+	isF4Shift,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { isF4, isF4Shift } from "@ui5/webcomponents-base/dist/Keys.js";
+import * as CalendarDateComponent from "./CalendarDate.js";
+import CalendarPart from "./CalendarPart.js";
 import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
 
 // Default calendar for bundling
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
@@ -28,177 +29,222 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
  */
 const metadata = {
 	tag: "ui5-calendar",
+	fastNavigation: true,
 	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
-		 * Defines the UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {Integer}
-		 * @public
-		*/
-		timestamp: {
-			type: Integer,
-		},
-
-		/**
-		 * Defines the calendar type used for display.
-		 * If not defined, the calendar type of the global configuration is used.
-		 * Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".
-		 * @type {CalendarType}
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Defines the selected dates as UTC timestamps.
-		 * @type {Array}
+		 * Defines the type of selection used in the calendar component.
+		 * Accepted property values are:<br>
+		 * <ul>
+		 * <li><code>CalendarSelectionMode.Single</code> - enables a single date selection.(default value)</li>
+		 * <li><code>CalendarSelectionMode.Range</code> - enables selection of a date range.</li>
+		 * <li><code>CalendarSelectionMode.Multiple</code> - enables selection of multiple dates.</li>
+		 * </ul>
+		 * @type {CalendarSelectionMode}
+		 * @defaultvalue "Single"
 		 * @public
 		 */
-		selectedDates: {
-			type: Integer,
-			multiple: true,
-		},
-
-		/**
-		 * Determines the мinimum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		minDate: {
-			type: String,
-		},
-
-		/**
-		 * Determines the maximum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		maxDate: {
-			type: String,
+		selectionMode: {
+			type: CalendarSelectionMode,
+			defaultValue: CalendarSelectionMode.Single,
 		},
 
 		/**
 		 * Defines the visibility of the week numbers column.
 		 * <br><br>
 		 *
-		 * <b>Note:<b> For calendars other than Gregorian,
+		 * <b>Note:</b> For calendars other than Gregorian,
 		 * the week numbers are not displayed regardless of what is set.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
-		 * @since 1.0.0-rc.8
 		 */
 		hideWeekNumbers: {
 			type: Boolean,
 		},
 
-		_header: {
-			type: Object,
-		},
-
-		_oMonth: {
-			type: Object,
+		/**
+		 * Which picker is currently visible to the user: day/month/year
+		 */
+		_currentPicker: {
+			type: String,
+			defaultValue: "day",
 		},
 
-		_monthPicker: {
-			type: Object,
+		_previousButtonDisabled: {
+			type: Boolean,
 		},
 
-		_yearPicker: {
-			type: Object,
+		_nextButtonDisabled: {
+			type: Boolean,
 		},
 
-		_calendarWidth: {
+		_headerMonthButtonText: {
 			type: String,
-			noAttribute: true,
 		},
 
-		_calendarHeight: {
+		_headerYearButtonText: {
 			type: String,
-			noAttribute: true,
 		},
-
-		formatPattern: {
-			type: String,
+	},
+	managedSlots: true,
+	slots: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
+		/**
+		 * Defines the selected date or dates (depending on the <code>selectionMode</code> property) for this calendar as instances of <code>ui5-date</code>
+		 *
+		 * @type {sap.ui.webcomponents.main.ICalendarDate[]}
+		 * @slot dates
+		 * @public
+		 */
+		"default": {
+			propertyName: "dates",
+			type: HTMLElement,
+			invalidateOnChildChange: true,
 		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
 		/**
-		 * Fired when the selected dates changed.
+		 * Fired when the selected dates change.
+		 * <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
+		 * create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually.
+		 *
 		 * @event sap.ui.webcomponents.main.Calendar#selected-dates-change
-		 * @param {Array} dates The selected dates' timestamps
+		 * @allowPreventDefault
+		 * @param {Array} values The selected dates
+		 * @param {Array} dates The selected dates as UTC timestamps
 		 * @public
 		 */
-		"selected-dates-change": { type: Array },
+		"selected-dates-change": {
+			detail: {
+				dates: { type: Array },
+				values: { type: Array },
+			},
+		},
+
+		"show-month-press": {},
+		"show-year-press": {},
 	},
 };
 
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-calendar</code> component allows users to select one or more dates.
+ * <br><br>
+ * Currently selected dates are represented with instances of <code>ui5-date</code> as
+ * children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a
+ * date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property.
+ * Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances
+ * of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the
+ * <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally.
+ * <br><br>
+ *
+ * <h3>Usage</h3>
+ *
+ * The user can navigate to a particular date by:
+ * <br>
+ * <ul>
+ * <li>Pressing over a month inside the months view</li>
+ * <li>Pressing over an year inside the years view</li>
+ * </ul>
+ * <br>
+ * The user can confirm a date selection by pressing over a date inside the days view.
+ * <br><br>
+ *
  * <h3>Keyboard Handling</h3>
-* The <code>ui5-calendar</code> provides advanced keyboard handling.
-* If the <code>ui5-calendar</code> is focused the user can
-* choose a picker by using the following shortcuts: <br>
-* <ul>
-* <li>[F4] - Shows month picker</li>
-* <li>[SHIFT] + [F4] - Shows year picker</li>
-* <br>
-* When a picker is showed and focused the user can use the following keyboard
-* shortcuts in order to perform a navigation:
-* <br>
-* - Day picker: <br>
-* <ul>
-* <li>[PAGEUP] - Navigate to the previous month</li>
-* <li>[PAGEDOWN] - Navigate to the next month</li>
-* <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li>
-* <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li>
-* <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li>
-* <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li>
-* </ul>
-* <br>
-* - Month picker: <br>
-* <ul>
-* <li>[PAGEUP] - Navigate to the previous month</li>
-* <li>[PAGEDOWN] - Navigate to the next month</li>
-* </ul>
-* <br>
-* - Year picker: <br>
-* <ul>
-* <li>[PAGEUP] - Navigate to the previous year range</li>
-* <li>[PAGEDOWN] - Navigate the next year range</li>
-* </ul>
-*/
-
-/**
- * @class
+ * The <code>ui5-calendar</code> 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:
+ * <br>
+ * - Day picker: <br>
+ * <ul>
+ * <li>[F4] - Shows month picker</li>
+ * <li>[SHIFT] + [F4] - Shows year picker</li>
+ * <li>[PAGEUP] - Navigate to the previous month</li>
+ * <li>[PAGEDOWN] - Navigate to the next month</li>
+ * <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li>
+ * <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li>
+ * <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li>
+ * <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li>
+ * <li>[HOME] - Navigate to the first day of the week</li>
+ * <li>[END] - Navigate to the last day of the week</li>
+ * <li>[CTRL] + [HOME] - Navigate to the first day of the month</li>
+ * <li>[CTRL] + [END] - Navigate to the last day of the month</li>
+ * </ul>
+ * <br>
+ * - Month picker: <br>
+ * <ul>
+ * <li>[PAGEUP] - Navigate to the previous year</li>
+ * <li>[PAGEDOWN] - Navigate to the next year</li>
+ * <li>[HOME] - Navigate to the first month of the current row</li>
+ * <li>[END] - Navigate to the last month of the current row</li>
+ * <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li>
+ * <li>[CTRL] + [END] - Navigate to the last month of the year</li>
+ * </ul>
+ * <br>
+ * - Year picker: <br>
+ * <ul>
+ * <li>[PAGEUP] - Navigate to the previous year range</li>
+ * <li>[PAGEDOWN] - Navigate the next year range</li>
+ * <li>[HOME] - Navigate to the first year of the current row</li>
+ * <li>[END] - Navigate to the last year of the current row</li>
+ * <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li>
+ * <li>[CTRL] + [END] - Navigate to the last year of the current year range</li>
+ * </ul>
+ * <br>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
+* <h3>Calendar types</h3>
+ * 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 <code>primaryCalendarType</code> property and import one or more of the following modules:
+ * <br><br>
+ *
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";</code>
+ * <br><br>
+ *
+ * Or, you can use the global configuration and set the <code>calendarType</code> key:
+ * <br>
+ * <code>
+ * &lt;script data-id="sap-ui-config" type="application/json"&gt;
+ * {
+ *	"calendarType": "Japanese"
+ * }
+ * &lt;/script&gt;
+ * </code>
  *
- * The <code>ui5-calendar</code> can be used standale to display the years, months, weeks and days,
- * but the main purpose of the <code>ui5-calendar</code> is to be used within a <code>ui5-date-picker</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Calendar";</code>
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Calendar
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @extends CalendarPart
  * @tagname ui5-calendar
+ * @appenddocs CalendarDate
  * @public
+ * @since 1.0.0-rc.11
  */
-class Calendar extends UI5Element {
+class Calendar extends CalendarPart {
 	static get metadata() {
 		return metadata;
 	}
 
-	static get render() {
-		return litRender;
-	}
-
 	static get template() {
 		return CalendarTemplate;
 	}
@@ -207,579 +253,242 @@ class Calendar extends UI5Element {
 		return calendarCSS;
 	}
 
-	constructor() {
-		super();
-		this._oLocale = getLocale();
-		this._oLocaleData = new LocaleData(this._oLocale);
-		this._header = {};
-		this._header.onPressPrevious = this._handlePrevious.bind(this);
-		this._header.onPressNext = this._handleNext.bind(this);
-		this._header.onBtn1Press = this._handleMonthButtonPress.bind(this);
-		this._header.onBtn2Press = this._handleYearButtonPress.bind(this);
-
-		this._oMonth = {};
-		this._oMonth.onSelectedDatesChange = this._handleSelectedDatesChange.bind(this);
-		this._oMonth.onNavigate = this._handleMonthNavigate.bind(this);
-
-		this._monthPicker = {};
-		this._monthPicker._hidden = true;
-		this._monthPicker.onSelectedMonthChange = this._handleSelectedMonthChange.bind(this);
-		this._monthPicker.onNavigate = this._handleYearNavigate.bind(this);
-
-		this._yearPicker = {};
-		this._yearPicker._hidden = true;
-		this._yearPicker.onSelectedYearChange = this._handleSelectedYearChange.bind(this);
-		this._yearPicker.onNavigate = this._handleYearNavigate.bind(this);
-
-		this._isShiftingYears = false;
-	}
-
-	onBeforeRendering() {
-		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType });
-		const minDateParsed = this.minDate && this.getFormat().parse(this.minDate);
-		const maxDateParsed = this.maxDate && this.getFormat().parse(this.maxDate);
-		const firstDayOfCalendarTimeStamp = this._getMinCalendarDate();
-		let currentMonth = 0;
-		let currentYear = 1;
-
-		if ((this.minDate || this.maxDate) && this._timestamp && !this.isInValidRange(this._timestamp * 1000)) {
-			if (this._minDate) {
-				this.timestamp = this._minDate / 1000;
-			} else {
-				this.timestamp = (new Date(firstDayOfCalendarTimeStamp)).getTime() / 1000;
-			}
-		}
-
-		this._oMonth.formatPattern = this._formatPattern;
-		this._oMonth.timestamp = this._timestamp;
-		this._oMonth.selectedDates = [...this._selectedDates];
-		this._oMonth.primaryCalendarType = this._primaryCalendarType;
-		this._oMonth.minDate = this.minDate;
-		this._oMonth.maxDate = this.maxDate;
-		this._header.monthText = this._oLocaleData.getMonths("wide", this._primaryCalendarType)[this._month];
-		this._header.yearText = oYearFormat.format(this._localDate, true);
-		currentMonth = this.timestamp && CalendarDate.fromTimestamp(this.timestamp * 1000).getMonth();
-		currentYear = this.timestamp && CalendarDate.fromTimestamp(this.timestamp * 1000).getYear();
-
-		// month picker
-		this._monthPicker.primaryCalendarType = this._primaryCalendarType;
-		this._monthPicker.timestamp = this._timestamp;
-
-		this._yearPicker.primaryCalendarType = this._primaryCalendarType;
-
-		if (!this._isShiftingYears) {
-			// year picker
-			this._yearPicker.timestamp = this._timestamp;
-		}
-
-		this._isShiftingYears = false;
-
-		if (!this._oMonth._hidden) {
-			if (this.minDate
-				&& minDateParsed.getMonth() === currentMonth
-				&& minDateParsed.getFullYear() === currentYear) {
-				this._header._isPrevButtonDisabled = true;
-			} else {
-				this._header._isPrevButtonDisabled = false;
-			}
-
-			if (this.maxDate
-				&& maxDateParsed.getMonth() === currentMonth
-				&& maxDateParsed.getFullYear() === currentYear) {
-				this._header._isNextButtonDisabled = true;
-			} else {
-				this._header._isNextButtonDisabled = false;
-			}
-		}
-
-		if (!this._yearPicker._hidden) {
-			currentYear = this._yearPicker.timestamp && CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000).getYear();
-			if (this.minDate
-				&& (currentYear - minDateParsed.getFullYear()) < 1) {
-				this._header._isPrevButtonDisabled = true;
-			} else {
-				this._header._isPrevButtonDisabled = false;
-			}
-
-			if (this.maxDate
-				&& (maxDateParsed.getFullYear() - currentYear) < 1) {
-				this._header._isNextButtonDisabled = true;
-			} else {
-				this._header._isNextButtonDisabled = false;
-			}
-		}
-	}
-
-	get _timestamp() {
-		return this.timestamp !== undefined ? this.timestamp : Math.floor(new Date().getTime() / 1000);
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
-
-	get _month() {
-		return this._calendarDate.getMonth();
+	/**
+	 * @private
+	 */
+	get _selectedDatesTimestamps() {
+		return this.dates.map(date => {
+			const value = date.value;
+			return value && !!this.getFormat().parse(value) ? this._getTimeStampFromString(value) / 1000 : undefined;
+		}).filter(date => !!date);
 	}
 
-	get _primaryCalendarType() {
-		return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
-	}
+	/**
+	 * @private
+	 */
+	_setSelectedDates(selectedDates) {
+		const selectedValues = selectedDates.map(timestamp => this.getFormat().format(new Date(timestamp * 1000), true)); // Format as UTC
+		const valuesInDOM = [...this.dates].map(dateElement => dateElement.value);
 
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
-	}
+		// Remove all elements for dates that are no longer selected
+		this.dates.filter(dateElement => !selectedValues.includes(dateElement.value)).forEach(dateElement => {
+			this.removeChild(dateElement);
+		});
 
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+		// Create tags for the selected dates that don't already exist in DOM
+		selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
+			const dateElement = document.createElement(CalendarDateComponent.default.getMetadata().getTag());
+			dateElement.value = value;
+			this.appendChild(dateElement);
+		});
 	}
 
-	get _selectedDates() {
-		return this.selectedDates || [];
-	}
+	async onAfterRendering() {
+		await renderFinished(); // Await for the current picker to render and then ask if it has previous/next pages
+		this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
+		this._nextButtonDisabled = !this._currentPickerDOM._hasNextPage();
 
-	get _maxDate() {
-		return this.maxDate ? this._getTimeStampFromString(this.maxDate) : this._getMaxCalendarDate();
-	}
+		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		this._headerMonthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
 
-	get _minDate() {
-		return this.minDate ? this._getTimeStampFromString(this.minDate) : this._getMinCalendarDate();
-	}
+		if (this._currentPicker === "year") {
+			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
+			rangeStart.setYear(this._currentPickerDOM._firstYear);
+			rangeEnd.setYear(this._currentPickerDOM._lastYear);
 
-	_getTimeStampFromString(value) {
-		const jsDate = this.getFormat().parse(value);
-		if (jsDate) {
-			const jsDateTimeNow = Date.UTC(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate());
-			const calDate = CalendarDate.fromTimestamp(jsDateTimeNow, this._primaryCalendarType);
-			return calDate.valueOf();
+			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
+		} else {
+			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 		}
-		return undefined;
 	}
 
-	_getMinCalendarDate() {
-		const minDate = new CalendarDate(1, 0, 1, this._primaryCalendarType);
-		minDate.setYear(1);
-		minDate.setMonth(0);
-		minDate.setDate(1);
-		return minDate.valueOf();
+	/**
+	 * The user clicked the "month" button in the header
+	 */
+	onHeaderShowMonthPress(event) {
+		this._currentPickerDOM._autoFocus = false;
+		this._currentPicker = "month";
+		this.fireEvent("show-month-press", event);
 	}
 
-	_getMaxCalendarDate() {
-		const maxDate = new CalendarDate(1, 0, 1, this._primaryCalendarType);
-		maxDate.setYear(9999);
-		maxDate.setMonth(11);
-		const tempDate = new CalendarDate(maxDate, this._primaryCalendarType);
-		tempDate.setDate(1);
-		tempDate.setMonth(tempDate.getMonth() + 1, 0);
-		maxDate.setDate(tempDate.getDate());// 31st for Gregorian Calendar
-		return maxDate.valueOf();
+	/**
+	 * The user clicked the "year" button in the header
+	 */
+	onHeaderShowYearPress(event) {
+		this._currentPickerDOM._autoFocus = false;
+		this._currentPicker = "year";
+		this.fireEvent("show-year-press", event);
 	}
 
-	_onkeydown(event) {
-		if (isF4(event) && this._monthPicker._hidden) {
-			this._showMonthPicker();
-			if (!this._yearPicker._hidden) {
-				this._hideYearPicker();
-			}
-		}
-
-		if (isF4Shift(event) && this._yearPicker._hidden) {
-			this._showYearPicker();
-			if (!this._monthPicker._hidden) {
-				this._hideMonthPicker();
-			}
-		}
+	get _currentPickerDOM() {
+		return this.shadowRoot.querySelector(`[ui5-${this._currentPicker}picker]`);
 	}
 
-	_handleSelectedDatesChange(event) {
-		this.selectedDates = [...event.detail.dates];
-
-		this.fireEvent("selected-dates-change", { dates: event.detail.dates });
+	/**
+	 * The year clicked the "Previous" button in the header
+	 */
+	onHeaderPreviousPress() {
+		this._currentPickerDOM._showPreviousPage();
 	}
 
-	_handleMonthNavigate(event) {
-		this.timestamp = event.detail.timestamp;
+	/**
+	 * The year clicked the "Next" button in the header
+	 */
+	onHeaderNextPress() {
+		this._currentPickerDOM._showNextPage();
 	}
 
-	_handleYearNavigate(event) {
-		if (event.detail.start) {
-			this._handlePrevious();
-		}
-
-		if (event.detail.end) {
-			this._handleNext();
+	get secondaryCalendarTypeButtonText() {
+		if (!this.secondaryCalendarType) {
+			return;
 		}
-	}
-
-	_handleSelectedMonthChange(event) {
-		const oNewDate = this._calendarDate;
-		const newMonthIndex = CalendarDate.fromTimestamp(
-			event.detail.timestamp * 1000,
-			this._primaryCalendarType
-		).getMonth();
-
-		oNewDate.setMonth(newMonthIndex);
-		this.timestamp = oNewDate.valueOf() / 1000;
-
-		this._hideMonthPicker();
 
-		this._focusFirstDayOfMonth(oNewDate);
+		const localDate = new Date(this._timestamp * 1000);
+		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		const secondMonthInfo = this._getDisplayedSecondaryMonthText();
+		const secondYearText = secondYearFormat.format(localDate, true);
+		return {
+			yearButtonText: secondYearText,
+			monthButtonText: secondMonthInfo.text,
+			monthButtonInfo: secondMonthInfo.info,
+		};
 	}
 
-	_focusFirstDayOfMonth(targetDate) {
-		let fistDayOfMonthIndex = -1;
+	_getDisplayedSecondaryMonthText() {
+		const month = this._getDisplayedSecondaryMonths();
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		const pattern = localeData.getIntervalPattern();
+		const secondaryMonthsNames = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
+		const secondaryMonthsNamesWide = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("wide", this.secondaryCalendarType);
 
-		// focus first day of the month
-		const dayPicker = this.shadowRoot.querySelector("[ui5-daypicker]");
-
-		dayPicker._getVisibleDays(targetDate).forEach((date, index) => {
-			if (date.getDate() === 1 && (fistDayOfMonthIndex === -1)) {
-				fistDayOfMonthIndex = index;
-			}
-		});
+		if (month.startMonth === month.endMonth) {
+			return {
+				text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
+				textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
+			};
+		}
 
-		dayPicker._itemNav.currentIndex = fistDayOfMonthIndex;
-		dayPicker._itemNav.focusCurrent();
+		return {
+			text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
+			textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
+		};
 	}
 
-	_handleSelectedYearChange(event) {
-		const oNewDate = CalendarDate.fromTimestamp(
-			event.detail.timestamp * 1000,
-			this._primaryCalendarType
-		);
-		oNewDate.setMonth(0);
-		oNewDate.setDate(1);
+	_getDisplayedSecondaryMonths() {
+		const localDate = new Date(this._timestamp * 1000);
+		let firstDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
+		firstDate.setDate(1);
+		firstDate = new CalendarDate(firstDate, this.secondaryCalendarType);
+		const startMonth = firstDate.getMonth();
 
-		this.timestamp = oNewDate.valueOf() / 1000;
+		let lastDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
+		lastDate.setDate(this._getDaysInMonth(lastDate));
+		lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
+		const endMonth = lastDate.getMonth();
 
-		this._hideYearPicker();
-
-		this._focusFirstDayOfMonth(oNewDate);
+		return { startMonth, endMonth };
 	}
 
-	_handleMonthButtonPress() {
-		this._hideYearPicker();
-
-		this[`_${this._monthPicker._hidden ? "show" : "hide"}MonthPicker`]();
+	_getDaysInMonth(date) {
+		const tempCalendarDate = new CalendarDate(date);
+		tempCalendarDate.setDate(1);
+		tempCalendarDate.setMonth(tempCalendarDate.getMonth() + 1);
+		tempCalendarDate.setDate(0);
+		return tempCalendarDate.getDate();
 	}
 
-	_handleYearButtonPress() {
-		this._hideMonthPicker();
-
-		this[`_${this._yearPicker._hidden ? "show" : "hide"}YearPicker`]();
+	/**
+	 * The month button is hidden when the month picker or year picker is shown
+	 * @returns {boolean}
+	 * @private
+	 */
+	get _isHeaderMonthButtonHidden() {
+		return this._currentPicker === "month" || this._currentPicker === "year";
 	}
 
-	_handlePrevious() {
-		if (this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showPrevMonth();
-		} else if (this._monthPicker._hidden && !this._yearPicker._hidden) {
-			this._showPrevPageYears();
-		} else if (!this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showPrevYear();
-		}
+	get _isDayPickerHidden() {
+		return this._currentPicker !== "day";
 	}
 
-	_handleNext() {
-		if (this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showNextMonth();
-		} else if (this._monthPicker._hidden && !this._yearPicker._hidden) {
-			this._showNextPageYears();
-		} else if (!this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showNextYear();
-		}
+	get _isMonthPickerHidden() {
+		return this._currentPicker !== "month";
 	}
 
-	_showNextMonth() {
-		const nextMonth = this._calendarDate;
-		const maxCalendarDateYear = CalendarDate.fromTimestamp(this._getMaxCalendarDate(), this._primaryCalendarType).getYear();
-		nextMonth.setDate(1);
-		nextMonth.setMonth(nextMonth.getMonth() + 1);
-
-		if (nextMonth.getYear() > maxCalendarDateYear) {
-			return;
-		}
-
-		if (!this.isInValidRange(nextMonth.toLocalJSDate().valueOf())) {
-			return;
-		}
-
-		this._focusFirstDayOfMonth(nextMonth);
-		this.timestamp = nextMonth.valueOf() / 1000;
+	get _isYearPickerHidden() {
+		return this._currentPicker !== "year";
 	}
 
-	_showPrevMonth() {
-		let iNewMonth = this._month - 1,
-			iNewYear = this._calendarDate.getYear();
-
-		const minCalendarDateYear = CalendarDate.fromTimestamp(this._getMinCalendarDate(), this._primaryCalendarType).getYear();
-
-		// focus first day of the month
-		const dayPicker = this.shadowRoot.querySelector("[ui5-daypicker]");
-		const currentMonthDate = dayPicker._calendarDate.setMonth(dayPicker._calendarDate.getMonth());
-		const lastMonthDate = dayPicker._calendarDate.setMonth(dayPicker._calendarDate.getMonth() - 1);
-
-		// set the date to last day of last month
-		currentMonthDate.setDate(-1);
-
-		// find the index of the last day
-		let lastDayOfMonthIndex = -1;
-
-		if (!this.isInValidRange(currentMonthDate.toLocalJSDate().valueOf())) {
-			return;
-		}
-
-		dayPicker._getVisibleDays(lastMonthDate).forEach((date, index) => {
-			const isSameDate = currentMonthDate.getDate() === date.getDate();
-			const isSameMonth = currentMonthDate.getMonth() === date.getMonth();
-
-			if (isSameDate && isSameMonth) {
-				lastDayOfMonthIndex = (index + 1);
-			}
+	onSelectedDatesChange(event) {
+		const timestamp = event.detail.timestamp;
+		const selectedDates = event.detail.dates;
+		const datesValues = selectedDates.map(ts => {
+			const calendarDate = CalendarDate.fromTimestamp(ts * 1000, this._primaryCalendarType);
+			return this.getFormat().format(calendarDate.toUTCJSDate(), true);
 		});
 
-		const weekDaysCount = 7;
-
-		if (lastDayOfMonthIndex !== -1) {
-			// find the DOM for the last day index
-			const lastDay = dayPicker.shadowRoot.querySelector(".ui5-dp-content").children[parseInt(lastDayOfMonthIndex / weekDaysCount) + 1].children[(lastDayOfMonthIndex % weekDaysCount)];
-
-			// update current item in ItemNavigation
-			dayPicker._itemNav.current = lastDayOfMonthIndex;
-
-			// focus the item
-			lastDay.focus();
-		}
-
-		if (iNewMonth > 11) {
-			iNewMonth = 0;
-			iNewYear = this._calendarDate.getYear() + 1;
-		}
-
-		if (iNewMonth < 0) {
-			iNewMonth = 11;
-			iNewYear = this._calendarDate.getYear() - 1;
+		this.timestamp = timestamp;
+		const defaultPrevented = !this.fireEvent("selected-dates-change", { timestamp, dates: [...selectedDates], values: datesValues }, true);
+		if (!defaultPrevented) {
+			this._setSelectedDates(selectedDates);
 		}
-
-		const oNewDate = this._calendarDate;
-		oNewDate.setYear(iNewYear);
-		oNewDate.setMonth(iNewMonth);
-
-
-		if (oNewDate.getYear() < minCalendarDateYear) {
-			return;
-		}
-		this.timestamp = oNewDate.valueOf() / 1000;
-	}
-
-	_showNextYear() {
-		const maxCalendarDateYear = CalendarDate.fromTimestamp(this._getMaxCalendarDate(), this._primaryCalendarType).getYear();
-		if (this._calendarDate.getYear() === maxCalendarDateYear) {
-			return;
-		}
-
-		const newDate = this._calendarDate;
-		newDate.setYear(this._calendarDate.getYear() + 1);
-
-		this.timestamp = newDate.valueOf() / 1000;
-	}
-
-	_showPrevYear() {
-		const minCalendarDateYear = CalendarDate.fromTimestamp(this._getMinCalendarDate(), this._primaryCalendarType).getYear();
-		if (this._calendarDate.getYear() === minCalendarDateYear) {
-			return;
-		}
-
-		const oNewDate = this._calendarDate;
-		oNewDate.setYear(this._calendarDate.getYear() - 1);
-
-		this.timestamp = oNewDate.valueOf() / 1000;
 	}
 
-	_showNextPageYears() {
-		if (!this._isYearInRange(this._yearPicker.timestamp,
-			YearPicker._ITEMS_COUNT - YearPicker._MIDDLE_ITEM_INDEX,
-			CalendarDate.fromTimestamp(this._minDate, this._primaryCalendarType).getYear(),
-			CalendarDate.fromTimestamp(this._maxDate, this._primaryCalendarType).getYear())) {
-			return;
-		}
-
-		const newDate = CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000, this._primaryCalendarType);
-		newDate.setYear(newDate.getYear() + YearPicker._ITEMS_COUNT);
-
-		this._yearPicker = Object.assign({}, this._yearPicker, {
-			timestamp: newDate.valueOf() / 1000,
-		});
-
-		this.timestamp = this._yearPicker.timestamp;
-
-		this._isShiftingYears = true;
-	}
-
-	_showPrevPageYears() {
-		if (!this._isYearInRange(this._yearPicker.timestamp,
-			-YearPicker._MIDDLE_ITEM_INDEX - 1,
-			CalendarDate.fromTimestamp(this._minDate, this._primaryCalendarType).getYear(),
-			CalendarDate.fromTimestamp(this._maxDate, this._primaryCalendarType).getYear())) {
-			return;
-		}
-
-		const newDate = CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000, this._primaryCalendarType);
-		newDate.setYear(newDate.getYear() - YearPicker._ITEMS_COUNT);
-
-		this._yearPicker = Object.assign({}, this._yearPicker, {
-			timestamp: newDate.valueOf() / 1000,
-		});
-
-		this.timestamp = this._yearPicker.timestamp;
-
-		this._isShiftingYears = true;
-	}
-
-	_showMonthPicker() {
-		this._monthPicker = Object.assign({}, this._monthPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		this._monthPicker.timestamp = this._timestamp;
-		this._monthPicker._hidden = false;
-		this._oMonth._hidden = true;
-
-		const calendarRect = this.shadowRoot.querySelector(".ui5-cal-root").getBoundingClientRect();
-
-		this._calendarWidth = calendarRect.width.toString();
-		this._calendarHeight = calendarRect.height.toString();
+	onSelectedMonthChange(event) {
+		this.timestamp = event.detail.timestamp;
+		this._currentPicker = "day";
+		this._currentPickerDOM._autoFocus = true;
 	}
 
-	_showYearPicker() {
-		this._yearPicker = Object.assign({}, this._yearPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		this._yearPicker.timestamp = this._timestamp;
-		this._yearPicker._selectedYear = this._calendarDate.getYear();
-		this._yearPicker._hidden = false;
-		this._oMonth._hidden = true;
-
-		const calendarRect = this.shadowRoot.querySelector(".ui5-cal-root").getBoundingClientRect();
-
-		this._calendarWidth = calendarRect.width.toString();
-		this._calendarHeight = calendarRect.height.toString();
+	onSelectedYearChange(event) {
+		this.timestamp = event.detail.timestamp;
+		this._currentPicker = "day";
+		this._currentPickerDOM._autoFocus = true;
 	}
 
-	_hideMonthPicker() {
-		this._monthPicker = Object.assign({}, this._monthPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		if (this._yearPicker._hidden) {
-			this._oMonth._hidden = false;
-		}
-		this._monthPicker._hidden = true;
+	onNavigate(event) {
+		this.timestamp = event.detail.timestamp;
 	}
 
-	_hideYearPicker() {
-		this._yearPicker = Object.assign({}, this._yearPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		if (this._monthPicker._hidden) {
-			this._oMonth._hidden = false;
+	_onkeydown(event) {
+		if (isF4(event) && this._currentPicker !== "month") {
+			this._currentPicker = "month";
 		}
-		this._yearPicker._hidden = true;
-	}
 
-	_isYearInRange(timestamp, yearsoffset, minYear, maxYear) {
-		if (timestamp) {
-			const oCalDate = CalendarDate.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
-			oCalDate.setMonth(0);
-			oCalDate.setDate(1);
-			oCalDate.setYear(oCalDate.getYear() + yearsoffset);
-			return oCalDate.getYear() >= minYear && oCalDate.getYear() <= maxYear;
+		if (isF4Shift(event) && this._currentPicker !== "year") {
+			this._currentPicker = "year";
 		}
 	}
 
-	get classes() {
-		return {
-			main: {
-				"ui5-cal-root": true,
-			},
-			dayPicker: {
-				".ui5-daypicker--hidden": !this._yearPicker._hidden || !this._monthPicker._hidden,
-			},
-			yearPicker: {
-				"ui5-yearpicker--hidden": this._yearPicker._hidden,
-			},
-			monthPicker: {
-				"ui5-monthpicker--hidden": this._monthPicker._hidden,
-			},
-		};
-	}
-
 	/**
-	 * Checks if a date is in range between minimum and maximum date
-	 * @param {object} value
-	 * @public
+	 * Returns an array of UTC timestamps, representing the selected dates.
+	 * @protected
+	 * @deprecated
 	 */
-	isInValidRange(value = "") {
-		const pickedDate = CalendarDate.fromTimestamp(value).toLocalJSDate(),
-			minDate = this._minDate && new Date(this._minDate),
-			maxDate = this._maxDate && new Date(this._maxDate);
-
-		if (minDate && maxDate) {
-			if (minDate <= pickedDate && maxDate >= pickedDate) {
-				return true;
-			}
-		} else if (minDate && !maxDate) {
-			if (minDate <= pickedDate) {
-				return true;
-			}
-		} else if (maxDate && !minDate) {
-			if (maxDate >= pickedDate) {
-				return true;
-			}
-		} else if (!maxDate && !minDate) {
-			return true;
-		}
-
-		return false;
+	get selectedDates() {
+		return this._selectedDatesTimestamps;
 	}
 
-	getFormat() {
-		if (this._isPattern) {
-			this._oDateFormat = DateFormat.getInstance({
-				pattern: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		} else {
-			this._oDateFormat = DateFormat.getInstance({
-				style: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		}
-		return this._oDateFormat;
-	}
-
-	get styles() {
-		return {
-			main: {
-				"height": `${this._calendarHeight ? `${this._calendarHeight}px` : "auto"}`,
-				"width": `${this._calendarWidth ? `${this._calendarWidth}px` : "auto"}`,
-			},
-		};
+	/**
+	 * Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps
+	 * @protected
+	 * @deprecated
+	 * @param selectedDates Array of UTC timestamps
+	 */
+	set selectedDates(selectedDates) {
+		this._setSelectedDates(selectedDates);
 	}
 
 	static get dependencies() {
 		return [
+			CalendarDateComponent.default,
 			CalendarHeader,
 			DayPicker,
 			MonthPicker,
 			YearPicker,
 		];
 	}
-
-	static async onDefine() {
-		await fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript());
-	}
 }
 
 Calendar.define();