fix: fix bugs

Author: sjbur

apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx

@@ -381,12 +381,6 @@ export const LegacyPopup: Story = {
           form: {
             onContentReady: function (e) {
               form = e.component;
-              const onValueChanged = form.getEditor("startDateEditor").option("onValueChanged");
-
-              form.getEditor("startDateEditor").option("onValueChanged", (e) => {
-                onValueChanged(e);
-                form.getEditor("recurrenceStartDateEditor")?.option("value", e.value);
-              });
             },
             iconsShowMode: "both",
             items: [
@@ -408,23 +402,25 @@ export const LegacyPopup: Story = {
                           onValueChanged: (e) => {
                             if (e.value === true) {
                               form.option("colCount", 2);
-                              form.itemOption("recurrenceGroup", "cssClass", "");
 
-                              const onValueChanged = form.getEditor("repeatEditor").option("onValueChanged");
-                              form.getEditor("repeatEditor").option("value", "daily");
-                              onValueChanged({ ...e, value: "daily" });
+                              const recurrenceRule = form.option('formData').recurrenceRule;
+
+                              form.option('formData', {
+                                ...form.option('formData'),
+                                recurrenceRule:  recurrenceRule ? form.option('formData')?.recurrenceRule : "FREQ=DAILY"
+                              })
+                              form.itemOption("recurrenceGroup", "cssClass", "");
                             } else {
                               form.option("colCount", 1);
+                              form.option('formData', {
+                                ...form.option('formData'),
+                                recurrenceRule: ""
+                              })
                               form.itemOption("recurrenceGroup", "cssClass", "dx-hidden");
-
-                              const onValueChanged = form.getEditor("repeatEditor").option("onValueChanged");
-                              form.getEditor("repeatEditor").option("value", "never");
-                              onValueChanged({ ...e, value: "never" });
                             }
                           },
                         },
                       },
-                      { name: "repeatEditor", colCount: 0, cssClass: "dx-hidden" },
                     ],
                   },
                   "resourcesGroup",
@@ -435,10 +431,6 @@ export const LegacyPopup: Story = {
                 name: "recurrenceGroup",
                 itemType: "group",
                 items: [
-                  {
-                    name: "recurrenceStartDateEditor",
-                    cssClass: "dx-hidden",
-                  },
                   "recurrenceRuleGroup",
                   "recurrenceEndGroup",
                 ],

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

@@ -847,22 +847,6 @@ export class AppointmentForm {
     }
   }
 
-  showRecurrenceGroup(): void {
-    const currentHeight = this.dxPopup.option('height') as string | number | undefined;
-
-    if (currentHeight === 'auto' || currentHeight === undefined) {
-      const overlayHeight = this.dxPopup.$overlayContent().get(0).clientHeight;
-      this.dxPopup.option('height', overlayHeight);
-    }
-
-    this._$mainGroup?.addClass(CLASSES.mainHidden);
-    this._$mainGroup?.attr('tabindex', '-1');
-    this._$recurrenceGroup?.removeClass(CLASSES.recurrenceHidden);
-    this._$recurrenceGroup?.removeAttr('tabindex');
-
-    this._popup.updateToolbarForRecurrenceGroup();
-  }
-
   showMainGroup(): void {
     const currentHeight = this.dxPopup.option('height') as string | number | undefined;
     const editingConfig = this.scheduler.getEditingConfig();
@@ -880,6 +864,22 @@ export class AppointmentForm {
     this._popup.updateToolbarForMainGroup();
   }
 
+  showRecurrenceGroup(): void {
+    const currentHeight = this.dxPopup.option('height') as string | number | undefined;
+
+    if (currentHeight === 'auto' || currentHeight === undefined) {
+      const overlayHeight = this.dxPopup.$overlayContent().get(0).clientHeight;
+      this.dxPopup.option('height', overlayHeight);
+    }
+
+    this._$mainGroup?.addClass(CLASSES.mainHidden);
+    this._$mainGroup?.attr('tabindex', '-1');
+    this._$recurrenceGroup?.removeClass(CLASSES.recurrenceHidden);
+    this._$recurrenceGroup?.removeAttr('tabindex');
+
+    this._popup.updateToolbarForRecurrenceGroup();
+  }
+
   saveRecurrenceValue(): void {
     const { recurrenceRule } = this._recurrenceForm;
     const { recurrenceRuleExpr } = this.scheduler.getDataAccessors().expr;

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

@@ -179,6 +179,7 @@ export class RecurrenceForm {
 
   setReadOnly(value: boolean): void {
     this._readOnly = value;
+    this.updateWeekDaysButtons();
   }
 
   createRecurrenceFormGroup(): GroupItem {
@@ -350,6 +351,11 @@ export class RecurrenceForm {
             disabled: this._readOnly,
             onContentReady: (e): void => {
               $(e.element).removeClass('dx-button-has-text');
+
+              const isSelected = this.recurrenceRule.byDay.includes(item.key);
+
+              e.component.option('stylingMode', isSelected ? 'contained' : 'outlined');
+              e.component.option('type', isSelected ? 'default' : 'normal');
             },
             onClick: (): void => {
               const isSelected = this.recurrenceRule.byDay.includes(item.key);
@@ -587,8 +593,6 @@ export class RecurrenceForm {
   }
 
   private updateDayEditorsVisibility(): void {
-    this.dxForm.beginUpdate();
-
     const recurrencePatternGroupPath = `${RECURRENCE_GROUP_NAME}.${GROUP_NAMES.recurrenceRuleGroup}.${GROUP_NAMES.recurrencePatternGroup}`;
 
     const daysOfWeekGroup = `${recurrencePatternGroupPath}.${GROUP_NAMES.recurrenceDaysOfWeekEditor}`;
@@ -613,7 +617,6 @@ export class RecurrenceForm {
         break;
     }
 
-    this.dxForm.endUpdate();
     this.updateWeekDaysButtons();
   }
 
@@ -623,6 +626,7 @@ export class RecurrenceForm {
 
       button.option('stylingMode', isSelected ? 'contained' : 'outlined');
       button.option('type', isSelected ? 'default' : 'normal');
+      button.option('disabled', this._readOnly);
     });
   }
 }