feat(ui5-calendar): expose shadow parts for month-picker and year-picker (#11698)

Previously there was no possible way of overstyling the header buttons, the month picker view, and the year picker's buttons of the ui5-calendar web component.

With this change we are introducing CSS Shadow Parts, which allows overstyling of those calendar parts.

Author: hinzzx

packages/main/src/Calendar.ts

@@ -188,12 +188,15 @@ type CalendarYearRangeT = {
  * @csspart month-cell - Used to style the month cells.
  * @csspart month-cell-selected - Used to style the month cells when selected.
  * @csspart month-cell-selected-between - Used to style the day cells in between of selected months in range.
+ * @csspart month-picker-root - Used to style the month picker root container.
  * @csspart year-cell - Used to style the year cells.
  * @csspart year-cell-selected - Used to style the year cells when selected.
  * @csspart year-cell-selected-between - Used to style the year cells in between of selected years in range.
+ * @csspart year-picker-root - Used to style the year picker root container.
  * @csspart year-range-cell - Used to style the year range cells.
  * @csspart year-range-cell-selected - Used to style the year range cells when selected.
  * @csspart year-range-cell-selected-between - Used to style the year range cells in between of selected year ranges.
+ * @csspart calendar-header-middle-button - Used to style the calendar header middle buttons (month/year/year-range buttons).
  * @since 1.0.0-rc.11
  */
 @customElement({

packages/main/src/CalendarHeaderTemplate.tsx

@@ -24,6 +24,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-month
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderMonthButtonHidden}
 					tabindex={0}
 					role="button"
@@ -41,6 +42,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-year
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearButtonHidden}
 					tabindex={0}
 					role="button"
@@ -56,6 +58,7 @@ export default function CalendarTemplate(this: Calendar) {
 				<div
 					data-ui5-cal-header-btn-year-range
 					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn"
+					part="calendar-header-middle-button"
 					hidden={this._isHeaderYearRangeButtonHidden}
 					tabindex={0}
 					role="button"

packages/main/src/CalendarTemplate.tsx

@@ -48,7 +48,7 @@ export default function CalendarTemplate(this: Calendar) {
 						timestamp={this._timestamp}
 						onChange={this.onSelectedMonthChange}
 						onNavigate={this.onNavigate}
-						exportparts="month-cell, month-cell-selected, month-cell-selected-between"
+						exportparts="month-cell, month-cell-selected, month-cell-selected-between, month-picker-root"
 					/>
 
 					<YearPicker
@@ -66,7 +66,7 @@ export default function CalendarTemplate(this: Calendar) {
 						_currentYearRange = {this._currentYearRange}
 						onChange={this.onSelectedYearChange}
 						onNavigate={this.onNavigate}
-						exportparts="year-cell, year-cell-selected, year-cell-selected-between"
+						exportparts="year-cell, year-cell-selected, year-cell-selected-between, year-picker-root"
 					/>
 
 					<YearRangePicker

packages/main/src/MonthPickerTemplate.tsx

@@ -4,6 +4,7 @@ export default function MonthPickerTemplate(this: MonthPicker) {
 	return (
 		<div
 			class="ui5-mp-root"
+			part="month-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"

packages/main/src/YearPickerTemplate.tsx

@@ -4,6 +4,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 	return (
 		<div
 			class="ui5-yp-root"
+			part="year-picker-root"
 			role="grid"
 			aria-roledescription={this.roleDescription}
 			aria-readonly="false"

packages/main/test/pages/Calendar.html

@@ -20,6 +20,35 @@
 
 
 	<link rel="stylesheet" type="text/css" href="./styles/Calendar.css">
+
+	<style>
+		/* Shadow Parts Demo Styles */
+		.shadow-parts-demo::part(month-picker-root) {
+			background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+			border: 2px solid #2196f3;
+			border-radius: 8px;
+		}
+
+		.shadow-parts-demo::part(year-picker-root) {
+			background: linear-gradient(135deg, #fff3e0, #ffcc02);
+			border: 2px solid #ff9800;
+			border-radius: 8px;
+		}
+
+		.shadow-parts-demo::part(calendar-header-middle-button) {
+			background: #9c27b0;
+			color: white;
+			border-radius: 6px;
+			border: 2px solid #7b1fa2;
+		}
+
+		.header-parts-demo::part(calendar-header-middle-button) {
+			background: #673ab7;
+			color: white;
+			border: 2px solid #512da8;
+			transform: scale(1.1);
+		}
+	</style>
 </head>
 <body class="calendar1auto">
 
@@ -103,6 +132,17 @@
 		</ui5-calendar>
 	</section>
 
+	<section>
+		<ui5-title>Shadow Parts Demo - Custom Picker Styling</ui5-title>
+		<p>Use F4 (month view) or Shift+F4 (year view) to see custom picker backgrounds</p>
+		<ui5-calendar class="shadow-parts-demo"></ui5-calendar>
+	</section>
+
+	<section>
+		<ui5-title>Shadow Parts Demo - Custom Header Buttons</ui5-title>
+		<ui5-calendar class="header-parts-demo"></ui5-calendar>
+	</section>
+
 </body>
 
 <script>