From 9bd056a89f59a7c2c95b3570cf36173fa9b603df Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Wed, 17 Jun 2026 19:20:51 +0300 Subject: [PATCH 1/4] fix: remove portrait mode from compact when two months are enabled --- packages/main/src/Calendar.ts | 7 ++----- packages/main/src/CalendarHeaderTemplate.tsx | 3 +-- packages/main/src/CalendarTemplate.tsx | 4 ++-- packages/main/src/themes/Calendar.css | 6 ++++++ packages/main/src/themes/base/sizes-parameters.css | 5 ++--- 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index e012dc354379..d7e455ccc35e 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -66,7 +66,6 @@ import { CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE, } from "./generated/i18n/i18n-defaults.js"; import type { YearRangePickerChangeEventDetail } from "./YearRangePicker.js"; -import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js"; import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js"; const PHONE_MODE_BREAKPOINT = 640; // px @@ -779,15 +778,13 @@ class Calendar extends CalendarPart { }; } - get _isCompactMode() { - return getEffectiveContentDensity(this) === "compact"; - } - get _monthsToShow() { const monthsToShow = this._showTwoMonths && !isPhone() ? 2 : 1; return monthsToShow; } + + /** * The month button is hidden when the month picker or year picker is shown * @private diff --git a/packages/main/src/CalendarHeaderTemplate.tsx b/packages/main/src/CalendarHeaderTemplate.tsx index 6d9a8f750d02..a70e1c085a28 100644 --- a/packages/main/src/CalendarHeaderTemplate.tsx +++ b/packages/main/src/CalendarHeaderTemplate.tsx @@ -147,9 +147,8 @@ function renderMiddleButtons( } function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) { - // In portrait or compact mode, show next button only on first calendar // In landscape mode, show next button only on last calendar - const isVertical = this._portraitView || this._isCompactMode; + const isVertical = this._portraitView; const shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast); const shouldShowSpacer = isMultiple && (isVertical ? isLast : !isLast); diff --git a/packages/main/src/CalendarTemplate.tsx b/packages/main/src/CalendarTemplate.tsx index 39560cd5d94a..8ec303aecc7c 100644 --- a/packages/main/src/CalendarTemplate.tsx +++ b/packages/main/src/CalendarTemplate.tsx @@ -8,8 +8,8 @@ import CalendarSelectionMode from "./types/CalendarSelectionMode.js"; export default function CalendarTemplate(this: Calendar) { const showMultipleMonths = this._monthsToShow > 1 && !this._isDayPickerHidden; - const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView && !this._isCompactMode; - const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && (this._portraitView || this._isCompactMode); + const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView; + const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && this._portraitView; return ( <> diff --git a/packages/main/src/themes/Calendar.css b/packages/main/src/themes/Calendar.css index cc8d081188f5..5a4a97e2e834 100644 --- a/packages/main/src/themes/Calendar.css +++ b/packages/main/src/themes/Calendar.css @@ -2,6 +2,12 @@ display: inline-block; } +:host([_show-two-months]) { + overflow-y: scroll; + max-height: calc(100vh - 4rem); +} + + .ui5-cal-root .ui5-calheader { display: block; height: var(--_ui5_calendar_header_height); diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 57d6495524ce..c17367ca2bed 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -182,12 +182,11 @@ --_ui5_calendar_header_height: 2rem; --_ui5_calendar_header_arrow_button_width: 2rem; --_ui5_calendar_header_padding: 0; - --_ui5_calendar_multiple_layout: column; --_ui5_calendar_multiple_gap: 0.5rem; - --_ui5_calendar_multiple_width: var(--_ui5_calendar_width); + --_ui5_calendar_multiple_width: calc((var(--_ui5_calendar_width) * 2) + (var(--_ui5_calendar_left_right_padding) * 2));; --_ui5_calendar_overlay_top: 54%; --_ui5_calendar_overlay_width: 100%; - --_ui5_calendar_multiple_months_height: calc(2 * var(--_ui5_calendar_height)); + --_ui5_calendar_multiple_months_height: var(--_ui5_calendar_height); /* Calendar Legend */ --_ui5-calendar-legend-root-padding: 0.5rem; From bf2aceb3f67ad4fb13966f93484202762ae78dac Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Wed, 24 Jun 2026 21:04:54 +0300 Subject: [PATCH 2/4] refactor: refactor styles --- packages/main/src/themes/Calendar.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/main/src/themes/Calendar.css b/packages/main/src/themes/Calendar.css index 5a4a97e2e834..2ab9235dc6fb 100644 --- a/packages/main/src/themes/Calendar.css +++ b/packages/main/src/themes/Calendar.css @@ -2,9 +2,9 @@ display: inline-block; } -:host([_show-two-months]) { - overflow-y: scroll; - max-height: calc(100vh - 4rem); +:host { + overflow: auto; + max-height: calc(100vh - 3rem); } From 76db5c4457a8d9c7cde7475f60a61ecf7154e1dd Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Wed, 24 Jun 2026 21:11:54 +0300 Subject: [PATCH 3/4] fix: lint errors --- packages/main/src/Calendar.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index d5db6c01a898..06cd361ae13e 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -783,8 +783,6 @@ class Calendar extends CalendarPart { return monthsToShow; } - - /** * The month button is hidden when the month picker or year picker is shown * @private From 069e88b5403021bb4daca7d33060d4523224dbe0 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 25 Jun 2026 16:52:50 +0300 Subject: [PATCH 4/4] fix: apply more strict selector --- packages/main/src/themes/Calendar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/themes/Calendar.css b/packages/main/src/themes/Calendar.css index 2ab9235dc6fb..dff16987cf43 100644 --- a/packages/main/src/themes/Calendar.css +++ b/packages/main/src/themes/Calendar.css @@ -2,7 +2,7 @@ display: inline-block; } -:host { +:host([_show-two-months]) { overflow: auto; max-height: calc(100vh - 3rem); }