DevExpress · sjbur · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025 · Oct 1, 2025
@@ -467,6 +467,31 @@ $scheduler-appointment-form-label-padding: 20px;
     }
 
     .dx-form {
+      position: relative;
+      overflow: hidden;
+
+      .dx-scheduler-form-main-group {
+        transition: transform 0.3s ease-in-out;
+        transform: translateX(0);
+
+        &.dx-scheduler-form-main-hidden {
+          transform: translateX(-100%);
+        }
+      }
+
+      .dx-scheduler-form-recurrence-group {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        transition: transform 0.3s ease-in-out;
+        transform: translateX(100%);
+
+        &:not(.dx-scheduler-form-recurrence-hidden) {
+          transform: translateX(0);
+        }
+      }
+
       /* Icons alignment */
       .dx-scheduler-form-group-with-icon .dx-box-item:has(.dx-scheduler-form-icon) {
         flex: 0 1 auto !important; // stylelint-disable-line declaration-no-important
@@ -475,7 +500,9 @@ $scheduler-appointment-form-label-padding: 20px;
 
       .dx-scheduler-form-date-range-group .dx-box-item:has(.dx-scheduler-form-icon),
       .dx-scheduler-form-description-group .dx-box-item:has(.dx-scheduler-form-icon),
-      .dx-scheduler-form-resources-group .dx-box-item:has(.dx-scheduler-default-resources-icon) {
+      .dx-scheduler-form-resources-group .dx-box-item:has(.dx-scheduler-default-resources-icon),
+      .dx-scheduler-form-recurrence-settings-group .dx-box-item:has(.dx-scheduler-form-icon),
+      .dx-scheduler-form-recurrence-end-group .dx-box-item:has(.dx-scheduler-form-icon) {
         align-items: start;
       }
 
@@ -502,19 +529,107 @@ $scheduler-appointment-form-label-padding: 20px;
       }
 
       .dx-scheduler-form-start-date-group .dx-item,
-      .dx-scheduler-form-end-date-group .dx-item {
+      .dx-scheduler-form-end-date-group .dx-item,
+      .dx-scheduler-form-recurrence-settings-group .dx-item,
+      .dx-scheduler-form-day-of-month-group .dx-item,
+      .dx-scheduler-form-day-of-year-group .dx-item {
         align-items: end;
 
         .dx-datebox input.dx-texteditor-input {
           padding-inline-end: 0;
         }
       }
 
+      /* Recurrence End section - Grid layout with equal heights */
+      .dx-scheduler-form-recurrence-end-group {
+        .dx-field-item-label {
+          display: flex;
+          align-items: center;
+        }
+
+        > .dx-box-item {
+          height: 100%;
+          margin: 0;
+          padding: 0;
+        }
+      }
+
+      // RadioGroup column
+      .dx-scheduler-form-recurrence-end-radio {
+        .dx-field-item-content {
+          height: 100%;
+          padding: 0;
+        }
+
+        .dx-radiogroup {
+          padding: 0;
+          height: 100%;
+        }
+
+        .dx-item.dx-radiobutton {
+          margin: 8px 0 0 0;
+          padding: 0;
+          height: 32px !important; // stylelint-disable-line declaration-no-important
-        .dx-item.dx-radiobutton {
-          margin: 8px 0 0 0;
-          padding: 0;
-          height: 32px !important; // stylelint-disable-line declaration-no-important
+        // Increase specificity to avoid !important
+        .dx-scheduler-form-recurrence-end-radio .dx-item.dx-radiobutton {
+          margin: 8px 0 0 0;
+          padding: 0;
+          height: 32px;
-        .dx-item.dx-radiobutton {
-          margin: 8px 0 0 0;
-          padding: 0;
-          height: 32px !important; // stylelint-disable-line declaration-no-important
+        // Increase specificity to avoid !important
+        .dx-scheduler-form-recurrence-end-radio .dx-item.dx-radiobutton {
+          margin: 8px 0 0 0;
+          padding: 0;
+          height: 32px;
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
+
-          height: 32px !important; // stylelint-disable-line declaration-no-important
-
-          &:first-child {
-            margin-top: 0;
-          }
-        }
+        }
+
+        // Increase specificity to override other height rules
+        .dx-scheduler-form-recurrence-end-radio .dx-item.dx-radiobutton {
+          height: 32px;
+        }
+
+        .dx-item.dx-radiobutton:first-child {
+          margin-top: 0;
+        }
-          height: 32px !important; // stylelint-disable-line declaration-no-important
-
-          &:first-child {
-            margin-top: 0;
-          }
-        }
+        }
+
+        // Increase specificity to override other height rules
+        .dx-scheduler-form-recurrence-end-radio .dx-item.dx-radiobutton {
+          height: 32px;
+        }
+
+        .dx-item.dx-radiobutton:first-child {
+          margin-top: 0;
+        }
+        .dx-radiogroup-item {
+          align-items: center;
+        }
+      }
+
-        .dx-item.dx-radiobutton {
-          margin: 8px 0 0 0;
-          padding: 0;
-          height: 32px !important; // stylelint-disable-line declaration-no-important
-
-          &:first-child {
-            margin-top: 0;
-          }
-        }
-
-        .dx-radiogroup-item {
-          align-items: center;
-        }
-      }
+        // moved .dx-item.dx-radiobutton styles outside to increase specificity
+
+
+
+
+
+
+
+
+
+        .dx-radiogroup-item {
+          align-items: center;
+        }
+      }
+
+// Increased specificity to avoid !important
+.dx-scheduler-form-recurrence-end-radio .dx-item.dx-radiobutton {
+  margin: 8px 0 0 0;
+  padding: 0;
+  height: 32px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
-        .dx-item.dx-radiobutton {
-          margin: 8px 0 0 0;
-          padding: 0;
-          height: 32px !important; // stylelint-disable-line declaration-no-important
-
-          &:first-child {
-            margin-top: 0;
-          }
-        }
-
-        .dx-radiogroup-item {
-          align-items: center;
-        }
-      }
+        // moved .dx-item.dx-radiobutton styles outside to increase specificity
+
+
+
+
+
+
+
+
+
+        .dx-radiogroup-item {
+          align-items: center;
+        }
+      }
+
+// Increased specificity to avoid !important
+.dx-scheduler-form-recurrence-end-radio .dx-item.dx-radiobutton {
+  margin: 8px 0 0 0;
+  padding: 0;
+  height: 32px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+      // Inputs column
+      .dx-scheduler-form-recurrence-end-editors {
+        .dx-box-item-content {
+          height: 100%;
+          padding: 0;
+        }
+
+        .dx-box-item {
+          height: 32px;
+          margin: 0;
+          padding: 0;
+
+          &:not(:first-child) {
+            margin-top: 8px;
+          }
+
+          .dx-box-item-content {
+            height: 32px;
+            padding: 0;
+          }
+        }
+
+        .dx-field-item,
+        .dx-empty-item {
+          height: 32px;
+          margin: 0;
+          padding: 0 !important; // stylelint-disable-line declaration-no-important
+        }
+
+        .dx-field-item-content {
+          padding: 0 !important; // stylelint-disable-line declaration-no-important
-        .dx-field-item,
-        .dx-empty-item {
-          height: 32px;
-          margin: 0;
-          padding: 0 !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .dx-field-item-content {
-          padding: 0 !important; // stylelint-disable-line declaration-no-important
+        // Increase specificity by combining with parent class
+        .dx-scheduler-form-recurrence-end-inputs .dx-field-item,
+        .dx-scheduler-form-recurrence-end-inputs .dx-empty-item {
+          height: 32px;
+          margin: 0;
+          padding: 0;
+        }
+
+        .dx-scheduler-form-recurrence-end-inputs .dx-field-item-content {
+          padding: 0;
-        .dx-field-item,
-        .dx-empty-item {
-          height: 32px;
-          margin: 0;
-          padding: 0 !important; // stylelint-disable-line declaration-no-important
-        }
-
-        .dx-field-item-content {
-          padding: 0 !important; // stylelint-disable-line declaration-no-important
+        // Increase specificity by combining with parent class
+        .dx-scheduler-form-recurrence-end-inputs .dx-field-item,
+        .dx-scheduler-form-recurrence-end-inputs .dx-empty-item {
+          height: 32px;
+          margin: 0;
+          padding: 0;
+        }
+
+        .dx-scheduler-form-recurrence-end-inputs .dx-field-item-content {
+          padding: 0;
+          height: 32px;
+        }
+
+        .dx-texteditor,
+        .dx-numberbox {
+          height: 32px;
+        }
+      }
+
       /* Repeat editor separator */
       .dx-scheduler-form-repeat-editor .dx-scheduler-form-recurrence-settings-button {
         overflow: visible;
         position: relative;
 
+        .dx-icon {
+          color: $scheduler-workspace-accent-color;
+        }
+
         &::after {
           content: '';
           position: absolute;
@@ -525,6 +640,21 @@ $scheduler-appointment-form-label-padding: 20px;
           background-color: $scheduler-base-border-color;
         }
       }
+
+      /* Recurrence Day Buttons */
+      .dx-scheduler-days-of-week-buttons {
+        display: flex;
+        gap: 8px;
+
+        .dx-button {
+          border-radius: 50%;
+          min-width: 32px;
+
+          .dx-button-content {
+            padding: 0;
+          }
+        }
+      }
     }
   }
 

@@ -65,7 +65,7 @@ $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
 $scheduler-form-subject-icon-color: null !default;
-$scheduler-form-icon-color: $base-text-color !default;
+$scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;
 $scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;

@@ -4,6 +4,7 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../form/sizes" as *;
 @use '../../base/scheduler/layout/header' as *;
 @use "../../base/mixins" as *;
 @use "../../base/icons" as *;
@@ -625,10 +626,21 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
     }
 
     .dx-scheduler-form-description-group .dx-scheduler-form-icon,
-    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon {
+    .dx-scheduler-form-resources-group .dx-scheduler-default-resources-icon,
+    .dx-scheduler-form-recurrence-settings-group .dx-scheduler-form-icon {
       margin-top: $fluent-scheduler-appointment-popup-description-icon-margin-top;
     }
 
+    .dx-scheduler-form-recurrence-end-group .dx-texteditor-input {
+      padding-left: 8px;
+      padding-right: 8px;
+      padding-inline-end: 8px !important; // stylelint-disable-line declaration-no-important
+    }
+
+    .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
+      height: $fluent-scheduler-appointment-popup-all-day-item-height - $fluent-form-layout-manager-vertical-padding;
+    }
+
     .dx-field-item:not(.dx-first-col) {
       padding-inline-start: $fluent-scheduler-appointment-popup-item-padding-horizontal;
     }

@@ -67,7 +67,7 @@ $scheduler-current-time-cell-color: $base-accent !default;
 */
 $scheduler-time-indicator-color: null !default;
 $scheduler-dd-appointment-hover-text-color: null !default;
-$scheduler-form-icon-color: $base-text-color !default;
+$scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-form-subject-icon-color: null !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: null !default;

@@ -278,6 +278,10 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
       margin-top: $generic-scheduler-appointment-popup-description-icon-margin-top;
     }
 
+    .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
+      height: $generic-scheduler-appointment-popup-all-day-item-height;
+    }
+
     .dx-field-item:not(.dx-first-col) {
       padding-inline-start: $generic-scheduler-appointment-popup-item-padding-horizontal;
     }

@@ -63,7 +63,7 @@ $scheduler-workspace-accent-color: $base-accent !default;
 $scheduler-current-time-cell-color: $base-accent !default;
 $scheduler-time-indicator-color: #eb5757 !default;
 $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
-$scheduler-form-icon-color: $base-label-color !default;
+$scheduler-form-icon-color: $base-icon-color !default;
 $scheduler-form-subject-icon-color: color.change($base-accent, $alpha: 0.24) !default;
 $scheduler-popup-title-bg: $scheduler-workspace-background-color !default;
 $scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.54) !default;

@@ -582,6 +582,14 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
       margin-top: $material-scheduler-appointment-popup-description-icon-margin-top;
     }
 
+    .dx-scheduler-form-recurrence-end-group .dx-field-item-label {
+      padding-left: 0;
+
+      @if $size == "compact" {
+        height: $material-scheduler-appointment-popup-icon-container-height;
+      }
+    }
+
     .dx-field-item:not(.dx-first-col) {
       padding-inline-start: $material-scheduler-appointment-popup-item-padding-horizontal;
     }