diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png
new file mode 100644
index 000000000000..17b7b00d2f3c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (generic.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png
new file mode 100644
index 000000000000..6e854b42344c
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__with-labelMode-static (material.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png
index 8fdb5ff204d2..d10c6419aefa 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__daily (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png
index b431e91ed2cf..5b9e549c2be3 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__hourly (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png
index 924784a7155a..e28a1148fe9b 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__mobile (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png
index da23ddb3f1e6..837906ad7391 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__monthly (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png
index a81c27863970..71f952fa8b26 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png
index 1d45f179e0cd..1a523deb167b 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__weekly (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png
index c00a44a6db0f..eabaeba10d90 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png
index 3892cd4d9df8..a550e6b34cf1 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-labelMode-static (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png
index 69c9e44a16e5..395855353dda 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__yearly (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts
index 0d61f2799deb..df8b17f9e7c0 100644
--- a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts
+++ b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.visual.ts
@@ -2,6 +2,7 @@ import Scheduler from 'devextreme-testcafe-models/scheduler';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { createWidget } from '../../../../helpers/createWidget';
 import url from '../../../../helpers/getPageUrl';
+import { Themes } from '../../../../helpers/themes';
 import { testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`Appointment Form: Main Form`
@@ -338,7 +339,10 @@ test.meta({ browserSize: [1500, 1500] })('Recurrence settings button should have
   });
 });
 
-test.meta({ browserSize: [1500, 1500] })('appointment form with labelMode=static', async (t) => {
+test.meta({
+  browserSize: [1500, 1500],
+  themes: [Themes.genericLight, Themes.materialBlue, Themes.fluentBlue],
+})('appointment form with labelMode=static', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const scheduler = new Scheduler(SCHEDULER_SELECTOR);
diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
index 309239cf053d..38bd26aa9cc9 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
@@ -503,6 +503,10 @@ $scheduler-appointment-form-label-padding: 20px;
         }
       }
 
+      .dx-scheduler-form-recurrence-group.dx-field-item {
+        padding: 0;
+      }
+
       /* Icons alignment */
       .dx-scheduler-form-group-with-icon .dx-item-content > .dx-box-item:has(.dx-scheduler-form-icon) {
         flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important
diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
index 16f816c52700..d9dc355c03f4 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
@@ -285,6 +285,13 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
       }
     }
 
+    // Fix icon height and padding for floating and static input's label modes
+    .dx-item-content:has(.dx-texteditor-with-floating-label):not(:has(.dx-scheduler-form-all-day-switch)) .dx-scheduler-form-icon.dx-field-item,
+    .dx-item-content:has(.dx-texteditor-with-label):not(:has(.dx-scheduler-form-all-day-switch)) .dx-scheduler-form-icon.dx-field-item {
+      height: $generic-scheduler-appointment-popup-icon-static-label-container-height;
+      padding-top: $generic-scheduler-appointment-popup-icon-static-label-padding-top;
+    }
+
     .dx-scheduler-form-icon-sized-gap {
       width: $generic-scheduler-appointment-popup-icon-size;
     }
diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss
index 97a54afea79d..88289815d9ec 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss
@@ -31,6 +31,8 @@ $generic-scheduler-appointment-popup-toolbar-height: null !default;
 $generic-scheduler-appointment-popup-toolbar-label-size: null !default;
 $generic-scheduler-appointment-popup-icon-size: null !default;
 $generic-scheduler-appointment-popup-icon-container-height: null !default;
+$generic-scheduler-appointment-popup-icon-static-label-container-height: null !default;
+$generic-scheduler-appointment-popup-icon-static-label-padding-top: null !default;
 $generic-scheduler-appointment-popup-icon-padding-right: null !default;
 $generic-scheduler-appointment-popup-icon-margin-top: null !default;
 $generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default;
@@ -98,6 +100,8 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-toolbar-label-size: 20px !default;
   $generic-scheduler-appointment-popup-icon-size: 18px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 36px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-container-height: 42px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-padding-top: 7px !default;
   $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
   $generic-scheduler-appointment-popup-icon-margin-top: 22px !default;
   $generic-scheduler-appointment-popup-icon-inner-label-margin-top: null !default;
@@ -167,6 +171,8 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $generic-scheduler-appointment-popup-toolbar-label-size: 18px !default;
   $generic-scheduler-appointment-popup-icon-size: 14px !default;
   $generic-scheduler-appointment-popup-icon-container-height: 26px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-container-height: 26px !default;
+  $generic-scheduler-appointment-popup-icon-static-label-padding-top: 2px !default;
   $generic-scheduler-appointment-popup-icon-padding-right: 5px !default;
   $generic-scheduler-appointment-popup-icon-margin-top: 18px !default;
   $generic-scheduler-appointment-popup-icon-inner-label-margin-top: 4.5px !default;
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 b56f913186d5..bc913b50015c 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
@@ -1852,21 +1852,8 @@ describe('Appointment Form', () => {
         const mainFormIcons = POM.popup.mainGroup.querySelectorAll(`.${CLASSES.icon}`);
         const recurrenceFormIcons = POM.popup.recurrenceGroup.querySelectorAll(`.${CLASSES.icon}`);
 
-        expect(mainFormIcons.length).toBe(4);
-        expect(recurrenceFormIcons.length).toBe(3);
-
-        const mainIconsCorrect = Array.from(mainFormIcons).every((icon) => {
-          const isVisible = !icon.classList.contains(CLASSES.hidden);
-          return isVisible === visibleMain;
-        });
-
-        const recurrenceIconsCorrect = Array.from(recurrenceFormIcons).every((icon) => {
-          const isVisible = !icon.classList.contains(CLASSES.hidden);
-          return isVisible === visibleRecurrence;
-        });
-
-        expect(mainIconsCorrect).toBe(true);
-        expect(recurrenceIconsCorrect).toBe(true);
+        expect(mainFormIcons.length).toBe(visibleMain ? 4 : 0);
+        expect(recurrenceFormIcons.length).toBe(visibleRecurrence ? 3 : 0);
       });
     });
   });
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
index dc44f0c7be9a..2994adab4265 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
@@ -219,17 +219,18 @@ export class AppointmentForm {
   create(popup: any): void {
     this._popup = popup;
 
-    const mainGroup = this.createMainFormGroup();
+    const iconsShowMode = this.getIconsShowMode();
+    const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
+    const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
+
+    const mainGroup = this.createMainFormGroup(showMainGroupIcons);
 
     this._recurrenceForm = new RecurrenceForm(this.scheduler);
-    const recurrenceGroup = this._recurrenceForm.createRecurrenceFormGroup();
+    const recurrenceGroup = this._recurrenceForm
+      .createRecurrenceFormGroup(showRecurrenceGroupIcons);
 
     const items = [mainGroup, recurrenceGroup];
 
-    const iconsShowMode = this.getIconsShowMode();
-    const showMainGroupIcons = ['main', 'both'].includes(iconsShowMode);
-    const showRecurrenceGroupIcons = ['recurrence', 'both'].includes(iconsShowMode);
-
     this.setStylingModeToEditors(mainGroup, showMainGroupIcons);
     this.setStylingModeToEditors(recurrenceGroup, showRecurrenceGroupIcons);
 
@@ -324,23 +325,23 @@ export class AppointmentForm {
     return this.scheduler.createComponent(element, dxForm, formOptions) as dxForm;
   }
 
-  private createMainFormGroup(): GroupItem {
+  private createMainFormGroup(showIcon: boolean): GroupItem {
     return {
       name: MAIN_GROUP_NAME,
       itemType: 'group',
       colSpan: 1,
       cssClass: CLASSES.mainGroup,
       items: [
-        this.createSubjectGroup(),
-        this.createDateRangeGroup(),
-        this.createRepeatGroup(),
-        this.createResourcesGroup(),
-        this.createDescriptionGroup(),
+        this.createSubjectGroup(showIcon),
+        this.createDateRangeGroup(showIcon),
+        this.createRepeatGroup(showIcon),
+        this.createResourcesGroup(showIcon),
+        this.createDescriptionGroup(showIcon),
       ],
     } as GroupItem;
   }
 
-  private createSubjectGroup(): GroupItem {
+  private createSubjectGroup(showIcon: boolean): GroupItem {
     const { textExpr } = this.scheduler.getDataAccessors().expr;
 
     return {
@@ -348,19 +349,18 @@ export class AppointmentForm {
       itemType: 'group',
       cssClass: `${CLASSES.subjectGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: SUBJECT_ICON_NAME,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('isnotblank'),
+          visible: showIcon,
         },
         {
           name: SUBJECT_EDITOR_NAME,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           itemType: 'simple',
           cssClass: CLASSES.textEditor,
           dataField: textExpr,
@@ -373,24 +373,23 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createDateRangeGroup(): GroupItem {
+  private createDateRangeGroup(showIcon: boolean): GroupItem {
     return {
       name: DATE_GROUP_NAME,
       itemType: 'group',
       cssClass: `${CLASSES.dateRangeGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: DATE_ICON_NAME,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('clock'),
+          visible: showIcon,
         },
         {
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           name: DATE_OPTIONS_GROUP_NAME,
           itemType: 'group',
           items: [
@@ -653,16 +652,14 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createRepeatGroup(): GroupItem {
+  private createRepeatGroup(showIcon: boolean): GroupItem {
     const { recurrenceRuleExpr } = this.scheduler.getDataAccessors().expr;
 
     return {
       name: REPEAT_GROUP_NAME,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.repeatGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
@@ -670,10 +667,11 @@ export class AppointmentForm {
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('repeat'),
+          visible: showIcon,
         },
         {
           name: REPEAT_EDITOR_NAME,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           itemType: 'simple',
           cssClass: CLASSES.repeatEditor,
           label: {
@@ -709,16 +707,14 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createDescriptionGroup(): GroupItem {
+  private createDescriptionGroup(showIcon: boolean): GroupItem {
     const { descriptionExpr } = this.scheduler.getDataAccessors().expr;
 
     return {
       name: DESCRIPTION_GROUP_NAME,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.descriptionGroup} ${CLASSES.groupWithIcon}`,
       items: [
         {
@@ -726,11 +722,12 @@ export class AppointmentForm {
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('description'),
+          visible: showIcon,
         },
         {
           name: DESCRIPTION_EDITOR_NAME,
           dataField: descriptionExpr,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           itemType: 'simple',
           cssClass: CLASSES.descriptionEditor,
           label: {
@@ -745,7 +742,7 @@ export class AppointmentForm {
     } as GroupItem;
   }
 
-  private createResourcesGroup(): GroupItem {
+  private createResourcesGroup(showIcon: boolean): GroupItem {
     const resourcesLoaders: ResourceLoader[] = Object.values(this.scheduler.getResourceById());
 
     let resourcesItems: FormItem[] = resourcesLoaders.map((resourceLoader) => {
@@ -778,9 +775,7 @@ export class AppointmentForm {
         itemType: 'group',
         visible: resourcesItems.length > 0,
         colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
+        colCountByScreen: { xs: 2 },
         cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`,
         items: [
           {
@@ -788,18 +783,19 @@ export class AppointmentForm {
             colSpan: 1,
             cssClass: `${CLASSES.formIcon} ${CLASSES.defaultResourceIcon}`,
             template: createFormIconTemplate('addcircleoutline'),
+            visible: showIcon,
           },
           {
             name: RESOURCE_EDITORS_GROUP_NAME,
             itemType: 'group',
-            colSpan: 1,
+            colSpan: showIcon ? 1 : 2,
             items: resourcesItems,
           },
         ],
       } as GroupItem;
     }
 
-    resourcesItems = resourcesItems.map((item, index) => {
+    resourcesItems = resourcesItems.map((formItem, index) => {
       const icon = resourcesLoaders[index].icon ?? '';
       const dataField = resourcesLoaders[index].resourceIndex;
 
@@ -807,9 +803,7 @@ export class AppointmentForm {
         itemType: 'group',
         name: `${dataField}Group`,
         colCount: 2,
-        colCountByScreen: {
-          xs: 2,
-        },
+        colCountByScreen: { xs: 2 },
         cssClass: CLASSES.groupWithIcon,
         items: [
           {
@@ -817,8 +811,9 @@ export class AppointmentForm {
             name: `${dataField}Icon`,
             cssClass: CLASSES.formIcon,
             template: createFormIconTemplate(icon),
+            visible: showIcon,
           },
-          item,
+          { ...formItem, colSpan: showIcon ? 1 : 2 },
         ],
       } as GroupItem;
     });
@@ -840,12 +835,6 @@ export class AppointmentForm {
     const isIconItem = itemClasses.includes(CLASSES.formIcon);
 
     if (isIconItem) {
-      const isHidden = itemClasses.includes(CLASSES.hidden);
-
-      if (!showIcon && !isHidden) {
-        item.cssClass += ` ${CLASSES.hidden}`;
-      }
-
       return;
     }
 
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts
index 8429a6552c4f..148bdb8c7a6a 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_recurrence_form.ts
@@ -182,28 +182,26 @@ export class RecurrenceForm {
     this._readOnly = value;
   }
 
-  createRecurrenceFormGroup(): GroupItem {
+  createRecurrenceFormGroup(showIcon: boolean): GroupItem {
     return {
       name: RECURRENCE_GROUP_NAME,
       itemType: 'group',
       cssClass: `${CLASSES.recurrenceGroup} ${CLASSES.recurrenceHidden}`,
       colSpan: 1,
       items: [
-        this.createRecurrenceStartDateGroup(),
-        this.createRecurrenceSettingsGroup(),
-        this.createRecurrenceEndGroup(),
+        this.createRecurrenceStartDateGroup(showIcon),
+        this.createRecurrenceSettingsGroup(showIcon),
+        this.createRecurrenceEndGroup(showIcon),
       ],
     } as GroupItem;
   }
 
-  private createRecurrenceStartDateGroup(): GroupItem {
+  private createRecurrenceStartDateGroup(showIcon: boolean): GroupItem {
     return {
       name: GROUP_NAMES.recurrenceStartDateGroup,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: CLASSES.groupWithIcon,
       items: [
         {
@@ -211,12 +209,14 @@ export class RecurrenceForm {
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('clock'),
+          visible: showIcon,
         },
         extend(
           true,
           getStartDateCommonConfig(this.scheduler.getFirstDayOfWeek()),
           {
             name: EDITOR_NAMES.recurrenceStartDateEditor,
+            colSpan: showIcon ? 1 : 2,
             cssClass: CLASSES.recurrenceStartDateEditor,
             label: {
               text: messageLocalization.format('dxScheduler-editorLabelStartDate'),
@@ -235,30 +235,27 @@ export class RecurrenceForm {
     } as GroupItem;
   }
 
-  private createRecurrenceSettingsGroup(): GroupItem {
+  private createRecurrenceSettingsGroup(showIcon: boolean): GroupItem {
     return {
       itemType: 'group',
       name: GROUP_NAMES.recurrenceRuleGroup,
       cssClass: `${CLASSES.recurrenceSettingsGroup} ${CLASSES.groupWithIcon}`,
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       items: [
         {
           name: ICON_NAMES.recurrenceRuleIcon,
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('repeat'),
+          visible: showIcon,
         },
         {
           itemType: 'group',
           name: GROUP_NAMES.recurrencePatternGroup,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           colCount: 1,
-          colCountByScreen: {
-            xs: 1,
-          },
+          colCountByScreen: { xs: 1 },
           items: [
             this.createRecurrenceRuleGroup(),
             this.createDaysOfWeekGroup(),
@@ -440,14 +437,12 @@ export class RecurrenceForm {
     } as GroupItem;
   }
 
-  private createRecurrenceEndGroup(): GroupItem {
+  private createRecurrenceEndGroup(showIcon: boolean): GroupItem {
     return {
       name: GROUP_NAMES.recurrenceEndGroup,
       itemType: 'group',
       colCount: 2,
-      colCountByScreen: {
-        xs: 2,
-      },
+      colCountByScreen: { xs: 2 },
       cssClass: `${CLASSES.groupWithIcon} ${CLASSES.recurrenceEndGroup}`,
       items: [
         {
@@ -455,11 +450,12 @@ export class RecurrenceForm {
           colSpan: 1,
           cssClass: CLASSES.formIcon,
           template: createFormIconTemplate('description'),
+          visible: showIcon,
         },
         {
           itemType: 'group',
           name: EDITOR_NAMES.recurrenceEndEditor,
-          colSpan: 1,
+          colSpan: showIcon ? 1 : 2,
           colCount: 2,
           colCountByScreen: { xs: 2 },
           label: {
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index abaed02d03f2..98ae3b17fb53 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <title>DevExtreme jQuery Example</title>
 
@@ -16,6 +17,18 @@
         document.getElementsByTagName("head")[0].appendChild(link);
     </script>
 
+    <style>
+        .dx-scheduler-timeline .dx-scheduler-appointment {
+            container-type: inline-size;
+        }
+
+        @container (max-width: 9px) {
+            .dx-scheduler-appointment .dx-scheduler-appointment-strip {
+                display: none;
+            }
+        }
+    </style>
+
     <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
     <!-- HtmlEditor -->
     <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
@@ -42,6 +55,7 @@
     <script type="text/javascript" src="./themeSelector.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>
+
 <body class="dx-surface">
     <div role="main">
         <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
@@ -49,15 +63,378 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <select id="theme-selector" style="display: block;">
         </select>
         <br />
-        <div id="button"></div>
+        <div id="scheduler"></div>
         <script>
             $(() => {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: () => { alert("clicked"); }
+                $('#scheduler').dxScheduler({
+                    timeZone: 'America/Los_Angeles',
+                    dataSource: data,
+                    views: ['timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth',
+                        'day',    
+                    // { 'type': 'day', 'snapToCellsMode': 'always' },
+                        'week', 'month', 'agenda'],
+                    currentView: 'timelineDay',
+                    currentDate: new Date(2021, 1, 2),
+                    firstDayOfWeek: 0,
+                    // startDayHour: 8,
+                    // endDayHour: 20,
+                    // cellDuration: 240,
+                    snapToCellsMode: 'never',
+                    editing: {
+                        form: {
+                            labelMode: 'static',
+                            iconsShowMode: 'both'
+                        }
+                    }
                 });
             });
+
+            const data = [{
+                text: 'Google AdWords Strategy',
+                ownerId: [2],
+                startDate: new Date('2021-02-01T16:00:00.000Z'),
+                endDate: new Date('2021-02-01T17:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'New Brochures',
+                ownerId: [1],
+                startDate: new Date('2021-02-01T18:30:00.000Z'),
+                endDate: new Date('2021-02-01T21:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Brochure Design Review',
+                ownerId: [4],
+                startDate: new Date('2021-02-01T20:15:00.000Z'),
+                endDate: new Date('2021-02-01T23:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Website Re-Design Plan',
+                ownerId: [3],
+                startDate: new Date('2021-02-02T23:45:00.000Z'),
+                endDate: new Date('2021-02-02T23:46:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Rollout of New Website and Marketing Brochures',
+                ownerId: [1],
+                startDate: new Date('2021-02-02T15:15:00.000Z'),
+                endDate: new Date('2021-02-02T17:45:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Update Sales Strategy Documents',
+                ownerId: [2],
+                startDate: new Date('2021-02-02T19:00:00.000Z'),
+                endDate: new Date('2021-02-02T20:45:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Non-Compete Agreements',
+                ownerId: [4],
+                startDate: new Date('2021-02-03T16:15:00.000Z'),
+                endDate: new Date('2021-02-03T17:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Approve Hiring of John Jeffers',
+                ownerId: [2],
+                startDate: new Date('2021-02-03T17:00:00.000Z'),
+                endDate: new Date('2021-02-03T18:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Update NDA Agreement',
+                ownerId: [1],
+                startDate: new Date('2021-02-03T18:45:00.000Z'),
+                endDate: new Date('2021-02-03T20:45:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Update Employee Files with New NDA',
+                ownerId: [2],
+                startDate: new Date('2021-02-03T21:00:00.000Z'),
+                endDate: new Date('2021-02-03T23:45:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Submit Questions Regarding New NDA',
+                ownerId: [1],
+                startDate: new Date('2021-02-05T01:00:00.000Z'),
+                endDate: new Date('2021-02-04T16:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Submit Signed NDA',
+                ownerId: [2],
+                startDate: new Date('2021-02-04T19:45:00.000Z'),
+                endDate: new Date('2021-02-04T21:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Review Revenue Projections',
+                ownerId: [3],
+                startDate: new Date('2021-02-05T00:15:00.000Z'),
+                endDate: new Date('2021-02-04T15:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Comment on Revenue Projections',
+                ownerId: [2],
+                startDate: new Date('2021-02-05T16:15:00.000Z'),
+                endDate: new Date('2021-02-05T18:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Provide New Health Insurance Docs',
+                ownerId: [3],
+                startDate: new Date('2021-02-05T19:45:00.000Z'),
+                endDate: new Date('2021-02-05T21:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Review Changes to Health Insurance Coverage',
+                ownerId: [2],
+                startDate: new Date('2021-02-05T21:15:00.000Z'),
+                endDate: new Date('2021-02-05T22:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Review Training Course for any Omissions',
+                ownerId: [2],
+                startDate: new Date('2021-02-08T21:00:00.000Z'),
+                endDate: new Date('2021-02-09T19:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Recall Rebate Form',
+                ownerId: [1],
+                startDate: new Date('2021-02-08T19:45:00.000Z'),
+                endDate: new Date('2021-02-08T20:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Create Report on Customer Feedback',
+                ownerId: [4],
+                startDate: new Date('2021-02-09T22:15:00.000Z'),
+                endDate: new Date('2021-02-10T00:30:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Review Customer Feedback Report',
+                ownerId: [2],
+                startDate: new Date('2021-02-09T23:15:00.000Z'),
+                endDate: new Date('2021-02-10T01:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Customer Feedback Report Analysis',
+                ownerId: [3],
+                startDate: new Date('2021-02-10T16:30:00.000Z'),
+                endDate: new Date('2021-02-10T17:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Prepare Shipping Cost Analysis Report',
+                ownerId: [4],
+                startDate: new Date('2021-02-10T19:30:00.000Z'),
+                endDate: new Date('2021-02-10T20:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Provide Feedback on Shippers',
+                ownerId: [2],
+                startDate: new Date('2021-02-10T21:15:00.000Z'),
+                endDate: new Date('2021-02-10T23:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Select Preferred Shipper',
+                ownerId: [1],
+                startDate: new Date('2021-02-11T00:30:00.000Z'),
+                endDate: new Date('2021-02-11T03:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Complete Shipper Selection Form',
+                ownerId: [2],
+                startDate: new Date('2021-02-11T15:30:00.000Z'),
+                endDate: new Date('2021-02-11T17:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Upgrade Server Hardware',
+                ownerId: [4],
+                startDate: new Date('2021-02-11T19:00:00.000Z'),
+                endDate: new Date('2021-02-11T21:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Upgrade Personal Computers',
+                ownerId: [3],
+                startDate: new Date('2021-02-11T21:45:00.000Z'),
+                endDate: new Date('2021-02-11T23:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Upgrade Apps to Windows RT or stay with WinForms',
+                ownerId: [1],
+                startDate: new Date('2021-02-12T17:30:00.000Z'),
+                endDate: new Date('2021-02-12T20:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Estimate Time Required to Touch-Enable Apps',
+                ownerId: [1],
+                startDate: new Date('2021-02-12T21:45:00.000Z'),
+                endDate: new Date('2021-02-12T23:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Report on Tranistion to Touch-Based Apps',
+                ownerId: [2],
+                startDate: new Date('2021-02-13T01:30:00.000Z'),
+                endDate: new Date('2021-02-13T02:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Submit New Website Design',
+                ownerId: [2],
+                startDate: new Date('2021-02-15T15:00:00.000Z'),
+                endDate: new Date('2021-02-15T17:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Create Icons for Website',
+                ownerId: [4],
+                startDate: new Date('2021-02-15T18:30:00.000Z'),
+                endDate: new Date('2021-02-15T20:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Create New Product Pages',
+                ownerId: [1],
+                startDate: new Date('2021-02-16T16:45:00.000Z'),
+                endDate: new Date('2021-02-16T18:45:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Approve Website Launch',
+                ownerId: [3],
+                startDate: new Date('2021-02-16T19:00:00.000Z'),
+                endDate: new Date('2021-02-16T22:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Update Customer Shipping Profiles',
+                ownerId: [3],
+                startDate: new Date('2021-02-17T16:30:00.000Z'),
+                endDate: new Date('2021-02-17T18:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Create New Shipping Return Labels',
+                ownerId: [4],
+                startDate: new Date('2021-02-17T19:45:00.000Z'),
+                endDate: new Date('2021-02-17T21:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Get Design for Shipping Return Labels',
+                ownerId: [3],
+                startDate: new Date('2021-02-17T22:00:00.000Z'),
+                endDate: new Date('2021-02-17T23:30:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'PSD needed for Shipping Return Labels',
+                ownerId: [4],
+                startDate: new Date('2021-02-18T15:30:00.000Z'),
+                endDate: new Date('2021-02-18T16:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Contact ISP and Discuss Payment Options',
+                ownerId: [1],
+                startDate: new Date('2021-02-18T18:30:00.000Z'),
+                endDate: new Date('2021-02-18T23:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Prepare Year-End Support Summary Report',
+                ownerId: [2],
+                startDate: new Date('2021-02-19T00:00:00.000Z'),
+                endDate: new Date('2021-02-19T03:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Review New Training Material',
+                ownerId: [3],
+                startDate: new Date('2021-02-19T15:00:00.000Z'),
+                endDate: new Date('2021-02-19T16:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Distribute Training Material to Support Staff',
+                ownerId: [2],
+                startDate: new Date('2021-02-19T19:45:00.000Z'),
+                endDate: new Date('2021-02-19T21:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Training Material Distribution Schedule',
+                ownerId: [2],
+                startDate: new Date('2021-02-19T21:15:00.000Z'),
+                endDate: new Date('2021-02-19T23:15:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Approval on Converting to New HDMI Specification',
+                ownerId: [4],
+                startDate: new Date('2021-02-22T16:30:00.000Z'),
+                endDate: new Date('2021-02-22T17:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Create New Spike for Automation Server',
+                ownerId: [3],
+                startDate: new Date('2021-02-22T17:00:00.000Z'),
+                endDate: new Date('2021-02-22T19:30:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Code Review - New Automation Server',
+                ownerId: [1],
+                startDate: new Date('2021-02-22T20:00:00.000Z'),
+                endDate: new Date('2021-02-22T22:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Confirm Availability for Sales Meeting',
+                ownerId: [1],
+                startDate: new Date('2021-02-23T17:15:00.000Z'),
+                endDate: new Date('2021-02-23T22:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Reschedule Sales Team Meeting',
+                ownerId: [2],
+                startDate: new Date('2021-02-23T23:15:00.000Z'),
+                endDate: new Date('2021-02-24T01:00:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Send 2 Remotes for Giveaways',
+                ownerId: [3],
+                startDate: new Date('2021-02-24T16:30:00.000Z'),
+                endDate: new Date('2021-02-24T18:45:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Discuss Product Giveaways with Management',
+                ownerId: [1],
+                startDate: new Date('2021-02-24T19:15:00.000Z'),
+                endDate: new Date('2021-02-24T23:45:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Replace Desktops on the 3rd Floor',
+                ownerId: [2],
+                startDate: new Date('2021-02-25T16:30:00.000Z'),
+                endDate: new Date('2021-02-25T17:45:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Update Database with New Leads',
+                ownerId: [3],
+                startDate: new Date('2021-02-25T19:00:00.000Z'),
+                endDate: new Date('2021-02-25T21:15:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Mail New Leads for Follow Up',
+                ownerId: [1],
+                startDate: new Date('2021-02-25T21:45:00.000Z'),
+                endDate: new Date('2021-02-25T22:30:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Send Territory Sales Breakdown',
+                ownerId: [2],
+                startDate: new Date('2021-02-26T01:00:00.000Z'),
+                endDate: new Date('2021-02-26T03:00:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Territory Sales Breakdown Report',
+                ownerId: [1],
+                startDate: new Date('2021-02-26T15:45:00.000Z'),
+                endDate: new Date('2021-02-26T16:45:00.000Z'),
+                priority: 1,
+            }, {
+                text: 'Report on the State of Engineering Dept',
+                ownerId: [3],
+                startDate: new Date('2021-02-26T21:45:00.000Z'),
+                endDate: new Date('2021-02-26T22:30:00.000Z'),
+                priority: 2,
+            }, {
+                text: 'Staff Productivity Report',
+                ownerId: [4],
+                startDate: new Date('2021-02-26T23:15:00.000Z'),
+                endDate: new Date('2021-02-27T02:30:00.000Z'),
+                priority: 2,
+            }];
+
         </script>
     </div>
 </body>
-</html>
+
+</html>
\ No newline at end of file