diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/header.test.ts b/packages/devextreme/js/__internal/scheduler/__tests__/header.test.ts index 3df5c866140e..f744f376214d 100644 --- a/packages/devextreme/js/__internal/scheduler/__tests__/header.test.ts +++ b/packages/devextreme/js/__internal/scheduler/__tests__/header.test.ts @@ -40,6 +40,54 @@ describe('Header', () => { expect(POM.getHeader().hasAttribute('tabindex')).toBe(false); }); + describe('firstDayOfWeek runtime change', () => { + const getCaption = (header: HTMLElement): string | null | undefined => header + .querySelector('.dx-scheduler-navigator-caption')?.textContent; + + it('should fall back to the locale first day when reset to undefined', async () => { + const { scheduler, POM } = await createScheduler({ + dataSource: [], + currentView: 'week', + currentDate: new Date(2021, 4, 24), + firstDayOfWeek: 1, + }); + + scheduler.option('firstDayOfWeek', undefined); + + expect(getCaption(POM.getHeader())).toBe('23-29 May 2021'); + expect(scheduler.getStartViewDate()).toEqual(new Date(2021, 4, 23)); + }); + + it('should keep the view firstDayOfWeek when the root option changes', async () => { + const { scheduler, POM } = await createScheduler({ + dataSource: [], + views: [{ type: 'week', firstDayOfWeek: 3 }], + currentView: 'week', + currentDate: new Date(2021, 4, 24), + firstDayOfWeek: 1, + }); + + scheduler.option('firstDayOfWeek', 0); + + expect(getCaption(POM.getHeader())).toBe('19-25 May 2021'); + expect(scheduler.getStartViewDate()).toEqual(new Date(2021, 4, 19)); + }); + + it('should apply the root option when the view has no firstDayOfWeek', async () => { + const { scheduler, POM } = await createScheduler({ + dataSource: [], + currentView: 'week', + currentDate: new Date(2021, 4, 24), + firstDayOfWeek: 1, + }); + + scheduler.option('firstDayOfWeek', 3); + + expect(getCaption(POM.getHeader())).toBe('19-25 May 2021'); + expect(scheduler.getStartViewDate()).toEqual(new Date(2021, 4, 19)); + }); + }); + describe('Toolbar', () => { it('should have viewSwitcher with locateInMenu: "auto" by default', async () => { const { scheduler } = await createScheduler({ diff --git a/packages/devextreme/js/__internal/scheduler/scheduler.ts b/packages/devextreme/js/__internal/scheduler/scheduler.ts index dd042bc19b5c..1d5eb2dcbb05 100644 --- a/packages/devextreme/js/__internal/scheduler/scheduler.ts +++ b/packages/devextreme/js/__internal/scheduler/scheduler.ts @@ -493,8 +493,8 @@ class Scheduler extends SchedulerOptionsBaseWidget { this.updateOption('header', name, value); break; case 'firstDayOfWeek': - this.updateOption('workSpace', name, value); - this.updateOption('header', name, value); + this.updateOption('workSpace', name, this.getViewOption('firstDayOfWeek')); + this.updateOption('header', name, this.getFirstDayOfWeek()); this.updateOption('header', 'startViewDate', this.getStartViewDate()); this.createAppointmentPopupForm(); break;