Scheduler: Appointment form customization

Author: aleksei-semikozov

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

@@ -1339,6 +1339,28 @@ describe('Appointment Popup Form', () => {
     });
   });
 
+  describe('Form custimization', () => {
+    it('should propagate editing.form options to the form instance', async () => {
+      const { scheduler, POM } = await createScheduler({
+        ...getDefaultConfig(),
+        editing: {
+          allowAdding: true,
+          allowUpdating: true,
+          form: {
+            height: 500,
+          },
+        },
+      });
+
+      scheduler.showAppointmentPopup(commonAppointment);
+
+      const { form } = POM.popup;
+      const formHeight = form.option('height') as number;
+
+      expect(formHeight).toBe(500);
+    });
+  });
+
   it('should update form data after another appointment was open', async () => {
     const { scheduler, POM } = await createScheduler(getDefaultConfig());
 

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

@@ -236,6 +236,8 @@ export class AppointmentForm {
 
   private createForm(items: FormProperties['items']): dxForm {
     const element = $('<div>');
+    const editingConfig = this.scheduler.getEditingConfig();
+    const userFormOptions = editingConfig?.form ?? {};
 
     return this.scheduler.createComponent(element, dxForm, {
       items,

packages/devextreme/js/ui/scheduler.d.ts

@@ -30,7 +30,7 @@ import {
 
 import dxDraggable from './draggable';
 
-import dxForm, { Item as FormItem } from './form';
+import dxForm, { Properties as FormProperties } from './form';
 import dxPopup, { Properties as PopupProperties } from './popup';
 
 import dxSortable from './sortable';
@@ -633,17 +633,10 @@ export interface dxSchedulerOptions extends WidgetOptions<dxScheduler> {
       allowUpdating?: boolean;
       /**
        * @docid
-       * @default undefined
        * @public
+       * @type dxFormOptions
        */
-      form?: {
-        /**
-         * @docid
-         * @type Array<dxFormSimpleItem | dxFormGroupItem | dxFormTabbedItem | dxFormEmptyItem | dxFormButtonItem>
-         * @default []
-         * @public
-         */
-        items?: Array<FormItem>;
+      form?: FormProperties & {
         /**
          * @docid
          * @type_function_param1 formData:object