fix

Author: Tucchhaa

packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss

@@ -469,28 +469,31 @@ $scheduler-appointment-form-label-padding: 20px;
     }
 
     .dx-form {
+      min-height: 100%;
       position: relative;
       overflow: hidden;
 
       .dx-scheduler-form-main-group {
         transition: transform 0.3s ease-in-out;
         transform: translateX(0);
+        position: relative;
 
-        &.dx-scheduler-form-main-hidden {
+        &.dx-scheduler-form-main-group-hidden {
           transform: translateX(-100%);
+          position: absolute;
+          top: 0;
         }
       }
 
       .dx-scheduler-form-recurrence-group {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
         transition: transform 0.3s ease-in-out;
-        transform: translateX(100%);
+        transform: translateX(0);
+        position: relative;
 
-        &:not(.dx-scheduler-form-recurrence-hidden) {
-          transform: translateX(0);
+        &.dx-scheduler-form-recurrence-group-hidden {
+          transform: translateX(100%);
+          position: absolute;
+          top: 0;
         }
       }
 

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -61,9 +61,9 @@ const CLASSES = {
   descriptionEditor: 'dx-scheduler-form-description-editor',
 
   recurrenceSettingsButton: 'dx-scheduler-form-recurrence-settings-button',
-  mainHidden: 'dx-scheduler-form-main-hidden',
+  mainHidden: 'dx-scheduler-form-main-group-hidden',
   recurrenceGroup: 'dx-scheduler-form-recurrence-group',
-  recurrenceHidden: 'dx-scheduler-form-recurrence-hidden',
+  recurrenceHidden: 'dx-scheduler-form-recurrence-group-hidden',
 };
 
 const EDITOR_NAMES = {
@@ -130,6 +130,10 @@ export class AppointmentForm {
     return this._dxForm as dxForm;
   }
 
+  private get dxPopup(): Popup {
+    return this._popup.dxPopup as Popup;
+  }
+
   get readOnly(): boolean {
     return this.dxForm.option('readOnly') as boolean;
   }
@@ -767,16 +771,9 @@ export class AppointmentForm {
   }
 
   showRecurrenceGroup(): void {
-    // TODO: make dxPopup a member of AppointmentForm class
-    const $popup = $('.dx-popup.dx-widget.dx-scheduler-appointment-popup');
-    const dxPopup = ($popup as any).dxPopup('instance') as Popup;
-
     // @ts-expect-error
-    dxPopup?.option('height', dxPopup.$overlayContent().height());
-
-    // TODO: move these styles to according CLASSES in scss file
-    this._$mainGroup?.css('position', 'absolute');
-    this._$recurrenceGroup?.css('position', 'relative');
+    const overlayHeight = this.dxPopup.$overlayContent().height();
+    this.dxPopup.option('height', overlayHeight);
 
     this._$mainGroup?.addClass(CLASSES.mainHidden);
     this._$recurrenceGroup?.removeClass(CLASSES.recurrenceHidden);
@@ -793,15 +790,7 @@ export class AppointmentForm {
   }
 
   showMainGroup(saveRecurrenceValue = true): void {
-    // TODO: make dxPopup a member of AppointmentForm class
-    const $popup = $('.dx-popup.dx-widget.dx-scheduler-appointment-popup');
-    const dxPopup = ($popup as any).dxPopup('instance');
-
-    dxPopup?.option('height', undefined);
-
-    // TODO: move these styles to according CLASSES in scss file
-    this._$mainGroup?.css('position', 'relative');
-    this._$recurrenceGroup?.css('position', 'absolute');
+    this.dxPopup.option('height', undefined);
 
     this._$mainGroup?.removeClass(CLASSES.mainHidden);
     this._$recurrenceGroup?.addClass(CLASSES.recurrenceHidden);

packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts

@@ -106,6 +106,7 @@ export class AppointmentPopup {
       },
       contentTemplate: (): dxElementWrapper => {
         this.form.create({
+          dxPopup: this.popup,
           updateToolbarForMainGroup: (): void => this.updateToolbarForMainGroup(),
           updateToolbarForRecurrenceGroup: (): void => this.updateToolbarForRecurrenceGroup(),
         });