diff --git a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts
index 748721be9376..c1abb2a372d9 100644
--- a/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts
+++ b/packages/devextreme/js/__internal/scheduler/__tests__/__mock__/create_appointment_popup.ts
@@ -4,12 +4,12 @@ import $ from '@js/core/renderer';
 // eslint-disable-next-line devextreme-custom/no-deferred
 import { Deferred } from '@js/core/utils/deferred';
 
-import { mockTimeZoneCalculator } from '../../__mock__/timezone_calculator.mock';
 import { AppointmentForm } from '../../appointment_popup/form';
 import {
   APPOINTMENT_POPUP_CLASS,
   AppointmentPopup,
 } from '../../appointment_popup/popup';
+import { createTimeZoneCalculator } from '../../r1/timezone_calculator/utils';
 import {
   AppointmentDataAccessor,
 } from '../../utils/data_accessor/appointment_data_accessor';
@@ -41,6 +41,8 @@ const DEFAULT_EDITING = {
   allowDragging: true,
 };
 
+const NO_TIMEZONE = '';
+
 const DEFAULT_APPOINTMENT = {
   text: 'Test Appointment',
   startDate: new Date(2021, 3, 26, 9, 30),
@@ -61,6 +63,7 @@ interface CreateAppointmentPopupOptions {
   editing?: Record<string, unknown>;
   firstDayOfWeek?: number;
   startDayHour?: number;
+  timeZone?: string;
   onAppointmentFormOpening?: (...args: unknown[]) => void;
   onSave?: jest.Mock<(appointment: Record<string, unknown>) => PromiseLike<unknown>>;
   title?: string;
@@ -104,7 +107,7 @@ export const createAppointmentPopup = async (
 
   const dataAccessors = new AppointmentDataAccessor(DEFAULT_FIELDS, false);
   const resourceManager = new ResourceManager([]);
-  const timeZoneCalculator = mockTimeZoneCalculator;
+  const timeZoneCalculator = createTimeZoneCalculator(options.timeZone ?? NO_TIMEZONE);
   const editing = { ...DEFAULT_EDITING, ...options.editing };
 
   const addAppointment = options.addAppointment
@@ -163,21 +166,24 @@ export const createAppointmentPopup = async (
   const title = options.title ?? 'New Appointment';
   const readOnly = options.readOnly ?? false;
 
-  popup.show(appointmentData, { onSave, title, readOnly });
-  await new Promise(process.nextTick);
+  const overlaySelector = `.dx-overlay-wrapper.${APPOINTMENT_POPUP_CLASS}`;
+
+  const showAndQuery = async (
+    data: Record<string, unknown>,
+  ): Promise<PopupModel> => {
+    popup.show(data, { onSave, title, readOnly });
+    await new Promise(process.nextTick);
 
-  const selector = `.dx-overlay-wrapper.${APPOINTMENT_POPUP_CLASS}`;
-  const overlayWrapper = document.querySelector(
-    selector,
-  ) as HTMLDivElement;
+    const wrapper = document.querySelector(overlaySelector) as HTMLDivElement;
 
-  if (!overlayWrapper) {
-    throw new Error(
-      'AppointmentPopup overlay wrapper not found in DOM',
-    );
-  }
+    if (!wrapper) {
+      throw new Error('AppointmentPopup overlay wrapper not found in DOM');
+    }
+
+    return new PopupModel(wrapper);
+  };
 
-  const POM = new PopupModel(overlayWrapper);
+  const POM = await showAndQuery(appointmentData);
 
   const dispose = (): void => {
     popup.dispose();
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.integration.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.integration.test.ts
index 8278e2c5afd0..1fed4785105a 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.integration.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.integration.test.ts
@@ -391,20 +391,6 @@ describe('Appointment Form', () => {
   });
 
   describe('State', () => {
-    it('should create a new form instance on each popup opening', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      const firstFormInstance = POM.popup.dxForm;
-
-      POM.popup.cancelButton.click();
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      const secondFormInstance = POM.popup.dxForm;
-
-      expect(secondFormInstance).not.toBe(firstFormInstance);
-    });
-
     it('should have correct editor values when opening for empty date cell - 1', async () => {
       const { POM } = await createScheduler({
         ...getDefaultConfig(),
@@ -527,129 +513,6 @@ describe('Appointment Form', () => {
 
       expect(POM.popup.getInputValue(timeEditorName)).not.toBeNull();
     });
-
-    it('should update endDate when startDate is changed to a value greater than endDate', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-
-      POM.popup.setInputValue('startDateEditor', new Date(2017, 4, 10));
-
-      expect(POM.popup.getInputValue('startTimeEditor')).toEqual('9:30 AM');
-      expect(POM.popup.getInputValue('endDateEditor')).toEqual('5/10/2017');
-      expect(POM.popup.getInputValue('endTimeEditor')).toEqual('11:00 AM');
-    });
-
-    it('should update endDate when startTime is changed to a value greater than endDate time', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-
-      POM.popup.setInputValue('startTimeEditor', new Date(2017, 4, 9, 12));
-
-      expect(POM.popup.getInputValue('startDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('endDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('endTimeEditor')).toEqual('1:30 PM');
-    });
-
-    it('should update startDate when endDate is changed to a value less than startDate', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-
-      POM.popup.setInputValue('endDateEditor', new Date(2017, 4, 8));
-
-      expect(POM.popup.getInputValue('startDateEditor')).toEqual('5/8/2017');
-      expect(POM.popup.getInputValue('startTimeEditor')).toEqual('9:30 AM');
-      expect(POM.popup.getInputValue('endTimeEditor')).toEqual('11:00 AM');
-    });
-
-    it('should update startDate when endTime is changed to a value less than startDate time', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-      POM.popup.setInputValue('endTimeEditor', new Date(2017, 4, 9, 9, 0));
-
-      expect(POM.popup.getInputValue('startDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('startTimeEditor')).toEqual('7:30 AM');
-      expect(POM.popup.getInputValue('endDateEditor')).toEqual('5/9/2017');
-    });
-
-    it('should not update endDate when startDate is changed to a value less than endDate', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-      POM.popup.setInputValue('startDateEditor', new Date(2017, 4, 8));
-
-      expect(POM.popup.getInputValue('startTimeEditor')).toEqual('9:30 AM');
-      expect(POM.popup.getInputValue('endDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('endTimeEditor')).toEqual('11:00 AM');
-    });
-
-    it('should not update endDate when startTime is changed to a value less than endDate time', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-      POM.popup.setInputValue('startTimeEditor', new Date(2017, 4, 9, 10, 0));
-
-      expect(POM.popup.getInputValue('startDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('endDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('endTimeEditor')).toEqual('11:00 AM');
-    });
-
-    it('should not update startDate when endDate is changed to a value greater than startDate', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-      POM.popup.setInputValue('endDateEditor', new Date(2017, 4, 10));
-
-      expect(POM.popup.getInputValue('startDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('startTimeEditor')).toEqual('9:30 AM');
-      expect(POM.popup.getInputValue('endTimeEditor')).toEqual('11:00 AM');
-    });
-
-    it('should not update startDate when endTime is changed to a value greater than startDate time', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({
-        text: 'test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-      });
-      POM.popup.setInputValue('endTimeEditor', new Date(2017, 4, 9, 12));
-
-      expect(POM.popup.getInputValue('startDateEditor')).toEqual('5/9/2017');
-      expect(POM.popup.getInputValue('startTimeEditor')).toEqual('9:30 AM');
-      expect(POM.popup.getInputValue('endDateEditor')).toEqual('5/9/2017');
-    });
   });
 
   describe.each([
@@ -778,58 +641,6 @@ describe('Appointment Form', () => {
   });
 
   describe('allDay switch', () => {
-    it('should be turned on when opening allDay appointment', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(allDayAppointment);
-
-      expect(POM.popup.getInputValue('allDayEditor')).toBe('true');
-    });
-
-    it('should be turned off when opening non-allDay appointment', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      expect(POM.popup.getInputValue('allDayEditor')).toBe('false');
-    });
-
-    it('should hide time editors when switched on', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeTruthy();
-
-      POM.popup.getInput('allDayEditor').click();
-
-      expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy();
-      expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy();
-    });
-
-    it('should show time editors when switched off', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(allDayAppointment);
-
-      expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy();
-      expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy();
-
-      POM.popup.getInput('allDayEditor').click();
-
-      expect(POM.popup.isInputVisible('startDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('endDateEditor')).toBeTruthy();
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeTruthy();
-    });
-
     it('should set correct dates when switching on then off in day view', async () => {
       const { scheduler, POM } = await createScheduler({
         ...getDefaultConfig(),
@@ -847,23 +658,6 @@ describe('Appointment Form', () => {
       expect(POM.popup.getInputValue('endTimeEditor')).toBe('9:30 AM');
     });
 
-    it('should set correct dates when switching off then on in day view', async () => {
-      const { scheduler, POM } = await createScheduler({
-        ...getDefaultConfig(),
-        currentView: 'day',
-      });
-
-      scheduler.showAppointmentPopup(allDayAppointment);
-
-      POM.popup.getInput('allDayEditor').click();
-      POM.popup.getInput('allDayEditor').click();
-
-      expect(POM.popup.getInputValue('startDateEditor')).toBe('5/1/2017');
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy();
-      expect(POM.popup.getInputValue('endDateEditor')).toBe('5/1/2017');
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy();
-    });
-
     it('should set correct dates when switching on then off in month view', async () => {
       const { scheduler, POM } = await createScheduler({
         ...getDefaultConfig(),
@@ -880,23 +674,6 @@ describe('Appointment Form', () => {
       expect(POM.popup.getInputValue('endDateEditor')).toBe('5/10/2017');
       expect(POM.popup.getInputValue('endTimeEditor')).toBe('12:00 AM');
     });
-
-    it('should set correct dates when switching off then on in month view', async () => {
-      const { scheduler, POM } = await createScheduler({
-        ...getDefaultConfig(),
-        currentView: 'month',
-      });
-
-      scheduler.showAppointmentPopup(allDayAppointment);
-
-      POM.popup.getInput('allDayEditor').click();
-      POM.popup.getInput('allDayEditor').click();
-
-      expect(POM.popup.getInputValue('startDateEditor')).toBe('5/1/2017');
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy();
-      expect(POM.popup.getInputValue('endDateEditor')).toBe('5/1/2017');
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy();
-    });
   });
 
   describe('Timezone Editors', () => {
@@ -1727,81 +1504,6 @@ describe('Appointment Form', () => {
       jest.restoreAllMocks();
     });
 
-    it('should apply firstDayOfWeek to week day buttons', async () => {
-      const { POM, scheduler } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      POM.popup.selectRepeatValue('weekly');
-
-      const dayButtonsMonday = $(POM.popup.recurrenceWeekDayButtons).find('.dx-button');
-      expect(dayButtonsMonday.text()).toBe('MTWTFSS');
-
-      scheduler.hideAppointmentPopup();
-      scheduler.option('firstDayOfWeek', 0);
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      POM.popup.selectRepeatValue('weekly');
-
-      const dayButtonsSunday = $(POM.popup.recurrenceWeekDayButtons).find('.dx-button');
-      expect(dayButtonsSunday.text()).toBe('SMTWTFS');
-    });
-
-    it('should apply firstDayOfWeek to recurrence form startDate calendar', async () => {
-      const { POM, scheduler } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      POM.popup.selectRepeatValue('weekly');
-
-      const recurrenceStartDateEditor = POM.popup.dxForm.getEditor('recurrenceStartDateEditor');
-      expect(recurrenceStartDateEditor).toBeDefined();
-      expect(recurrenceStartDateEditor?.option('calendarOptions.firstDayOfWeek')).toBe(1);
-
-      scheduler.option('firstDayOfWeek', 0);
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      POM.popup.selectRepeatValue('weekly');
-
-      const recurrenceStartDateEditorAfter = POM.popup.dxForm.getEditor('recurrenceStartDateEditor');
-      expect(recurrenceStartDateEditorAfter).toBeDefined();
-      expect(recurrenceStartDateEditorAfter?.option('calendarOptions.firstDayOfWeek')).toBe(0);
-    });
-
-    it('should apply firstDayOfWeek to startDate calendar', async () => {
-      const { POM, scheduler } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      const startDateEditor = POM.popup.dxForm.getEditor('startDateEditor');
-      expect(startDateEditor).toBeDefined();
-      expect(startDateEditor?.option('calendarOptions.firstDayOfWeek')).toBe(1);
-
-      scheduler.option('firstDayOfWeek', 0);
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      const startDateEditorAfter = POM.popup.dxForm.getEditor('startDateEditor');
-      expect(startDateEditorAfter).toBeDefined();
-      expect(startDateEditorAfter?.option('calendarOptions.firstDayOfWeek')).toBe(0);
-    });
-
-    it('should apply firstDayOfWeek to endDate calendar', async () => {
-      const { POM, scheduler } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      const endDateEditor = POM.popup.dxForm.getEditor('endDateEditor');
-      expect(endDateEditor).toBeDefined();
-      expect(endDateEditor?.option('calendarOptions.firstDayOfWeek')).toBe(1);
-
-      scheduler.option('firstDayOfWeek', 0);
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      const endDateEditorAfter = POM.popup.dxForm.getEditor('endDateEditor');
-      expect(endDateEditorAfter).toBeDefined();
-      expect(endDateEditorAfter?.option('calendarOptions.firstDayOfWeek')).toBe(0);
-    });
-
     it('should pass value from localization firstDayOfWeek to calendars when option is not set', async () => {
       const { POM, scheduler } = await createScheduler({
         ...getDefaultConfig(),
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts
index 8b9f4bfd9798..b638a730c170 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts
@@ -110,10 +110,14 @@ describe('Isolated AppointmentPopup environment', () => {
 
   it('should hide popup on Cancel click', async () => {
     const { popup, POM } = await createAppointmentPopup();
+    const visibleBefore = popup.visible;
 
-    expect(popup.visible).toBe(true);
     POM.cancelButton.click();
-    expect(popup.visible).toBe(false);
+
+    const visibleAfter = popup.visible;
+
+    expect(visibleBefore).toBe(true);
+    expect(visibleAfter).toBe(false);
   });
 
   it('should support composite onSave for exclude-from-series scenario', async () => {
@@ -149,4 +153,201 @@ describe('Isolated AppointmentPopup environment', () => {
       expect.objectContaining({ text: 'Single occurrence' }),
     );
   });
+
+  describe('allDay switch', () => {
+    const commonAppointment = {
+      text: 'common-app',
+      startDate: new Date(2017, 4, 9, 9, 30),
+      endDate: new Date(2017, 4, 9, 11),
+    };
+    const allDayAppointment = {
+      text: 'all-day-app',
+      startDate: new Date(2017, 4, 1),
+      endDate: new Date(2017, 4, 1),
+      allDay: true,
+    };
+
+    it('should be turned on when opening allDay appointment', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: allDayAppointment });
+
+      expect(POM.getInputValue('allDayEditor')).toBe('true');
+    });
+
+    it('should be turned off when opening non-allDay appointment', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: commonAppointment });
+
+      expect(POM.getInputValue('allDayEditor')).toBe('false');
+    });
+
+    it('should hide time editors when switched on', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: commonAppointment });
+
+      const startTimeVisibleBefore = POM.isInputVisible('startTimeEditor');
+      const endTimeVisibleBefore = POM.isInputVisible('endTimeEditor');
+
+      POM.getInput('allDayEditor').click();
+
+      const startTimeVisibleAfter = POM.isInputVisible('startTimeEditor');
+      const endTimeVisibleAfter = POM.isInputVisible('endTimeEditor');
+
+      expect(startTimeVisibleBefore).toBe(true);
+      expect(endTimeVisibleBefore).toBe(true);
+      expect(startTimeVisibleAfter).toBe(false);
+      expect(endTimeVisibleAfter).toBe(false);
+    });
+
+    it('should show time editors when switched off', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: allDayAppointment });
+
+      const startTimeVisibleBefore = POM.isInputVisible('startTimeEditor');
+      const endTimeVisibleBefore = POM.isInputVisible('endTimeEditor');
+
+      POM.getInput('allDayEditor').click();
+
+      const startTimeVisibleAfter = POM.isInputVisible('startTimeEditor');
+      const endTimeVisibleAfter = POM.isInputVisible('endTimeEditor');
+
+      expect(startTimeVisibleBefore).toBe(false);
+      expect(endTimeVisibleBefore).toBe(false);
+      expect(startTimeVisibleAfter).toBe(true);
+      expect(endTimeVisibleAfter).toBe(true);
+    });
+
+    it('should reset start to startDayHour and end via getCalculatedEndDate when switched off', async () => {
+      const { POM } = await createAppointmentPopup({
+        appointmentData: commonAppointment,
+        startDayHour: 9,
+      });
+
+      POM.getInput('allDayEditor').click();
+      POM.getInput('allDayEditor').click();
+
+      expect(POM.getInputValue('startDateEditor')).toBe('5/9/2017');
+      expect(POM.getInputValue('startTimeEditor')).toBe('9:00 AM');
+      expect(POM.getInputValue('endDateEditor')).toBe('5/9/2017');
+      expect(POM.getInputValue('endTimeEditor')).toBe('10:00 AM');
+    });
+
+    it('should reset to date-only values when switched on after toggling off', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: allDayAppointment });
+
+      POM.getInput('allDayEditor').click();
+      POM.getInput('allDayEditor').click();
+
+      expect(POM.getInputValue('startDateEditor')).toBe('5/1/2017');
+      expect(POM.isInputVisible('startTimeEditor')).toBeFalsy();
+      expect(POM.getInputValue('endDateEditor')).toBe('5/1/2017');
+      expect(POM.isInputVisible('endTimeEditor')).toBeFalsy();
+    });
+  });
+
+  describe('startDate/endDate editors behavior', () => {
+    const testAppointment = {
+      text: 'test app',
+      startDate: new Date(2017, 4, 9, 9, 30),
+      endDate: new Date(2017, 4, 9, 11),
+    };
+
+    it('should update endDate when startDate is changed to a value greater than endDate', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('startDateEditor', new Date(2017, 4, 10));
+
+      expect(POM.getInputValue('startTimeEditor')).toEqual('9:30 AM');
+      expect(POM.getInputValue('endDateEditor')).toEqual('5/10/2017');
+      expect(POM.getInputValue('endTimeEditor')).toEqual('11:00 AM');
+    });
+
+    it('should update endDate when startTime is changed to a value greater than endDate time', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('startTimeEditor', new Date(2017, 4, 9, 12));
+
+      expect(POM.getInputValue('startDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('endDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('endTimeEditor')).toEqual('1:30 PM');
+    });
+
+    it('should update startDate when endDate is changed to a value less than startDate', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('endDateEditor', new Date(2017, 4, 8));
+
+      expect(POM.getInputValue('startDateEditor')).toEqual('5/8/2017');
+      expect(POM.getInputValue('startTimeEditor')).toEqual('9:30 AM');
+      expect(POM.getInputValue('endTimeEditor')).toEqual('11:00 AM');
+    });
+
+    it('should update startDate when endTime is changed to a value less than startDate time', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('endTimeEditor', new Date(2017, 4, 9, 9, 0));
+
+      expect(POM.getInputValue('startDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('startTimeEditor')).toEqual('7:30 AM');
+      expect(POM.getInputValue('endDateEditor')).toEqual('5/9/2017');
+    });
+
+    it('should not update endDate when startDate is changed to a value less than endDate', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('startDateEditor', new Date(2017, 4, 8));
+
+      expect(POM.getInputValue('startTimeEditor')).toEqual('9:30 AM');
+      expect(POM.getInputValue('endDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('endTimeEditor')).toEqual('11:00 AM');
+    });
+
+    it('should not update endDate when startTime is changed to a value less than endDate time', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('startTimeEditor', new Date(2017, 4, 9, 10, 0));
+
+      expect(POM.getInputValue('startDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('endDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('endTimeEditor')).toEqual('11:00 AM');
+    });
+
+    it('should not update startDate when endDate is changed to a value greater than startDate', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('endDateEditor', new Date(2017, 4, 10));
+
+      expect(POM.getInputValue('startDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('startTimeEditor')).toEqual('9:30 AM');
+      expect(POM.getInputValue('endTimeEditor')).toEqual('11:00 AM');
+    });
+
+    it('should not update startDate when endTime is changed to a value greater than startDate time', async () => {
+      const { POM } = await createAppointmentPopup({ appointmentData: testAppointment });
+
+      POM.setInputValue('endTimeEditor', new Date(2017, 4, 9, 12));
+
+      expect(POM.getInputValue('startDateEditor')).toEqual('5/9/2017');
+      expect(POM.getInputValue('startTimeEditor')).toEqual('9:30 AM');
+      expect(POM.getInputValue('endDateEditor')).toEqual('5/9/2017');
+    });
+  });
+
+  it('should propagate firstDayOfWeek to editor calendars and recurrence week day buttons', async () => {
+    const { POM } = await createAppointmentPopup({
+      appointmentData: {
+        text: 'common-app',
+        startDate: new Date(2017, 4, 9, 9, 30),
+        endDate: new Date(2017, 4, 9, 11),
+      },
+      firstDayOfWeek: 1,
+    });
+    POM.selectRepeatValue('weekly');
+
+    const startDateFDOW = POM.dxForm.getEditor('startDateEditor')?.option('calendarOptions.firstDayOfWeek');
+    const endDateFDOW = POM.dxForm.getEditor('endDateEditor')?.option('calendarOptions.firstDayOfWeek');
+    const recurrenceStartFDOW = POM.dxForm.getEditor('recurrenceStartDateEditor')?.option('calendarOptions.firstDayOfWeek');
+    const weekDayButtonsText = POM.recurrenceWeekDayButtons.textContent;
+
+    expect(startDateFDOW).toBe(1);
+    expect(endDateFDOW).toBe(1);
+    expect(recurrenceStartFDOW).toBe(1);
+    expect(weekDayButtonsText).toBe('MTWTFSS');
+  });
 });