diff --git a/apps/demos/Demos/Scheduler/Templates/jQuery/data.js b/apps/demos/Demos/Scheduler/Templates/jQuery/data.js
index d4d5c602b70a..2052d4567b3f 100644
--- a/apps/demos/Demos/Scheduler/Templates/jQuery/data.js
+++ b/apps/demos/Demos/Scheduler/Templates/jQuery/data.js
@@ -5,7 +5,7 @@ const moviesData = [{
   year: 1940,
   image: '../../../../images/movies/HisGirlFriday.jpg',
   duration: 92,
-  color: '#cb6bb2',
+  color: '#9FD89F',
 }, {
   id: 2,
   text: 'Royal Wedding',
@@ -13,7 +13,7 @@ const moviesData = [{
   year: 1951,
   image: '../../../../images/movies/RoyalWedding.jpg',
   duration: 93,
-  color: '#56ca85',
+  color: '#F1BBBC',
 }, {
   id: 3,
   text: 'A Star Is Born',
@@ -21,7 +21,7 @@ const moviesData = [{
   year: 1937,
   image: '../../../../images/movies/AStartIsBorn.jpg',
   duration: 111,
-  color: '#1e90ff',
+  color: '#F9E2AE',
 }, {
   id: 4,
   text: 'The Screaming Skull',
@@ -29,7 +29,7 @@ const moviesData = [{
   year: 1958,
   image: '../../../../images/movies/ScreamingSkull.jpg',
   duration: 68,
-  color: '#ff9747',
+  color: '#EDBBE7',
 }, {
   id: 5,
   text: "It's a Wonderful Life",
@@ -37,7 +37,7 @@ const moviesData = [{
   year: 1946,
   image: '../../../../images/movies/ItsAWonderfulLife.jpg',
   duration: 130,
-  color: '#f05797',
+  color: '#B4D6FA',
 }, {
   id: 6,
   text: 'City Lights',
@@ -45,7 +45,7 @@ const moviesData = [{
   year: 1931,
   image: '../../../../images/movies/CityLights.jpg',
   duration: 87,
-  color: '#2a9010',
+  color: '#C6B1DE',
 }];
 
 const theatreData = [{
diff --git a/apps/demos/Demos/Scheduler/Templates/jQuery/index.js b/apps/demos/Demos/Scheduler/Templates/jQuery/index.js
index 29c14dc049d1..6a9be207d276 100644
--- a/apps/demos/Demos/Scheduler/Templates/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/Templates/jQuery/index.js
@@ -1,4 +1,7 @@
 $(() => {
+  let form;
+  let $movieInfoContainer;
+
   $('#scheduler').dxScheduler({
     timeZone: 'America/Los_Angeles',
     dataSource: data,
@@ -13,9 +16,6 @@ $(() => {
     groups: ['theatreId'],
     crossScrollingEnabled: true,
     cellDuration: 20,
-    editing: {
-      allowAdding: false,
-    },
     resources: [{
       fieldExpr: 'movieId',
       dataSource: moviesData,
@@ -24,85 +24,95 @@ $(() => {
       fieldExpr: 'theatreId',
       dataSource: theatreData,
     }],
-    appointmentTooltipTemplate(model) {
-      return getTooltipTemplate(getMovieById(model.targetedAppointmentData.movieId));
+    appointmentTemplate,
+    appointmentTooltipTemplate: (model) => {
+      const movie = getMovieById(model.targetedAppointmentData.movieId);
+      return movieInfoTemplate(movie);
     },
-    appointmentTemplate(model) {
-      const movieInfo = getMovieById(model.targetedAppointmentData.movieId) || {};
-
-      return $(`${"<div class='showtime-preview'>"
-                        + '<div>'}${movieInfo.text}</div>`
-                        + `<div>Ticket Price: <strong>$${model.targetedAppointmentData.price}</strong>`
-                        + '</div>'
-                        + `<div>${DevExpress.localization.formatDate(model.targetedAppointmentData.displayStartDate, 'shortTime')
-                        } - ${DevExpress.localization.formatDate(model.targetedAppointmentData.displayEndDate, 'shortTime')
-                        }</div>`
-                    + '</div>');
-    },
-    onAppointmentFormOpening(data) {
-      const { form } = data;
-      let movieInfo = getMovieById(data.appointmentData.movieId) || {};
-      let { startDate } = data.appointmentData;
+    editing: {
+      allowAdding: false,
+      form: {
+        onInitialized: (e) => {
+          form = e.component;
 
-      form.option('items', [{
-        label: {
-          text: 'Movie',
+          form.on('fieldDataChanged', (e) => {
+            if (e.dataField === 'startDate') {
+              const movie = getMovieById(form.option('formData').movieId);
+              updateEndDate(form, movie);
+            }
+          });
         },
-        editorType: 'dxSelectBox',
-        dataField: 'movieId',
-        editorOptions: {
-          items: moviesData,
-          displayExpr: 'text',
-          valueExpr: 'id',
-          onValueChanged(args) {
-            movieInfo = getMovieById(args.value);
-
-            form.updateData('director', movieInfo.director);
-            form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
+        items: [
+          {
+            template: () => {
+              $movieInfoContainer = $('<div class="movie-info-container">');
+              updateMovieInfoContainer({});
+              return $movieInfoContainer;
+            },
           },
-        },
-      }, {
-        label: {
-          text: 'Director',
-        },
-        name: 'director',
-        editorType: 'dxTextBox',
-        editorOptions: {
-          value: movieInfo.director,
-          readOnly: true,
-        },
-      }, {
-        dataField: 'startDate',
-        editorType: 'dxDateBox',
-        editorOptions: {
-          width: '100%',
-          type: 'datetime',
-          onValueChanged(args) {
-            startDate = args.value;
+          {
+            itemType: 'group',
+            colCount: 2,
+            colCountByScreen: { xs: 2 },
+            items: [
+              {
+                label: { text: 'Movie' },
+                colSpan: 1,
+                editorType: 'dxSelectBox',
+                dataField: 'movieId',
+                editorOptions: {
+                  items: moviesData,
+                  displayExpr: 'text',
+                  valueExpr: 'id',
+                  stylingMode: getEditorStylingMode(),
+                  onValueChanged(e) {
+                    const movie = getMovieById(e.value);
+
+                    form.updateData('director', movie.director);
 
-            form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
+                    updateMovieInfoContainer(movie);
+                    updateEndDate(form, movie);
+                  },
+                  onContentReady: (e) => {
+                    e.component.option('stylingMode', getEditorStylingMode());
+                  },
+                },
+              },
+              {
+                label: { text: 'Price' },
+                colSpan: 1,
+                editorType: 'dxSelectBox',
+                dataField: 'price',
+                editorOptions: {
+                  items: [5, 10, 15, 20],
+                  displayExpr: (value) => `$${value}`,
+                  stylingMode: getEditorStylingMode(),
+                  onContentReady: (e) => {
+                    e.component.option('stylingMode', getEditorStylingMode());
+                  },
+                },
+              },
+            ],
           },
-        },
-      }, {
-        name: 'endDate',
-        dataField: 'endDate',
-        editorType: 'dxDateBox',
-        editorOptions: {
-          width: '100%',
-          type: 'datetime',
-          readOnly: true,
-        },
-      }, {
-        dataField: 'price',
-        editorType: 'dxRadioGroup',
-        editorOptions: {
-          dataSource: [5, 10, 15, 20],
-          itemTemplate(itemData) {
-            return `$${itemData}`;
+          'startDateGroup',
+          {
+            name: 'endDateGroup',
+            disabled: true,
           },
+        ],
+      },
+      popup: {
+        maxWidth: 440,
+        onOptionChanged: (e) => {
+          if (e.fullName === 'toolbarItems' && e.value) {
+            e.value.forEach((item, index) => {
+              if (item.shortcut === 'done' || item.shortcut === 'cancel') {
+                e.component.option(`toolbarItems[${index}].toolbar`, 'bottom');
+              }
+            });
+          }
         },
       },
-      ]);
     },
   }).dxScheduler('instance');
 
@@ -112,20 +122,55 @@ $(() => {
       .toArray()[0];
   }
 
-  function getTooltipTemplate(movieData) {
-    return $(`${"<div class='movie-tooltip'>"
-                    + "<img src='"}${movieData.image}' />`
-                    + '<div class=\'movie-info\'>'
-                        + `<div class='movie-title'>${
-                          movieData.text} (${movieData.year})`
-                        + '</div>'
-                        + '<div>'
-                            + `Director: ${movieData.director
-                            }</div>`
-                        + '<div>'
-                            + `Duration: ${movieData.duration} minutes`
-                        + '</div>'
-                    + '</div>'
-                + '</div>');
+  function updateEndDate(form, movie) {
+    const { startDate } = form.option('formData');
+    const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
+
+    form.updateData('endDate', newEndDate);
+  }
+
+  function appointmentTemplate(model) {
+    const { movieId, displayStartDate, displayEndDate, price } = model.targetedAppointmentData;
+    const movie = getMovieById(movieId) || {};
+
+    return $(`
+      <div class='movie-preview'>
+        <div class='movie-preview-image'>
+          <img src='${movie.image}' />
+        </div>
+        <div class='movie-details'>
+          <div class='title'>${movie.text}</div>
+          <div>Ticket Price: <b>$${price}</b></div>
+          <div>
+            ${DevExpress.localization.formatDate(displayStartDate, 'shortTime')}
+            - ${DevExpress.localization.formatDate(displayEndDate, 'shortTime')}
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  function movieInfoTemplate(movie) {
+    return $(`
+      <div class='movie-info'>
+        <div class='movie-preview-image'>
+          <img src='${movie.image}' />
+        </div>
+        <div class='movie-details'>
+          <div class='title'>${movie.text} (${movie.year})</div>
+          <div>Director: ${movie.director}</div>
+          <div>Duration: ${movie.duration} minutes</div>
+        </div>
+      </div>
+    `);
+  }
+
+  function updateMovieInfoContainer(movie) {
+    const $movieInfo = movieInfoTemplate(movie);
+    $movieInfoContainer.empty().append($movieInfo);
+  }
+
+  function getEditorStylingMode() {
+    return $('.dx-theme-fluent, .dx-theme-material').length > 0 ? 'filled' : 'outlined';
   }
 });
diff --git a/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css b/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
index 8ea12c48824c..bf977aebaa30 100644
--- a/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Templates/jQuery/styles.css
@@ -1,38 +1,88 @@
+.dx-scheduler-work-space-week .dx-scheduler-date-table {
+  width: 3500px;
+}
+
+.dx-scheduler-timeline-day .dx-scheduler-date-table {
+  width: 3500px;
+}
+
 .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content {
-  padding: 14px;
+  padding: 12px;
 }
 
-.showtime-preview > div:first-child {
-  font-size: 12px;
-  white-space: normal;
+.movie-preview-image {
+  max-height: 80px;
+  max-width: 80px;
+  min-height: 60px;
+  min-width: 60px;
+  border-radius: 2px;
+  overflow: hidden;
 }
 
-.showtime-preview > div:not(:first-child) {
-  font-size: 11px;
+.movie-preview-image img {
+  width: 100%;
+  position: relative;
+  top: -25%;
+  pointer-events: none;
+}
+
+.movie-preview {
+  display: flex;
+  gap: 8px;
+  max-height: 100%;
   white-space: normal;
 }
 
-.movie-tooltip .movie-info {
-  display: inline-block;
-  margin-left: 10px;
-  vertical-align: top;
+.movie-preview > .movie-details {
+  font-size: 12px;
+  color: #242424;
+}
+
+.movie-preview > .movie-details > .title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+
+.movie-info-container {
+  border-radius: 8px;
+  padding-bottom: 8px;
+}
+
+.movie-info {
+  display: flex;
+  gap: 12px;
+}
+
+.dx-theme-material .movie-info {
+  gap: 16px;
+}
+
+.movie-info .movie-preview-image {
+  border: 1px solid var(--dx-color-border);
+}
+
+.movie-info .movie-details {
   text-align: left;
 }
 
-.movie-tooltip img {
-  height: 80px;
-  margin-bottom: 10px;
+.movie-info .movie-details > .title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 8px;
 }
 
-.movie-tooltip .movie-title {
-  font-size: 1.5em;
-  line-height: 40px;
+.dx-scheduler-form-end-date-group.dx-field-item {
+  padding-bottom: 12px;
 }
 
 .long-title h3 {
-  font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
   margin-bottom: 20px;
 }
+
+.dx-scheduler-appointment::before {
+  opacity: 0.26 !important;
+}
diff --git a/apps/demos/images/movies/AStartIsBorn.jpg b/apps/demos/images/movies/AStartIsBorn.jpg
index 2b3218e70df7..1922c1ed83b0 100644
Binary files a/apps/demos/images/movies/AStartIsBorn.jpg and b/apps/demos/images/movies/AStartIsBorn.jpg differ
diff --git a/apps/demos/images/movies/CityLights.jpg b/apps/demos/images/movies/CityLights.jpg
index 29087808591c..a723f5135b35 100644
Binary files a/apps/demos/images/movies/CityLights.jpg and b/apps/demos/images/movies/CityLights.jpg differ
diff --git a/apps/demos/images/movies/HisGirlFriday.jpg b/apps/demos/images/movies/HisGirlFriday.jpg
index 03852f76e7a5..86993ed80059 100644
Binary files a/apps/demos/images/movies/HisGirlFriday.jpg and b/apps/demos/images/movies/HisGirlFriday.jpg differ
diff --git a/apps/demos/images/movies/ItsAWonderfulLife.jpg b/apps/demos/images/movies/ItsAWonderfulLife.jpg
index 1946afee3a84..d208541cea4f 100644
Binary files a/apps/demos/images/movies/ItsAWonderfulLife.jpg and b/apps/demos/images/movies/ItsAWonderfulLife.jpg differ
diff --git a/apps/demos/images/movies/ScreamingSkull.jpg b/apps/demos/images/movies/ScreamingSkull.jpg
index cc8984566adf..bad64259bec5 100644
Binary files a/apps/demos/images/movies/ScreamingSkull.jpg and b/apps/demos/images/movies/ScreamingSkull.jpg differ
diff --git a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png
index d2264ef7e9d4..0a7d7d807b65 100644
Binary files a/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-CurrentTimeIndicator (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Templates (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-Templates (fluent.blue.light).png
index d80e16034160..dab5274849b5 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Templates (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Templates (fluent.blue.light).png differ
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 5b39e7bee064..14368c76ffe2 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
@@ -111,16 +111,16 @@ const SUBJECT_GROUP_NAME = 'subjectGroup';
 const REPEAT_GROUP_NAME = 'repeatGroup';
 const DESCRIPTION_GROUP_NAME = 'descriptionGroup';
 
-const START_DATE_EDITOR_NAME = 'startDate';
-const START_TIME_EDITOR_NAME = 'startTime';
-const END_DATE_EDITOR_NAME = 'endDate';
-const END_TIME_EDITOR_NAME = 'endTime';
-const REPEAT_EDITOR_NAME = 'repeat';
-const ALL_DAY_EDITOR_NAME = 'allDay';
-const SUBJECT_EDITOR_NAME = 'subject';
-const DESCRIPTION_EDITOR_NAME = 'description';
-const START_DATE_TIMEZONE_EDITOR_NAME = 'startDateTimeZone';
-const END_DATE_TIMEZONE_EDITOR_NAME = 'endDateTimeZone';
+const START_DATE_EDITOR_NAME = 'startDateEditor';
+const START_TIME_EDITOR_NAME = 'startTimeEditor';
+const END_DATE_EDITOR_NAME = 'endDateEditor';
+const END_TIME_EDITOR_NAME = 'endTimeEditor';
+const REPEAT_EDITOR_NAME = 'repeatEditor';
+const ALL_DAY_EDITOR_NAME = 'allDayEditor';
+const SUBJECT_EDITOR_NAME = 'subjectEditor';
+const DESCRIPTION_EDITOR_NAME = 'descriptionEditor';
+const START_DATE_TIMEZONE_EDITOR_NAME = 'startDateTimeZoneEditor';
+const END_DATE_TIMEZONE_EDITOR_NAME = 'endDateTimeZoneEditor';
 
 const SUBJECT_ICON_NAME = 'subjectIcon';
 const DATE_ICON_NAME = 'dateIcon';
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts
index 46f07f2bfa78..bd6ab39c85e9 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_popup.ts
@@ -155,7 +155,6 @@ export class AppointmentPopup {
       if (canceled) {
         e.cancel = true;
       } else {
-        this.updateToolbarForMainGroup();
         this.updatePopupFullScreenMode();
       }
     });
@@ -181,8 +180,6 @@ export class AppointmentPopup {
   }
 
   _updateForm(): void {
-    this.form.showMainGroup(false);
-
     const rawAppointment = this.state.appointment.data;
     const appointmentAdapter = this._createAppointmentAdapter(rawAppointment)
       .clone()
@@ -192,6 +189,8 @@ export class AppointmentPopup {
 
     this.form.formData = formData;
     this.form.readOnly = this._isReadOnly(appointmentAdapter);
+
+    this.form.showMainGroup(false);
   }
 
   _createFormData(appointmentAdapter: AppointmentAdapter): Record<string, any> {