feat: make changes to readonly appointment form

Author: sjbur

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

@@ -641,6 +641,15 @@ $scheduler-appointment-form-label-padding: 20px;
         }
       }
 
+      &.dx-scheduler-form-readonly {
+        .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
+          margin-right: 0;
+          &::after {
+            content: none;
+          }
+        }
+      }
+
       /* Recurrence Day Buttons */
       .dx-scheduler-days-of-week-buttons {
         display: flex;

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

@@ -131,6 +131,8 @@ export class AppointmentForm {
   set readOnly(value: boolean) {
     this.dxForm.option('readOnly', value);
     this._recurrenceForm.setReadOnly(value);
+    this.updateReadOnlyCssClass();
+    this.updateRepeatEditor();
   }
 
   get formData(): Record<string, any> {
@@ -256,6 +258,7 @@ export class AppointmentForm {
       onInitialized: (e): void => {
         this._dxForm = e.component;
         this._recurrenceForm.dxForm = this.dxForm;
+        this.updateReadOnlyCssClass();
       },
     } as FormProperties) as dxForm;
   }
@@ -840,6 +843,8 @@ export class AppointmentForm {
     }
 
     repeatEditor.option('buttons', this.getRepeatEditorButtons());
+
+    this.enableRecurrenceSettingsButton();
   }
 
   private getRepeatEditorButtons(): TextEditorButton[] {
@@ -872,6 +877,22 @@ export class AppointmentForm {
     return buttons;
   }
 
+  private enableRecurrenceSettingsButton(): void {
+    const $settingsButton = $(this.dxForm.element())
+      .find(`.${CLASSES.recurrenceSettingsButton}`)
+      .closest('.dx-button');
+
+    if ($settingsButton && $settingsButton.length) {
+      const buttonInstance = ($settingsButton as any).dxButton?.('instance');
+      buttonInstance?.option?.('disabled', false);
+    }
+  }
+
+  private updateReadOnlyCssClass(): void {
+    const $formElement = $(this.dxForm.element());
+    $formElement.toggleClass('dx-scheduler-form-readonly', this.readOnly);
+  }
+
   private updateDateTimeEditorsVisibility(): void {
     const { allDayExpr } = this.scheduler.getDataAccessors().expr;
     const visible = !this.formData[allDayExpr];

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

@@ -102,6 +102,8 @@ export class RecurrenceForm {
 
   private _weekDayButtons: Record<string, dxButton> = {};
 
+  private _readOnly = false;
+
   constructor(scheduler: Scheduler) {
     this.scheduler = scheduler;
     this.weekDayItems = this.createWeekDayItems();
@@ -161,9 +163,7 @@ export class RecurrenceForm {
   }
 
   setReadOnly(value: boolean): void {
-    Object.values(this._weekDayButtons).forEach((button) => {
-      button?.option('disabled', value);
-    });
+    this._readOnly = value;
   }
 
   get recurrenceRule(): RecurrenceRule {
@@ -333,6 +333,7 @@ export class RecurrenceForm {
 
           this._weekDayButtons[item.key] = this.scheduler.createComponent(buttonContainer, Button, {
             text: item.text,
+            disabled: this._readOnly,
             onClick: (): void => {
               const isSelected = this.recurrenceRule.byDay.includes(item.key);