diff --git a/packages/base/src/types/CalendarSelection.js b/packages/base/src/types/CalendarSelection.js
new file mode 100644
index 000000000000..3850573e37b9
--- /dev/null
+++ b/packages/base/src/types/CalendarSelection.js
@@ -0,0 +1,17 @@
+import DataType from "./DataType.js";
+
+const CalendarSelections = {
+	Single: "Single",
+	Multiple: "Multiple",
+	Range: "Range",
+};
+
+class CalendarSelection extends DataType {
+	static isValid(value) {
+		return !!CalendarSelections[value];
+	}
+}
+
+CalendarSelection.generateTypeAcessors(CalendarSelections);
+
+export default CalendarSelection;
diff --git a/packages/main/src/Calendar.hbs b/packages/main/src/Calendar.hbs
index f1d364cec13c..50ed216837a2 100644
--- a/packages/main/src/Calendar.hbs
+++ b/packages/main/src/Calendar.hbs
@@ -1,7 +1,8 @@
 <div
 	class="{{classes.main}}"
 	style="{{styles.main}} "
-	@keydown={{_onkeydown}}	
+	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
 >
 
 	<ui5-calendar-header
@@ -16,6 +17,7 @@
 		._isNextButtonDisabled="{{_header._isNextButtonDisabled}}"
 		._isPrevButtonDisabled="{{_header._isPrevButtonDisabled}}"
 		._isMonthButtonHidden="{{_header._isMonthButtonHidden}}"
+		._tabIndex="{{_header.tabIndex}}"
 	></ui5-calendar-header>
 
 	<div id="{{_id}}-content">
@@ -26,6 +28,7 @@
 			.selectedDates="{{_oMonth.selectedDates}}"
 			._hidden="{{_oMonth._hidden}}"
 			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
+			.selection="{{_oMonth.selection}}"
 			.minDate="{{_oMonth.minDate}}"
 			.maxDate="{{_oMonth.maxDate}}"
 			timestamp="{{_oMonth.timestamp}}"
diff --git a/packages/main/src/Calendar.js b/packages/main/src/Calendar.js
index 5d96be05d445..4e94d6ecf3be 100644
--- a/packages/main/src/Calendar.js
+++ b/packages/main/src/Calendar.js
@@ -7,8 +7,15 @@ import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
+import CalendarSelection from "@ui5/webcomponents-base/dist/types/CalendarSelection.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import { isF4, isF4Shift } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isF4,
+	isF4Shift,
+	isTabNext,
+	isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
 import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
@@ -29,15 +36,6 @@ import calendarCSS from "./generated/themes/Calendar.css.js";
 const metadata = {
 	tag: "ui5-calendar",
 	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.
@@ -49,6 +47,24 @@ const metadata = {
 			type: CalendarType,
 		},
 
+		/**
+		 * Defines the type of selection used in the calendar component.
+		 * The property takes as value an object of type <code>CalendarSelection</code>.
+		 * Accepted property values are:<br>
+		 * <ul>
+		 * <li><code>CalendarSelection.Single</code> - enables a single date selection.(default value)</li>
+		 * <li><code>CalendarSelection.Range</code> - enables selection of a date range.</li>
+		 * <li><code>CalendarSelection.Multiple</code> - enables selection of multiple dates.</li>
+		 * </ul>
+		 * @type {CalendarSelection}
+		 * @defaultvalue "Single"
+		 * @public
+		 */
+		selection: {
+			type: CalendarSelection,
+			defaultValue: CalendarSelection.Single,
+		},
+
 		/**
 		 * Defines the selected dates as UTC timestamps.
 		 * @type {Array}
@@ -64,7 +80,6 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
 		 * @public
 		 */
 		minDate: {
@@ -76,7 +91,6 @@ const metadata = {
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
 		 * @public
 		 */
 		maxDate: {
@@ -93,12 +107,20 @@ const metadata = {
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
-		 * @since 1.0.0-rc.8
 		 */
 		hideWeekNumbers: {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
+		 * @type {Integer}
+		 * @private
+		*/
+		timestamp: {
+			type: Integer,
+		},
+
 		_header: {
 			type: Object,
 		},
@@ -133,55 +155,74 @@ const metadata = {
 		/**
 		 * Fired when the selected dates changed.
 		 * @event sap.ui.webcomponents.main.Calendar#selected-dates-change
-		 * @param {Array} dates The selected dates' timestamps
+		 * @param {Array} dates The selected dates timestamps
 		 * @public
 		 */
-		"selected-dates-change": { type: Array },
+		"selected-dates-change": {
+			detail: {
+				dates: { type: Array },
+			},
+		 },
 	},
 };
 
 /**
  * @class
  *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-calendar</code> can be used stand alone to display the years, months, weeks and days
+ * <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 comfirm 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.
+ * 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>
+ * <br>
+ *
+ * <h3>ES6 Module Import</h3>
  *
- * 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>.
+ * <code>import "@ui5/webcomponents/dist/Calendar";</code>
  *
  * @constructor
  * @author SAP SE
@@ -189,6 +230,7 @@ const metadata = {
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-calendar
  * @public
+ * @since 1.0.0-rc.11
  */
 class Calendar extends UI5Element {
 	static get metadata() {
@@ -219,6 +261,7 @@ class Calendar extends UI5Element {
 		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);
@@ -247,12 +290,14 @@ class Calendar extends UI5Element {
 
 		this._oMonth.formatPattern = this._formatPattern;
 		this._oMonth.timestamp = this._timestamp;
-		this._oMonth.selectedDates = [...this._selectedDates];
+		this._oMonth.selectedDates = [...this.selectedDates];
 		this._oMonth.primaryCalendarType = this._primaryCalendarType;
+		this._oMonth.selection = this.selection;
 		this._oMonth.minDate = this.minDate;
 		this._oMonth.maxDate = this.maxDate;
 		this._header.monthText = localeData.getMonths("wide", this._primaryCalendarType)[this._month];
 		this._header.yearText = oYearFormat.format(this._localDate, true);
+		this._header.tabIndex = "-1";
 
 		// month picker
 		this._monthPicker.primaryCalendarType = this._primaryCalendarType;
@@ -270,6 +315,10 @@ class Calendar extends UI5Element {
 		this._refreshNavigationButtonsState();
 	}
 
+	onAfterRendering() {
+		this._setDayPickerCurrentIndex(this._calendarDate, false);
+	}
+
 	_refreshNavigationButtonsState() {
 		const minDateParsed = this.minDate && this.getFormat().parse(this.minDate);
 		const maxDateParsed = this.maxDate && this.getFormat().parse(this.maxDate);
@@ -334,6 +383,30 @@ class Calendar extends UI5Element {
 		}
 	}
 
+	get dayPicker() {
+		return this.shadowRoot.querySelector("ui5-daypicker");
+	}
+
+	get monthPicker() {
+		return this.shadowRoot.querySelector("ui5-monthpicker");
+	}
+
+	get yearPicker() {
+		return this.shadowRoot.querySelector("ui5-yearpicker");
+	}
+
+	get header() {
+		return this.shadowRoot.querySelector("ui5-calendar-header");
+	}
+
+	get monthButton() {
+		return this.header.shadowRoot.querySelector("[data-sap-show-picker='Month']");
+	}
+
+	get yearButton() {
+		return this.header.shadowRoot.querySelector("[data-sap-show-picker='Year']");
+	}
+
 	get _timestamp() {
 		return this.timestamp !== undefined ? this.timestamp : Math.floor(new Date().getTime() / 1000);
 	}
@@ -416,14 +489,84 @@ class Calendar extends UI5Element {
 				this._hideMonthPicker();
 			}
 		}
+
+		if (isTabNext(event)) {
+			this._handleTabNext(event);
+		}
+
+		if (isTabPrevious(event)) {
+			this._handleTabPrevous(event);
+		}
 	}
 
-	_handleSelectedDatesChange(event) {
-		this.selectedDates = [...event.detail.dates];
+	_handleTabNext(event) {
+		const target = event.target;
+
+		if (target.tagName === "UI5-DAYPICKER" || target.tagName === "UI5-MONTHPICKER" || target.tagName === "UI5-YEARPICKER") {
+			if (this.monthButton.getAttribute("hidden") === null) {
+				this.monthButton.focus();
+			} else {
+				this.yearButton.focus();
+			}
+			event.preventDefault();
+		} else if (target.tagName === "UI5-CALENDAR-HEADER" && event.path[0].getAttribute("data-sap-show-picker") === "Month") {
+			this.yearButton.focus();
+			event.preventDefault();
+		} else {
+			this._setPickerCurrentTabindex(-1);
+		}
+	}
+
+	_handleTabPrevous(event) {
+		const target = event.target;
+
+		if (target.tagName === "UI5-CALENDAR-HEADER" && event.path[0].getAttribute("data-sap-show-picker") === "Month") {
+			this._moveFocusToPickerContent();
+			event.preventDefault();
+		} else if (target.tagName === "UI5-CALENDAR-HEADER" && event.path[0].getAttribute("data-sap-show-picker") === "Year") {
+			if (this.monthButton.getAttribute("hidden") === null) {
+				this.monthButton.focus();
+			} else {
+				this._moveFocusToPickerContent();
+			}
+			event.preventDefault();
+		}
+	}
+
+	_moveFocusToPickerContent() {
+		if (!this._oMonth._hidden) {
+			this.dayPicker._itemNav.focusCurrent();
+		} else if (!this._monthPicker._hidden) {
+			this.monthPicker._itemNav.focusCurrent();
+		} else {
+			this.yearPicker._itemNav.focusCurrent();
+		}
+	}
+
+	_onfocusout(event) {
+		this._header.tabIndex = "-1";
+		this._setPickerCurrentTabindex(0);
+	}
+
+	_setPickerCurrentTabindex(index) {
+		if (this.dayPicker) {
+			this.dayPicker._setCurrentItemTabIndex(index);
+		}
+
+		if (this.monthPicker) {
+			this.monthPicker._setCurrentItemTabIndex(index);
+		}
 
-		this.timestamp = this.selectedDates[0];
+		if (this.yearPicker) {
+			this.yearPicker._setCurrentItemTabIndex(index);
+		}
+	}
 
-		this.fireEvent("selected-dates-change", { dates: event.detail.dates });
+	_handleSelectedDatesChange(event) {
+		const selectedDates = event.detail.dates;
+		this.timestamp = selectedDates[selectedDates.length - 1];
+		this.selectedDates = [...selectedDates];
+		this.fireEvent("selected-dates-change", { dates: selectedDates });
 	}
 
 	_handleMonthNavigate(event) {
@@ -444,16 +587,14 @@ class Calendar extends UI5Element {
 		let fistDayOfMonthIndex = -1;
 
 		// focus first day of the month
-		const dayPicker = this.shadowRoot.querySelector("[ui5-daypicker]");
-
-		dayPicker._getVisibleDays(targetDate).forEach((date, index) => {
+		this.dayPicker._getVisibleDays(targetDate).forEach((date, index) => {
 			if (date.getDate() === 1 && (fistDayOfMonthIndex === -1)) {
 				fistDayOfMonthIndex = index;
 			}
 		});
 
-		dayPicker._itemNav.currentIndex = fistDayOfMonthIndex;
-		dayPicker._itemNav.focusCurrent();
+		this.dayPicker._itemNav.currentIndex = fistDayOfMonthIndex;
+		this.dayPicker._itemNav.focusCurrent();
 	}
 
 	_handleSelectedMonthChange(event) {
@@ -465,7 +606,7 @@ class Calendar extends UI5Element {
 		this._monthPicker.timestamp = this.timestamp;
 
 		this._hideMonthPicker();
-		this._setDayPickerCurrentIndex(oNewDate);
+		this._setDayPickerCurrentIndex(oNewDate, true);
 	}
 
 	_handleSelectedYearChange(event) {
@@ -477,14 +618,19 @@ class Calendar extends UI5Element {
 		this._yearPicker.timestamp = this.timestamp;
 
 		this._hideYearPicker();
-		this._setDayPickerCurrentIndex(oNewDate);
+		this._setDayPickerCurrentIndex(oNewDate, true);
 	}
 
-	_setDayPickerCurrentIndex(calDate) {
+	async _setDayPickerCurrentIndex(calDate, applyFocus) {
+		await RenderScheduler.whenFinished();
 		const currentDate = new CalendarDate(calDate);
-		const dayPicker = this.shadowRoot.querySelector("[ui5-daypicker]");
-		const currentDateIndex = dayPicker._getVisibleDays(currentDate).findIndex(date => date.valueOf() === currentDate.valueOf());
-		dayPicker._itemNav.currentIndex = currentDateIndex;
+		const currentDateIndex = this.dayPicker._getVisibleDays(currentDate).findIndex(date => date.valueOf() === currentDate.valueOf());
+		this.dayPicker._itemNav.currentIndex = currentDateIndex;
+		if (applyFocus) {
+			this.dayPicker._itemNav.focusCurrent();
+		} else {
+			this.dayPicker._itemNav.update();
+		}
 	}
 
 	_handleMonthButtonPress() {
@@ -496,7 +642,6 @@ class Calendar extends UI5Element {
 
 	_handleYearButtonPress() {
 		this._hideMonthPicker();
-
 		this[`_${this._yearPicker._hidden ? "show" : "hide"}YearPicker`]();
 	}
 
@@ -545,9 +690,8 @@ class Calendar extends UI5Element {
 		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);
+		const currentMonthDate = this.dayPicker._calendarDate.setMonth(this.dayPicker._calendarDate.getMonth());
+		const lastMonthDate = this.dayPicker._calendarDate.setMonth(this.dayPicker._calendarDate.getMonth() - 1);
 
 		// set the date to last day of last month
 		currentMonthDate.setDate(-1);
@@ -559,7 +703,7 @@ class Calendar extends UI5Element {
 			return;
 		}
 
-		dayPicker._getVisibleDays(lastMonthDate).forEach((date, index) => {
+		this.dayPicker._getVisibleDays(lastMonthDate).forEach((date, index) => {
 			const isSameDate = currentMonthDate.getDate() === date.getDate();
 			const isSameMonth = currentMonthDate.getMonth() === date.getMonth();
 
@@ -570,10 +714,10 @@ class Calendar extends UI5Element {
 
 		if (lastDayOfMonthIndex !== -1) {
 			// find the DOM for the last day index
-			const lastDay = dayPicker.shadowRoot.querySelectorAll(".ui5-dp-content .ui5-dp-item")[lastDayOfMonthIndex];
+			const lastDay = this.dayPicker.shadowRoot.querySelectorAll(".ui5-dp-content .ui5-dp-item")[lastDayOfMonthIndex];
 
 			// update current item in ItemNavigation
-			dayPicker._itemNav.current = lastDayOfMonthIndex;
+			this.dayPicker._itemNav.current = lastDayOfMonthIndex;
 
 			// focus the item
 			lastDay.focus();
diff --git a/packages/main/src/CalendarHeader.hbs b/packages/main/src/CalendarHeader.hbs
index cab203d3ceac..aa23e27e30b0 100644
--- a/packages/main/src/CalendarHeader.hbs
+++ b/packages/main/src/CalendarHeader.hbs
@@ -26,7 +26,7 @@
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			?hidden="{{_isMonthButtonHidden}}"
 			type="{{_btn1.type}}"
-			tabindex="0"
+			tabindex="{{_tabIndex}}"
 			@click={{_showMonthPicker}}
 			data-sap-show-picker="Month"
 		>
@@ -37,7 +37,7 @@
 			id="{{_id}}-btn2"
 			class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
 			type="{{_btn2.type}}"
-			tabindex="0"
+			tabindex="{{_tabIndex}}"
 			@click={{_showYearPicker}}
 			data-sap-show-picker="Year"
 		>
diff --git a/packages/main/src/CalendarHeader.js b/packages/main/src/CalendarHeader.js
index 65470d6f6d1d..4244902f1e21 100644
--- a/packages/main/src/CalendarHeader.js
+++ b/packages/main/src/CalendarHeader.js
@@ -46,6 +46,10 @@ const metadata = {
 		_isMonthButtonHidden: {
 			type: Boolean,
 		},
+		_tabIndex: {
+			type: String,
+			defaultValue: "0",
+		},
 	},
 	events: {
 		"previous-press": {},
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
index 4c30167a1175..1b658c85b523 100644
--- a/packages/main/src/DatePicker.hbs
+++ b/packages/main/src/DatePicker.hbs
@@ -1,7 +1,7 @@
 <div
 		class="ui5-date-picker-root"
 		style="{{styles.main}}"
-		@keydown={{_onkeydown}}
+		@keydown="{{_onkeydown}}"
 		@focusout="{{_onfocusout}}"
 >
 	<!-- INPUT -->
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index 2509a42ce83e..8e4b07da60dd 100644
--- a/packages/main/src/DatePicker.js
+++ b/packages/main/src/DatePicker.js
@@ -25,6 +25,7 @@ import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
+import CalendarSelection from "@ui5/webcomponents-base/dist/types/CalendarSelection.js";
 import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
 import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
 import Icon from "./Icon.js";
@@ -429,7 +430,6 @@ class DatePicker extends UI5Element {
 				}
 
 				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
-				dayPicker._inputLiveChangeTrigger = false;
 				const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected");
 				const today = dayPicker.shadowRoot.querySelector(".ui5-dp-item--now");
 				let focusableDay = selectedDay || today;
@@ -455,6 +455,7 @@ class DatePicker extends UI5Element {
 
 		this._calendar = {
 			onSelectedDatesChange: this._handleCalendarChange.bind(this),
+			selection: CalendarSelection.Single,
 			selectedDates: [],
 		};
 
@@ -482,9 +483,10 @@ class DatePicker extends UI5Element {
 			this.maxDate = null;
 			console.warn(`In order for the "maxDate" property to have effect, you should enter valid date format`); // eslint-disable-line
 		}
-		if (this._checkValueValidity(this.value) || this.checkRealValueValidity()) {
+
+		if (this._checkValueValidity(this.value)) {
 			this._changeCalendarSelection();
-		} else {
+		} else if (this.value !== "") {
 			this._calendar.selectedDates = [];
 		}
 
@@ -669,15 +671,6 @@ class DatePicker extends UI5Element {
 		const emptyValue = nextValue === "";
 		const isValid = emptyValue || this._checkValueValidity(nextValue);
 
-		if (this.responsivePopover) {
-			const calendar = this.calendar;
-			const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
-			// If day picker component rerendering is triggered due to a change in the date picker component input filed,
-			// then mark this trigger and avoid moving the focus from the date picker input field throughout the on after
-			// rendering hook of the day picker component
-			dayPicker._inputLiveChangeTrigger = true;
-		}
-
 		this.value = nextValue;
 		this.fireEvent("input", { value: nextValue, valid: isValid });
 	}
@@ -686,13 +679,6 @@ class DatePicker extends UI5Element {
 		return this.isValid(value) && this.isInValidRange(this._getTimeStampFromString(value));
 	}
 
-	/**
-	 * This method is used in the derived classes
-	 */
-	checkRealValueValidity() {
-		return false;
-	}
-
 	_click(event) {
 		if (isPhone()) {
 			this.responsivePopover.open(this);
@@ -921,7 +907,7 @@ class DatePicker extends UI5Element {
 		this._updateValueCalendarSelectedDatesChange(newValue);
 
 		this._calendar.timestamp = newValue;
-		this._calendar.selectedDates = event.detail.dates;
+		this._calendar.selectedDates = [...event.detail.dates];
 		this._focusInputAfterClose = true;
 
 		if (this.isInValidRange(this._getTimeStampFromString(this.value))) {
@@ -988,20 +974,16 @@ class DatePicker extends UI5Element {
 		}
 	}
 
-	_changeCalendarSelection(focusTimestamp) {
+	_changeCalendarSelection() {
 		if (this._calendarDate.getYear() < 1) {
 			// 0 is a valid year, but we cannot display it
 			return;
 		}
 
-		const oCalDate = this._calendarDate;
-		const timestamp = focusTimestamp || oCalDate.valueOf() / 1000;
-
+		const timestamp = this._calendarDate.valueOf() / 1000;
 		this._calendar = Object.assign({}, this._calendar);
 		this._calendar.timestamp = timestamp;
-		if (this.value) {
-			this._calendar.selectedDates = [timestamp];
-		}
+		this._calendar.selectedDates = this.value ? [timestamp] : [];
 	}
 
 	/**
diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
index 309778edf071..3fb8f95ea220 100644
--- a/packages/main/src/DatePickerPopover.hbs
+++ b/packages/main/src/DatePickerPopover.hbs
@@ -48,6 +48,7 @@
 		format-pattern="{{_calendar.formatPattern}}"
 		timestamp="{{_calendar.timestamp}}"
 		.selectedDates="{{_calendar.selectedDates}}"
+		.selection="{{_calendar.selection}}"
 		.minDate="{{_calendar.minDate}}"
 		.maxDate="{{_calendar.maxDate}}"
 		@ui5-selected-dates-change="{{_calendar.onSelectedDatesChange}}"
diff --git a/packages/main/src/DateRangePicker.js b/packages/main/src/DateRangePicker.js
index d99fc0aad8f1..d708332b52d1 100644
--- a/packages/main/src/DateRangePicker.js
+++ b/packages/main/src/DateRangePicker.js
@@ -3,6 +3,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import CalendarSelection from "@ui5/webcomponents-base/dist/types/CalendarSelection.js";
 import DateRangePickerTemplate from "./generated/templates/DateRangePickerTemplate.lit.js";
 
 // Styles
@@ -111,68 +112,7 @@ class DateRangePicker extends DatePicker {
 
 	constructor() {
 		super();
-		this.isFirstDatePick = true;
-		this._initialRendering = true;
-		this._oneTimeStampSelected = false; // Used to determine whether the first & last date is the same
-		this._dayPickerMouseoverHandler = this._itemMouseoverHandler.bind(this);
-		this._respPopoverConfig.beforeOpen = this.handleBeforeOpen;
-		this._respPopoverConfig.beforeClose = this.handleBeforeClose;
-	}
-
-	async onAfterRendering() {
-		const daypicker = this.getDayPicker();
-		this._cleanHoveredAttributeFromVisibleItems(daypicker);
-		this._initialRendering = false;
-	}
-
-	async handleBeforeOpen() {
-		const daypicker = await this.getDayPicker();
-		daypicker.addEventListener("item-mouseover", this._dayPickerMouseoverHandler);
-		daypicker.addEventListener("daypickerrendered", this._keyboardNavigationHandler);
-	}
-
-	async handleBeforeClose() {
-		const daypicker = await this.getDayPicker();
-		daypicker.removeEventListener("item-mouseover", this._dayPickerMouseoverHandler);
-		daypicker.removeEventListener("daypickerrendered", this._keyboardNavigationHandler);
-	}
-
-	_itemMouseoverHandler(event) {
-		if (this._oneTimeStampSelected) {
-			return;
-		}
-
-		const dayItems = event.target.shadowRoot.querySelectorAll(".ui5-dp-item");
-		const firstDateTimestamp = event.target._selectedDates[0];
-		const lastDateTimestamp = event.detail.target.parentElement.dataset.sapTimestamp;
-
-		for (let i = 0; i < dayItems.length; i++) {
-			if ((dayItems[i].dataset.sapTimestamp < firstDateTimestamp && dayItems[i].dataset.sapTimestamp > lastDateTimestamp)
-				|| (dayItems[i].dataset.sapTimestamp > firstDateTimestamp && dayItems[i].dataset.sapTimestamp < lastDateTimestamp)) {
-				dayItems[i].setAttribute("hovered", "");
-			} else {
-				dayItems[i].removeAttribute("hovered");
-			}
-		}
-	}
-
-	_keyboardNavigationHandler(event) {
-		if (!event.detail.focusedItemIndex) {
-			return;
-		}
-
-		const dayItems = event.target.shadowRoot.querySelectorAll(".ui5-dp-item");
-		const firstDateTimestamp = this._selectedDates[0];
-		const lastDateTimestamp = dayItems[event.detail.focusedItemIndex].dataset.sapTimestamp;
-
-		for (let i = 0; i < dayItems.length; i++) {
-			if ((dayItems[i].dataset.sapTimestamp < firstDateTimestamp && dayItems[i].dataset.sapTimestamp > lastDateTimestamp)
-				|| (dayItems[i].dataset.sapTimestamp > firstDateTimestamp && dayItems[i].dataset.sapTimestamp < lastDateTimestamp)) {
-				dayItems[i].setAttribute("hovered", "");
-			} else {
-				dayItems[i].removeAttribute("hovered");
-			}
-		}
+		this._calendar.selection = CalendarSelection.Range;
 	}
 
 	_splitValueByDelimiter(value) {
@@ -192,7 +132,6 @@ class DateRangePicker extends DatePicker {
 	_setValue(value) {
 		const emptyValue = value === "",
 			isValid = emptyValue || this._checkValueValidity(value);
-		let dates = [undefined, undefined];
 
 		if (value === this._prevValue) {
 			return this;
@@ -203,7 +142,7 @@ class DateRangePicker extends DatePicker {
 			return;
 		}
 
-		dates = this._splitValueByDelimiter(value);
+		const dates = this._splitValueByDelimiter(value);
 		if (!isValid) {
 			this.valueState = ValueState.Error;
 			console.warn("Value can not be converted to a valid dates", this); // eslint-disable-line
@@ -225,38 +164,27 @@ class DateRangePicker extends DatePicker {
 			this._lastDateTimestamp = CalendarDate.fromLocalJSDate(lastDate, this._primaryCalendarType).valueOf() / 1000;
 		}
 		this._firstDateTimestamp = CalendarDate.fromLocalJSDate(firstDate, this._primaryCalendarType).valueOf() / 1000;
-		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
 
 		this.value = this._formatValue(firstDate, lastDate);
-		this.realValue = this.value;
 		this._prevValue = this.value;
 	}
 
-	_changeCalendarSelection(focusTimestamp) {
+	_changeCalendarSelection() {
 		if (this._calendarDate.getYear() < 1) {
 			// 0 is a valid year, but we cannot display it
 			return;
 		}
 
-		const oCalDate = this._calendarDate,
-			timestamp = focusTimestamp || oCalDate.valueOf() / 1000,
-			dates = this._splitValueByDelimiter(this.realValue);
-
-		if (this._initialRendering) {
-			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
-			this._setValue(this.realValue);
-		}
-
+		const timestamp = this._calendarDate.valueOf() / 1000;
+		const dates = this._splitValueByDelimiter(this.value);
 		this._calendar = Object.assign({}, this._calendar);
 		this._calendar.timestamp = timestamp;
-		if (this.realValue && this._checkValueValidity(this.realValue)) {
-			this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._getTimeStampFromString(dates[0]), this._getTimeStampFromString(dates[1]));
-		}
+		this._calendar.selectedDates = dates.map(date => this._getTimeStampFromString(date) / 1000);
 	}
 
 	get _calendarDate() {
-		const dates = this._splitValueByDelimiter(this.realValue),
-			value = this._checkValueValidity(this.realValue) ? dates[0] : this.getFormat().format(new Date()),
+		const dateStrings = this._splitValueByDelimiter(this.value),
+			value = Boolean(this.value) && this._checkValueValidity(this.value) ? dateStrings[0] : this.getFormat().format(new Date()),
 			millisecondsUTCFirstDate = value ? this.getFormat().parse(value, true).getTime() : this.getFormat().parse(this.validValue, true).getTime(),
 			oCalDateFirst = CalendarDate.fromTimestamp(
 				millisecondsUTCFirstDate - (millisecondsUTCFirstDate % (24 * 60 * 60 * 1000)),
@@ -266,10 +194,6 @@ class DateRangePicker extends DatePicker {
 		return oCalDateFirst;
 	}
 
-	get _shoudHideValueInInput() {
-		return this._firstDateTimestamp === this._lastDateTimestamp && this._firstDateTimestamp;
-	}
-
 	/**
 	 * Currently selected first date represented as JavaScript Date instance.
 	 *
@@ -308,11 +232,6 @@ class DateRangePicker extends DatePicker {
 		const nextValue = await this._getInput().getInputValue();
 		const emptyValue = nextValue === "";
 		const isValid = emptyValue || this._checkValueValidity(nextValue);
-		const dates = this._splitValueByDelimiter(nextValue);
-
-		if (dates.length === 2) {
-			this._oneTimeStampSelected = dates[0].trim() === dates[1].trim();
-		}
 
 		if (isValid) {
 			this._setValue(nextValue);
@@ -330,74 +249,38 @@ class DateRangePicker extends DatePicker {
 		return this.isValid(value) && this.isInValidRange(value);
 	}
 
-	checkRealValueValidity() {
-		return this.isValid(this.realValue) && this.isInValidRange(this.realValue);
-	}
-
 	isValid(value) {
-		const dateStrings = this._splitValueByDelimiter(value, this.delimiter),
-			isFirstDateValid = super.isValid(dateStrings[0]),
-			isLastDateValid = super.isValid(dateStrings[1]);
-
-		if (!dateStrings[1]) {
-			return isFirstDateValid;
-		}
-
-		return isFirstDateValid && isLastDateValid;
+		return this._splitValueByDelimiter(value)
+			.map(dateString => super.isValid(dateString))
+			.every(valid => valid);
 	}
 
 	isInValidRange(value) {
-		const dateStrings = this._splitValueByDelimiter(value, this.delimiter),
-			isFirstDateInValidRange = super.isInValidRange(this._getTimeStampFromString(dateStrings[0])),
-			isLastDateInValidRange = super.isInValidRange(this._getTimeStampFromString(dateStrings[1]));
-
-		if (!dateStrings[1]) {
-			return isFirstDateInValidRange;
-		}
-
-		return isFirstDateInValidRange && isLastDateInValidRange;
-	}
-
-	dateIntervalArrayBuilder(firstTimestamp, lastTimestamp) {
-		const datesTimestamps = [],
-			tempCalendarDate = CalendarDate.fromTimestamp(firstTimestamp);
-
-		while (tempCalendarDate.valueOf() < lastTimestamp) {
-			datesTimestamps.push(tempCalendarDate.valueOf() / 1000);
-			tempCalendarDate.setDate(tempCalendarDate.getDate() + 1);
-		}
-
-		datesTimestamps.push(tempCalendarDate.valueOf() / 1000);
-
-		return datesTimestamps;
+		return this._splitValueByDelimiter(value)
+			.map(dateString => super.isInValidRange(this._getTimeStampFromString(dateString)))
+			.every(valid => valid);
 	}
 
 	_handleCalendarChange(event) {
-		const newValue = event.detail.dates && event.detail.dates[0];
-		this._oneTimeStampSelected = false;
-		if (this.isFirstDatePick) {
-			this.isFirstDatePick = false;
-			this._firstDateTimestamp = newValue;
-			this._lastDateTimestamp = newValue;
-			this._calendar.timestamp = newValue;
-			this._handleCalendarSelectedDatesChange();
-		} else {
+		const selectedDates = event.detail.dates;
+		if (selectedDates.length === 2) {
 			this.closePicker();
-			this.isFirstDatePick = true;
-			if (newValue < this._firstDateTimestamp) {
-				this._lastDateTimestamp = this._firstDateTimestamp;
-				this._firstDateTimestamp = newValue;
-			} else {
-				this._oneTimeStampSelected = newValue === this._firstDateTimestamp;
-				this._lastDateTimestamp = newValue;
-			}
-			const fireChange = this._handleCalendarSelectedDatesChange();
+			this._firstDateTimestamp = selectedDates[0] < selectedDates[1] ? selectedDates[0] : selectedDates[1];
+			this._lastDateTimestamp = selectedDates[0] > selectedDates[1] ? selectedDates[0] : selectedDates[1];
+			const fireChange = this._handleCalendarSelectedDatesChange(event, this._firstDateTimestamp);
 
 			if (fireChange) {
-				this.fireEvent("change", { value: this.realValue, valid: true });
+				this.fireEvent("change", { value: this.value, valid: true });
 				// Angular two way data binding
-				this.fireEvent("value-changed", { value: this.realValue, valid: true });
+				this.fireEvent("value-changed", { value: this.value, valid: true });
 			}
+		} else {
+			this._firstDateTimestamp = selectedDates[0];
+			this._lastDateTimestamp = undefined;
+			this._calendar.timestamp = selectedDates[0];
+			this._calendar.selectedDates = [...event.detail.dates];
+			this.value = "";
+			return false;
 		}
 	}
 
@@ -498,47 +381,13 @@ class DateRangePicker extends DatePicker {
 		}
 	}
 
-	_handleCalendarSelectedDatesChange() {
-		this._updateValueCalendarSelectedDatesChange();
-		this._cleanHoveredAttributeFromVisibleItems();
-
-		this._calendar.timestamp = this._firstDateTimestamp;
-		this._calendar.selectedDates = this.dateIntervalArrayBuilder(this._firstDateTimestamp * 1000, this._lastDateTimestamp * 1000);
-		this._focusInputAfterClose = true;
-
-		if (this.isInValidRange(this.realValue)) {
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-
-		return true;
-	}
-
-	async _cleanHoveredAttributeFromVisibleItems(dayPicker) {
-		if (!dayPicker) {
-			return;
-		}
-
-		const daypicker = await this.getDayPicker();
-		const dayItems = daypicker.shadowRoot.querySelectorAll(".ui5-dp-item");
-
-		for (let i = 0; i < dayItems.length; i++) {
-			dayItems[i].removeAttribute("hovered");
-		}
-	}
-
 	_updateValueCalendarSelectedDatesChange() {
 		const calStartDate = CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000, this._primaryCalendarType);
 		const calEndDate = CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000, this._primaryCalendarType);
 
 		// Collect both dates and merge them into one
-		if (this._firstDateTimestamp !== this._lastDateTimestamp || this._oneTimeStampSelected) {
-			this.value = this._formatValue(calStartDate.toLocalJSDate(), calEndDate.toLocalJSDate());
-		}
-
-		this.realValue = this._formatValue(calStartDate.toLocalJSDate(), calEndDate.toLocalJSDate());
-		this._prevValue = this.realValue;
+		this.value = this._formatValue(calStartDate.toLocalJSDate(), calEndDate.toLocalJSDate());
+		this._prevValue = this.value;
 	}
 
 	/**
diff --git a/packages/main/src/DayPicker.hbs b/packages/main/src/DayPicker.hbs
index fb5030a8e26d..bd2c743d5ca8 100644
--- a/packages/main/src/DayPicker.hbs
+++ b/packages/main/src/DayPicker.hbs
@@ -21,7 +21,7 @@
 		</div>
 		{{#each _weeks}}
 			{{#if this.length}}
-				<div style="display: flex;" role="row"  @mouseover="{{../_onitemmouseover}}" @keydown="{{../_onitemkeydown}}">
+				<div style="display: flex;" role="row"  @mouseover="{{../_onitemmouseover}}">
 					{{#each this}}
 						{{#if this.timestamp}}
 							<div
diff --git a/packages/main/src/DayPicker.js b/packages/main/src/DayPicker.js
index 000aba442b88..43169167ab6f 100644
--- a/packages/main/src/DayPicker.js
+++ b/packages/main/src/DayPicker.js
@@ -30,6 +30,7 @@ import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
+import CalendarSelection from "@ui5/webcomponents-base/dist/types/CalendarSelection.js";
 import DayPickerTemplate from "./generated/templates/DayPickerTemplate.lit.js";
 
 import {
@@ -77,6 +78,24 @@ const metadata = {
 			type: CalendarType,
 		},
 
+		/**
+		 * Defines the type of selection used in the calendar component.
+		 * The property takes as value an object of type <code>CalendarSelection</code>.
+		 * Accepted property values are:<br>
+		 * <ul>
+		 * <li><code>CalendarSelection.Single</code> - enables a single date selection.(default value)</li>
+		 * <li><code>CalendarSelection.Range</code> - enables selection of a date range.</li>
+		 * <li><code>CalendarSelection.Multiple</code> - enables selection of multiple dates.</li>
+		 * </ul>
+		 * @type {CalendarSelection}
+		 * @defaultvalue "Single"
+		 * @public
+		 */
+		selection: {
+			type: CalendarSelection,
+			defaultValue: CalendarSelection.Single,
+		},
+
 		/**
 		 * Sets the selected dates as UTC timestamps.
 		 * @type {Array}
@@ -213,7 +232,6 @@ class DayPicker extends UI5Element {
 
 	constructor() {
 		super();
-
 		this._itemNav = new ItemNavigation(this, {
 			rowSize: 7,
 			pageSize: 42,
@@ -267,6 +285,8 @@ class DayPicker extends UI5Element {
 		this._minDateObject = new Date(this._minDate);
 		this._maxDateObject = new Date(this._maxDate);
 
+		const visualizedSelectedDates = this._getVisualizedSelectedDates();
+
 		/* eslint-disable no-loop-func */
 		for (let i = 0; i < _aVisibleDays.length; i++) {
 			oCalDate = _aVisibleDays[i];
@@ -282,10 +302,7 @@ class DayPicker extends UI5Element {
 
 			day = {
 				timestamp: timestamp.toString(),
-				selected: this._selectedDates.some(d => {
-					return d === timestamp;
-				}),
-				selectedBetween: this._selectedDates.slice(1, this._selectedDates.length - 1).some(d => {
+				selected: visualizedSelectedDates.some(d => {
 					return d === timestamp;
 				}),
 				iDay: oCalDate.getDate(),
@@ -307,10 +324,6 @@ class DayPicker extends UI5Element {
 				isDaySelected = true;
 			}
 
-			if (day.selectedBetween) {
-				day.classes += " ui5-dp-item--selected-between";
-			}
-
 			if (isToday) {
 				day.classes += " ui5-dp-item--now";
 				todayIndex = i;
@@ -388,11 +401,26 @@ class DayPicker extends UI5Element {
 	}
 
 	onAfterRendering() {
-		this._fireDayPickerRendered();
-		if (this._inputLiveChangeTrigger) {
-			this._inputLiveChangeTrigger = false;
-		} else {
-			this._itemNav.focusCurrent();
+		const visualizedDates = this._getVisualizedSelectedDates();
+		if (this.selection === CalendarSelection.Range && visualizedDates.length > 0) {
+			const dayItems = this.getDomRef().querySelectorAll(".ui5-dp-item");
+			const firstTimestamp = this._selectedDates[0];
+			const lastTimestamp = (visualizedDates.length === 1) ? parseInt(dayItems[this._itemNav.currentIndex].dataset.sapTimestamp) : this._selectedDates[1];
+
+			this._updateSelectionBetween(dayItems, firstTimestamp, lastTimestamp);
+		}
+	}
+
+	_getVisualizedSelectedDates() {
+		switch (this.selection) {
+		case CalendarSelection.Single:
+			return [this.selectedDates[0]];
+		case CalendarSelection.Multiple:
+			return [...this.selectedDates];
+		case CalendarSelection.Range:
+			return this.selectedDates.slice(0, 2);
+		default:
+			return [];
 		}
 	}
 
@@ -427,7 +455,7 @@ class DayPicker extends UI5Element {
 	_onmouseup(event) {
 		const dayPressed = this._isDayPressed(event.target);
 		if (this.targetDate) {
-			this._modifySelectionAndNotifySubscribers(this.targetDate, event.ctrlKey);
+			this._modifySelectionAndNotifySubscribers(this.targetDate);
 			this.targetDate = null;
 		}
 
@@ -437,15 +465,26 @@ class DayPicker extends UI5Element {
 	}
 
 	_onitemmouseover(event) {
-		if (this.selectedDates.length === 1) {
-			this.fireEvent("item-mouseover", event);
+		const hoveredItem = event.target.classList.contains("ui5-dp-item") ? event.target : event.target.parentElement;
+		if (this.selectedDates.length === 1 && this.selection === CalendarSelection.Range && hoveredItem.classList.contains("ui5-dp-item")) {
+			const dayItems = this.getDomRef().querySelectorAll(".ui5-dp-item");
+			const firstTimestamp = this._selectedDates[0];
+			const lastTimestamp = parseInt(hoveredItem.dataset.sapTimestamp);
+
+			this._updateSelectionBetween(dayItems, firstTimestamp, lastTimestamp);
 		}
 	}
 
-	_onitemkeydown(event) {
-		if (this.selectedDates.length === 1) {
-			this.fireEvent("item-keydown", event);
-		}
+	_updateSelectionBetween(dayItems, firstTimestamp, lastTimestamp) {
+		dayItems.forEach(day => {
+			const dayTimestamp = parseInt(day.dataset.sapTimestamp);
+
+			if ((dayTimestamp > firstTimestamp && dayTimestamp < lastTimestamp) || (dayTimestamp > lastTimestamp && dayTimestamp < firstTimestamp)) {
+				day.classList.add("ui5-dp-item--selected-between");
+			} else {
+				day.classList.remove("ui5-dp-item--selected-between");
+			}
+		});
 	}
 
 	_onkeydown(event) {
@@ -493,7 +532,7 @@ class DayPicker extends UI5Element {
 		event.preventDefault();
 		if (event.target.className.indexOf("ui5-dp-item") > -1) {
 			const targetDate = parseInt(event.target.getAttribute("data-sap-timestamp"));
-			this._modifySelectionAndNotifySubscribers(targetDate, event.ctrlKey);
+			this._modifySelectionAndNotifySubscribers(targetDate);
 		}
 	}
 
@@ -501,7 +540,7 @@ class DayPicker extends UI5Element {
 		event.preventDefault();
 		if (event.target.className.indexOf("ui5-dp-item") > -1) {
 			const targetDate = parseInt(event.target.getAttribute("data-sap-timestamp"));
-			this._modifySelectionAndNotifySubscribers(targetDate, event.ctrlKey);
+			this._modifySelectionAndNotifySubscribers(targetDate);
 		}
 	}
 
@@ -636,11 +675,26 @@ class DayPicker extends UI5Element {
 		return this.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
 	}
 
-	_modifySelectionAndNotifySubscribers(sNewDate, bAdd) {
-		if (bAdd) {
-			this.selectedDates = [...this._selectedDates, sNewDate];
-		} else {
-			this.selectedDates = [sNewDate];
+	_setCurrentItemTabIndex(index) {
+		this._itemNav._getCurrentItem().setAttribute("tabindex", index.toString());
+	}
+
+	_modifySelectionAndNotifySubscribers(timestamp) {
+		switch (this.selection) {
+		case CalendarSelection.Single:
+			this.selectedDates = [timestamp];
+			break;
+		case CalendarSelection.Multiple:
+			this.selectedDates = this.selectedDates.includes(timestamp)
+				? this.selectedDates.filter(value => value !== timestamp)
+				: [...this._selectedDates, timestamp];
+			break;
+		case CalendarSelection.Range:
+			this.selectedDates = (this.selectedDates.length === 1)
+				? [...this._selectedDates, timestamp]
+				: [timestamp];
+			break;
+		default:
 		}
 
 		this.fireEvent("change", { dates: [...this._selectedDates] });
@@ -790,13 +844,6 @@ class DayPicker extends UI5Element {
 		const newItemIndex = this._itemNav._getItems().findIndex(item => parseInt(item.timestamp) === timestamp);
 		this._itemNav.currentIndex = newItemIndex;
 		this._itemNav.focusCurrent();
-		this._fireDayPickerRendered();
-	}
-
-	_fireDayPickerRendered() {
-		if (this.selectedDates.length === 1) {
-			this.fireEvent("daypickerrendered", { focusedItemIndex: this._itemNav.currentIndex });
-		}
 	}
 
 	_isWeekend(oDate) {
@@ -812,7 +859,7 @@ class DayPicker extends UI5Element {
 
 	_isDayPressed(target) {
 		const targetParent = target.parentNode;
-		return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && target.parentNode.classList.contains("ui5-dp-item"));
+		return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && targetParent.classList && targetParent.classList.contains("ui5-dp-item"));
 	}
 
 	_isOutOfSelectableRange(date) {
diff --git a/packages/main/src/MonthPicker.js b/packages/main/src/MonthPicker.js
index d2bae6defc9e..29180c7653ea 100644
--- a/packages/main/src/MonthPicker.js
+++ b/packages/main/src/MonthPicker.js
@@ -239,6 +239,10 @@ class MonthPicker extends UI5Element {
 		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
 	}
 
+	_setCurrentItemTabIndex(index) {
+		this._itemNav._getCurrentItem().setAttribute("tabindex", index.toString());
+	}
+
 	_onmousedown(event) {
 		if (event.target.className.indexOf("ui5-mp-item") > -1) {
 			const targetTimestamp = this.getTimestampFromDOM(event.target);
diff --git a/packages/main/src/YearPicker.js b/packages/main/src/YearPicker.js
index d08d59308ab0..a01efa790cdb 100644
--- a/packages/main/src/YearPicker.js
+++ b/packages/main/src/YearPicker.js
@@ -264,6 +264,10 @@ class YearPicker extends UI5Element {
 		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
 	}
 
+	_setCurrentItemTabIndex(index) {
+		this._itemNav._getCurrentItem().setAttribute("tabindex", index.toString());
+	}
+
 	_onmousedown(event) {
 		if (event.target.className.indexOf("ui5-yp-item") > -1) {
 			const targetTimestamp = this.getTimestampFromDom(event.target);
diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html
index 764312d83d65..ada1075317fd 100644
--- a/packages/main/test/pages/Calendar.html
+++ b/packages/main/test/pages/Calendar.html
@@ -3,12 +3,12 @@
 <head>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
 	<title>Calendar Playground</title>
 
 	<script>
-		delete Document.prototype.adoptedStyleSheets
+		delete Document.prototype.adoptedStyleSheets;
 	</script>
 
 	<script data-ui5-config type="application/json">
@@ -24,8 +24,48 @@
 </head>
 <body style="background-color: var(--sapBackgroundColor);">
 
-<ui5-calendar id="calendar1"></ui5-calendar>
-<ui5-calendar id="calendar2" primary-calendar-type='Islamic'></ui5-calendar>
+	<section>
+		<ui5-label id="selectLabel" label-for="selectionType">Selection type for the first calendar:</ui5-label>
+		<ui5-select id="selectionType">
+			<ui5-option selected>Single</ui5-option>
+			<ui5-option>Multiple</ui5-option>
+			<ui5-option>Range</ui5-option>
+		</ui5-select>
+		<br>
+		<ui5-label id="toggleButtonLabel" label-for="weekNumbersButton">Show/hide weeknumbers for the first calendar:</ui5-label>
+		<ui5-togglebutton id="weekNumbersButton">hide</ui5-togglebutton>
+
+		<ui5-calendar id="calendar1"></ui5-calendar>
+		<ui5-textarea id="textArea" placeholder="Selected dates..."></ui5-textarea>
+	</section>
+
+	<section>
+		<ui5-calendar id="calendar2" primary-calendar-type='Islamic'></ui5-calendar>
+	</section>
+	<section>
+		<ui5-calendar id="calendar3" min-date="1/7/2020" max-date="21/10/2020" format-pattern="dd/MM/yyyy"></ui5-calendar>
+	</section>
 
 </body>
+
+<script>
+	const toggleButton = document.getElementById("weekNumbersButton");
+	const select = document.getElementById("selectionType");
+	const calendar1 = document.getElementById("calendar1");
+	const textArea = document.getElementById("textArea");
+
+	select.addEventListener("ui5-change", function(event) {
+		calendar1.setAttribute("selection", event.detail.selectedOption.textContent)
+	});
+
+	toggleButton.addEventListener("click", function(event) {
+		calendar1.hideWeekNumbers = event.target.pressed ? true : false;
+		toggleButton.innerHTML = event.target.pressed ? "show" : "hide";
+	});
+
+	calendar1.addEventListener("ui5-selected-dates-change", function(event) {
+		textArea.setAttribute("value", event.detail.dates.join(", "));
+	});
+</script>
+
 </html>
diff --git a/packages/main/test/samples/Calendar.sample.html b/packages/main/test/samples/Calendar.sample.html
new file mode 100644
index 000000000000..6c13ac41a24f
--- /dev/null
+++ b/packages/main/test/samples/Calendar.sample.html
@@ -0,0 +1,108 @@
+<header class="component-heading">
+	<h2 class="control-header">Calendar</h2>
+	<div class="component-heading-since">
+		<span><!--since_tag_marker--></span>
+	</div>
+</header>
+
+<div class="component-package">@ui5/webcomponents</div>
+
+<div class="control-tag">&lt;ui5-calendar&gt;</div>
+
+<section>
+	<h3>Basic Calendar</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Calendar with Minimum and Maximum Date - 7/7/2020 - 20/10/2020 format-pattern="dd/MM/yyyy"</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar min-date="7/7/2020" max-date="20/10/2020" format-pattern="dd/MM/yyyy"></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar min-date="7/7/2020" max-date="20/10/2020" format-pattern="dd/MM/yyyy"></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Calendar with hidden week numbers</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar hide-week-numbers></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar hide-week-numbers></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Calendar with selection type Multiple</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar selection="Multiple"></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar selection="Multiple"></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Calendar with selection type Range</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar selection="Range"></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar selection="Range"></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Japanese Calendar</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar primary-calendar-type='Japanese'></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar primary-calendar-type='Japanese'></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Islamic Calendar</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar primary-calendar-type='Islamic'></ui5-calendar>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar primary-calendar-type='Islamic'></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<section>
+	<h3>Buddhist Calendar</h3>
+	<div class="snippet">
+		<div class="datepicker-width">
+			<ui5-calendar primary-calendar-type='Buddhist'></ui5-calendarr>
+		</div>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-calendar primary-calendar-type='Buddhist'></ui5-calendar>
+	</xmp></pre>
+</section>
+
+<!-- JSDoc marker -->
diff --git a/packages/main/test/specs/Calendar.spec.js b/packages/main/test/specs/Calendar.spec.js
index ab3dfe6405d2..6f7635c9973a 100644
--- a/packages/main/test/specs/Calendar.spec.js
+++ b/packages/main/test/specs/Calendar.spec.js
@@ -57,22 +57,51 @@ describe("Calendar general interaction", () => {
 		assert.strictEqual(calendar.getProperty("timestamp"), TIMESTAMP);
 	});
 
+	it("Focus goes into the current day item of the day picker", () => {
+		const toggleButton = browser.$("#weekNumbersButton");
+		const calendar = browser.$("#calendar1");
+		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000);
+		const dayPicker = calendar.shadow$("ui5-daypicker");
+		const header  = calendar.shadow$("ui5-calendar-header");
+		const currentDayItem = dayPicker.shadow$(`div[data-sap-timestamp="974851200"]`);
+		const monthButton = header.shadow$(`[data-sap-show-picker="Month"]`);
+		const yearButton = header.shadow$(`[data-sap-show-picker="Year"]`);
+
+		toggleButton.click();
+		toggleButton.click();
+
+		browser.keys("Tab");
+		assert.ok(currentDayItem.isFocusedDeep(), "Current calendar day item is focused");
+
+		browser.keys("Tab");
+		assert.ok(monthButton.isFocusedDeep(), "Month picker button is focused");
+
+		browser.keys("Tab");
+		assert.ok(yearButton.isFocusedDeep(), "Year picker button is focused");
+
+		browser.keys(["Shift", "Tab"]);
+		assert.ok(monthButton.isFocusedDeep(), "Month picker button is focused");
+
+		browser.keys(["Shift", "Tab"]);
+		assert.ok(currentDayItem.isFocusedDeep(), "Current calendar day item is focused");
+	});
+
 	it("Calendar sets the selected year when yearpicker is opened", () => {
 		const calendar = browser.$("#calendar1");
 		const yearPicker = calendar.shadow$("ui5-yearpicker");
 		const YEAR = 1997;
-		calendar.setAttribute("timestamp", Date.UTC(YEAR) / 1000)
+		calendar.setAttribute("timestamp", Date.UTC(YEAR) / 1000);
 		calendar.shadow$("ui5-calendar-header").shadow$(`div[data-sap-show-picker="Year"]`).click();
 		assert.strictEqual(yearPicker.getProperty("_selectedYear"), YEAR, "Year is set");
 
-		calendar.shadow$("ui5-yearpicker").shadow$(`div[id="ui5wc_5-y852076800"]`).click();
+		calendar.shadow$("ui5-yearpicker").shadow$(`div[data-sap-timestamp="852076800"]`).click();
 	});
 
 	it("Calendar doesn't mark year as selected when there are no selected dates", () => {
 		const calendar = browser.$("#calendar1");
 		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000);
 		calendar.shadow$("ui5-calendar-header").shadow$(`div[data-sap-show-picker="Year"]`).click();
-		const focusedItem = calendar.shadow$("ui5-yearpicker").shadow$(`div[id="ui5wc_5-y946684800"]`);
+		const focusedItem = calendar.shadow$("ui5-yearpicker").shadow$(`[data-sap-timestamp="946684800"]`);
 
 		assert.ok(focusedItem.isFocusedDeep(), "Current year element is the acrive element");
 		assert.notOk(focusedItem.hasClass("ui5-mp-item--selected"), "Current year is not selected");
@@ -83,7 +112,7 @@ describe("Calendar general interaction", () => {
 		const calendar = browser.$("#calendar1");
 		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000);
 		calendar.shadow$("ui5-calendar-header").shadow$(`div[data-sap-show-picker="Month"]`).click();
-		const focusedItem = calendar.shadow$("ui5-monthpicker").shadow$(`div[id="ui5wc_4-m10"]`);
+		const focusedItem = calendar.shadow$("ui5-monthpicker").shadow$(`[data-sap-timestamp="973036800"]`);
 
 		assert.ok(focusedItem.isFocusedDeep(), "Current month element is the acrive element");
 		assert.notOk(focusedItem.hasClass("ui5-mp-item--selected"), "Current month is not selected");
@@ -167,5 +196,58 @@ describe("Calendar general interaction", () => {
 		browser.keys('PageUp');
 
 		assert.ok(calendarHeader.shadow$(".ui5-calheader-middlebtn").getAttribute("hidden"), "The button for month is hidden");
+		browser.keys("Space");
+	});
+
+	it("Calendar with 'Multiple' selection type", () => {
+		const calendar = browser.$("#calendar1");
+		calendar.setAttribute("selection", "Multiple");
+		let selectedDates = browser.execute(() => document.getElementById("calendar1").selectedDates );
+
+		// deselect previously selected dates
+		selectedDates.forEach(timestamp => {
+			const dateDOM = calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="${timestamp}"]`);
+			dateDOM.click();
+		});
+
+		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000);
+
+		const dates = [
+			calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971136000"]`),
+			calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971222400"]`),
+			calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971308800"]`),
+		];
+
+		dates.forEach(date => {
+			date.click();
+			assert.ok(date.hasClass("ui5-dp-item--selected"), `${date.getAttribute("data-sap-timestamp")} is selected`);
+		});
+
+		selectedDates = browser.execute(() => document.getElementById("calendar1").selectedDates );
+
+		assert.deepEqual(selectedDates, [971136000, 971222400, 971308800], "Change event is fired with proper data");
+	});
+
+	it("Calendar with 'Range' selection type", () => {
+		const calendar = browser.$("#calendar1");
+		calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000);
+		calendar.setAttribute("selection", "Range");
+
+		const dates = [
+			calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971740800"]`),
+			calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971827200"]`),
+			calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971913600"]`),
+		];
+
+		dates[0].click();
+		dates[2].click();
+
+		assert.ok(dates[0].hasClass("ui5-dp-item--selected"), `${dates[0].getAttribute("data-sap-timestamp")} is selected`);
+		assert.ok(dates[1].hasClass("ui5-dp-item--selected-between"), `${dates[1].getAttribute("data-sap-timestamp")} is selected between`);
+		assert.ok(dates[2].hasClass("ui5-dp-item--selected"), `${dates[2].getAttribute("data-sap-timestamp")} is selected`);
+
+		const selectedDates = browser.execute(() => document.getElementById("calendar1").selectedDates );
+
+		assert.deepEqual(selectedDates, [971740800, 971913600], "Change event is fired with proper data");
 	});
 });
diff --git a/packages/main/test/specs/DateRangePicker.spec.js b/packages/main/test/specs/DateRangePicker.spec.js
index 35be05f003a6..dc097f40b4cf 100644
--- a/packages/main/test/specs/DateRangePicker.spec.js
+++ b/packages/main/test/specs/DateRangePicker.spec.js
@@ -24,7 +24,7 @@ describe("DateRangePicker general interaction", () => {
 		assert.strictEqual(daterangepicker.shadow$("ui5-input").getProperty("valueState"), "None", "The value state is on none");
 	});
 
-	it("Selected dates is updates after value update in input", () => {
+	it("Selected dates are updated after value update in the input field", () => {
 		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#daterange-picker3");
 		const dayPicker = browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
 		const firstDateTimestamp = 1599609600;
diff --git a/packages/playground/build-scripts/samples-prepare.js b/packages/playground/build-scripts/samples-prepare.js
index 1475843abf0c..f07f77d8a89f 100644
--- a/packages/playground/build-scripts/samples-prepare.js
+++ b/packages/playground/build-scripts/samples-prepare.js
@@ -12,6 +12,7 @@ const components = [];
 
  // Add new components here
 const newComponents = [
+	"Calendar",
 	"MultiInput",
 	"RangeSlider",
 	"Slider",