diff --git a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
index e059edd6384e..6102663047c4 100644
--- a/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss
@@ -39,6 +39,8 @@ $scheduler-appointment-popup-repeat-end-item-vertical-margin: null !default;
 // Agenda
 $agenda-appointment-recurrence-icon-color: null !default;
 
+$button-normal-text-active-bg: null !default;
+
 @use "./layout/header" as *;
 @use "./mixins" as *;
 @use "../mixins" as *;
@@ -477,7 +479,7 @@ $scheduler-appointment-form-label-padding: 20px;
 
       .dx-scheduler-form-main-group {
         width: 100%;
-        transition: transform 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
         transform: translateX(0);
         position: relative;
 
@@ -485,12 +487,14 @@ $scheduler-appointment-form-label-padding: 20px;
           transform: translateX(-110%);
           position: absolute;
           top: 0;
+          visibility: hidden;
+          opacity: 0;
         }
       }
 
       .dx-scheduler-form-recurrence-group {
         width: 100%;
-        transition: transform 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
         transform: translateX(0);
         position: relative;
 
@@ -498,6 +502,8 @@ $scheduler-appointment-form-label-padding: 20px;
           transform: translateX(110%);
           position: absolute;
           top: 0;
+          visibility: hidden;
+          opacity: 0;
         }
       }
 
@@ -582,6 +588,10 @@ $scheduler-appointment-form-label-padding: 20px;
         .dx-icon {
           color: $scheduler-workspace-accent-color;
         }
+
+        &.dx-state-focused {
+          background-color: $button-normal-text-active-bg;
+        }
       }
 
       .dx-scheduler-form-repeat-editor .dx-selectbox.dx-state-readonly .dx-scheduler-form-recurrence-settings-button {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
index 27996ab2002a..a0191ddc1499 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss
@@ -10,6 +10,7 @@
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icon_fonts" as *;
+@use "../button/colors" as *;
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
@@ -46,7 +47,8 @@
 
   $scheduler-appointment-popup-icon-margin-top: $fluent-scheduler-appointment-popup-icon-margin-top,
   $scheduler-appointment-popup-repeat-end-item-height: $fluent-scheduler-appointment-popup-repeat-end-item-height,
-  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin
+  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $fluent-radio-button-vertical-margin,
+  $button-normal-text-active-bg: $button-normal-text-active-bg
 );
 @use "../button/colors" as *;
 @use "../button/mixins" as *;
diff --git a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
index 617537fb9631..143af0bf2e12 100644
--- a/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss
@@ -8,6 +8,7 @@
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icon_fonts" as *;
+@use "../button/colors" as *;
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
@@ -43,9 +44,9 @@
 
   $scheduler-appointment-popup-icon-margin-top: $generic-scheduler-appointment-popup-icon-margin-top,
   $scheduler-appointment-popup-repeat-end-item-height: $generic-scheduler-appointment-popup-repeat-end-item-height,
-  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $generic-scheduler-appointment-popup-repeat-end-radio-margin-top
+  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $generic-scheduler-appointment-popup-repeat-end-radio-margin-top,
+  $button-normal-text-active-bg: $button-normal-text-bg-active
 );
-@use "../button/colors" as *;
 @use "../tooltip/colors" as *;
 @use "../typography/sizes" as *;
 
diff --git a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
index 954acbbfb214..f9c8e5b74e9c 100644
--- a/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss
@@ -9,6 +9,7 @@
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icon_fonts" as *;
+@use "../button/colors" as *;
 @use "../../base/scheduler" as baseScheduler with (
   $scheduler-tooltip-appointment-text-color: $scheduler-tooltip-appointment-text-color,
   $scheduler-appointment-overlay-bg: $scheduler-appointment-overlay-bg,
@@ -44,9 +45,9 @@
 
   $scheduler-appointment-popup-icon-margin-top: $material-scheduler-appointment-popup-icon-margin-top,
   $scheduler-appointment-popup-repeat-end-item-height: $material-scheduler-appointment-popup-repeat-end-item-height,
-  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $material-radio-button-vertical-margin
+  $scheduler-appointment-popup-repeat-end-item-vertical-margin: $material-radio-button-vertical-margin,
+  $button-normal-text-active-bg: $button-normal-text-active-bg
 );
-@use "../button/colors" as *;
 @use "../button/mixins" as *;
 @use "../tooltip/colors" as *;
 
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 3ca4997e04ef..4406684e0c5f 100644
--- a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
+++ b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
@@ -1,4 +1,5 @@
 import type { TextEditorButton } from '@js/common';
+import { name as CLICK_EVENT_NAME } from '@js/common/core/events/click';
 import messageLocalization from '@js/common/core/localization/message';
 import { DataSource } from '@js/common/data';
 import type { dxElementWrapper } from '@js/core/renderer';
@@ -677,7 +678,7 @@ export class AppointmentForm {
                 this.dxForm.updateData(recurrenceRuleExpr, recurrenceRule.toString());
               }
 
-              if (e.value !== repeatNeverValue && e.event) {
+              if (e.value !== repeatNeverValue && e.event?.type === CLICK_EVENT_NAME) {
                 this.showRecurrenceGroup();
               }