diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index 7028f9313a37..c66200b17a56 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -265,6 +265,12 @@ class Calendar extends CalendarPart {
 	@property()
 	_headerYearButtonTextSecType?: string;
 
+	@property()
+	_headerYearRangeButtonText?: string;
+
+	@property()
+	_headerYearRangeButtonTextSecType?: string;
+
 	@property({ noAttribute: true })
 	_pickersMode: `${CalendarPickersMode}` = "DAY_MONTH_YEAR";
 
@@ -477,16 +483,16 @@ class Calendar extends CalendarPart {
 		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
 		const localeData = getCachedLocaleDataInstance(getLocale());
 		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+		this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
 			const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
+
 			rangeStart.setYear(this._currentPickerDOM._firstYear!);
 			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
 
-			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
-		} else {
-			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+			this._headerYearRangeButtonText = `${yearFormat.format(rangeStart.toLocalJSDate())} - ${yearFormat.format(rangeEnd.toLocalJSDate())}`;
 		}
 
 		this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
@@ -553,6 +559,7 @@ class Calendar extends CalendarPart {
 
 	_setSecondaryCalendarTypeButtonText() {
 		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+		this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
@@ -564,9 +571,8 @@ class Calendar extends CalendarPart {
 				.firstDate;
 			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
 				.lastDate;
-			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
-		} else {
-			this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+
+			this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate())} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate())}`;
 		}
 	}
 
@@ -616,6 +622,10 @@ class Calendar extends CalendarPart {
 		return this._currentPicker !== "year";
 	}
 
+	get _isHeaderYearRangeButtonHidden() {
+		return this._currentPicker !== "year";
+	}
+
 	_fireEventAndUpdateSelectedDates(selectedDates: Array<number>) {
 		const datesValues = selectedDates.map(timestamp => {
 			const calendarDate = CalendarDateComponent.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
diff --git a/packages/main/src/CalendarHeaderTemplate.tsx b/packages/main/src/CalendarHeaderTemplate.tsx
index 8156cba121e0..edf426ef1759 100644
--- a/packages/main/src/CalendarHeaderTemplate.tsx
+++ b/packages/main/src/CalendarHeaderTemplate.tsx
@@ -53,6 +53,18 @@ export default function CalendarTemplate(this: Calendar) {
 						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
 					}
 				</div>
+
+				<div
+					data-ui5-cal-header-btn-year-range
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn ui5-calheader-yearrange-btn-disabled"
+					hidden={this._isHeaderYearRangeButtonHidden}
+					tabindex={-1}
+				>
+					<span>{this._headerYearRangeButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+					}
+				</div>
 			</div>
 
 			<div
diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
index 98c8d7ce5dbc..23fdaff1df69 100644
--- a/packages/main/src/themes/CalendarHeader.css
+++ b/packages/main/src/themes/CalendarHeader.css
@@ -131,3 +131,13 @@
 .ui5-calheader-middlebtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }
+
+/* Todo: Remove with introduction of YearRangePicker */
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled {
+	pointer-events: none;
+}
+
+/* Todo: Remove with introduction of YearRangePicker */
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active .ui5-calheader-btn-sectext {
+	color: var(--sapNeutralElementColor);
+}