Scheduler: changing firstDayOfWeek at runtime should not crash the header or ignore the view's value

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({

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;