fix: render at most 7 weekdays in date picker (#7542) (#7544)

Co-authored-by: Fredi Wasström <fredrik.wasstrom@gmail.com>

Author: vaadin-bot

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 */

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]);