From 328b39ca712b8feedd263798ce3ff1d664a9811d Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Fri, 12 Jul 2024 09:01:32 +0200
Subject: [PATCH] fix: render at most 7 weekdays in date picker (#7542) (#7544)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Fredi Wasström <fredrik.wasstrom@gmail.com>
---
 .../date-picker/src/vaadin-month-calendar-mixin.js | 14 ++++++++------
 packages/date-picker/test/month-calendar.common.js | 12 ++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/date-picker/src/vaadin-month-calendar-mixin.js b/packages/date-picker/src/vaadin-month-calendar-mixin.js
index 1ccbf07ee0..b9b54cb683 100644
--- a/packages/date-picker/src/vaadin-month-calendar-mixin.js
+++ b/packages/date-picker/src/vaadin-month-calendar-mixin.js
@@ -199,12 +199,14 @@ export const MonthCalendarMixin = (superClass) =>
       const weekDayNamesShort = this._applyFirstDayOfWeek(weekdaysShort, firstDayOfWeek);
       const weekDayNames = this._applyFirstDayOfWeek(weekdays, firstDayOfWeek);
 
-      return weekDayNames.map((day, index) => {
-        return {
-          weekDay: day,
-          weekDayShort: weekDayNamesShort[index],
-        };
-      });
+      return weekDayNames
+        .map((day, index) => {
+          return {
+            weekDay: day,
+            weekDayShort: weekDayNamesShort[index],
+          };
+        })
+        .slice(0, 7);
     }
 
     /** @private */
diff --git a/packages/date-picker/test/month-calendar.common.js b/packages/date-picker/test/month-calendar.common.js
index c94549bdc5..3b026e1ed4 100644
--- a/packages/date-picker/test/month-calendar.common.js
+++ b/packages/date-picker/test/month-calendar.common.js
@@ -64,6 +64,18 @@ describe('vaadin-month-calendar', () => {
     expect(monthCalendar.shadowRoot.querySelector('[part="month-header"]').textContent).to.equal('January 2000');
   });
 
+  it('should render at most 7 weekdays', async () => {
+    monthCalendar.i18n = {
+      ...monthCalendar.i18n,
+      weekdays: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+      weekdaysShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    };
+    await nextRender();
+
+    const weekdays = getWeekDayCells(monthCalendar);
+    expect(weekdays.length).to.equal(7);
+  });
+
   it('should fire value change on tap', () => {
     const dateElements = getDateCells(monthCalendar);
     tap(dateElements[10]);