Scheduler: Update Appointment Display

packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss

@@ -781,3 +781,21 @@ $scheduler-appointment-form-label-padding: 20px;
     }
   }
 }
+
+.dx-scheduler-work-space-day,
+.dx-scheduler-work-space-week,
+.dx-scheduler-work-space-work-week {
+  .dx-scheduler-appointment-10min {
+    .dx-scheduler-appointment-title {
+      font-size: 8px;
+      line-height: 12px;
+    }
+  }
+
+  .dx-scheduler-appointment-15min {
+    .dx-scheduler-appointment-title {
+      font-size: 12px;
+      line-height: 18px;
+    }
+  }
+}

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -198,6 +198,66 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   .dx-scheduler-date-table-row:nth-child(even) .dx-scheduler-date-table-cell {
     border-top-style: dashed;
   }
+
+  .dx-scheduler-appointment-10min,
+  .dx-scheduler-appointment-15min,
+  .dx-scheduler-appointment-20min {
+    .dx-scheduler-appointment-content {
+      padding: $fluent-scheduler-appointment-short-content-padding;
+    }
+  }
+
+  .dx-scheduler-appointment-15min {
+    &.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+      padding-right: $fluent-scheduler-appointment-15min-recurrence-padding-right;
+    }
+
+    .dx-scheduler-appointment-recurrence-icon {
+      top: unset;
+      bottom: $fluent-scheduler-appointment-15min-icon-bottom;
+      right: $fluent-scheduler-appointment-15min-icon-right;
+      font-size: $fluent-scheduler-appointment-15min-icon-font-size;
+    }
+  }
+
+  .dx-scheduler-appointment-20min {
+    .dx-scheduler-appointment-title {
+      line-height: $fluent-scheduler-appointment-20min-title-line-height;
+    }
+  }
+
+  @if $size == "default" {
+    .dx-scheduler-appointment-10min {
+      &.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+        padding-right: $fluent-scheduler-appointment-10min-recurrence-padding-right;
+      }
+
+      .dx-scheduler-appointment-recurrence-icon {
+        top: $fluent-scheduler-appointment-10min-icon-top;
+        right: $fluent-scheduler-appointment-10min-icon-right;
+        font-size: $fluent-scheduler-appointment-10min-icon-font-size;
+      }
+    }
+  }
+
+  @if $size == "compact" {
+    .dx-scheduler-appointment-15min {
+      .dx-scheduler-appointment-title {
+        line-height: $fluent-scheduler-appointment-15min-title-line-height;
+      }
+    }
+
+    .dx-scheduler-appointment-20min {
+      .dx-scheduler-appointment-content {
+        padding-right: $fluent-scheduler-appointment-20min-recurrence-padding-right;
+      }
+
+      .dx-scheduler-appointment-recurrence-icon {
+        top: $fluent-scheduler-appointment-20min-icon-top;
+        right: $fluent-scheduler-appointment-20min-icon-right;
+      }
+    }
+  }
 }
 
 .dx-scheduler-header-panel {
@@ -974,3 +1034,4 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
 .dx-scheduler-header-panel-empty-cell {
   margin-top: 0;
 }
+

packages/devextreme-scss/scss/widgets/fluent/scheduler/_sizes.scss

@@ -38,6 +38,21 @@ $fluent-scheduler-days-of-week-button-size: null !default;
 $fluent-scheduler-days-of-week-buttons-gap: null !default;
 $fluent-scheduler-recurrence-end-item-height: null !default;
 
+$fluent-scheduler-appointment-short-content-padding: null !default;
+$fluent-scheduler-appointment-10min-recurrence-padding-right: null !default;
+$fluent-scheduler-appointment-10min-icon-font-size: null !default;
+$fluent-scheduler-appointment-10min-icon-top: null !default;
+$fluent-scheduler-appointment-10min-icon-right: null !default;
+$fluent-scheduler-appointment-15min-recurrence-padding-right: null !default;
+$fluent-scheduler-appointment-15min-title-line-height: null !default;
+$fluent-scheduler-appointment-15min-icon-font-size: null !default;
+$fluent-scheduler-appointment-15min-icon-bottom: null !default;
+$fluent-scheduler-appointment-15min-icon-right: null !default;
+$fluent-scheduler-appointment-20min-icon-top: null !default;
+$fluent-scheduler-appointment-20min-recurrence-padding-right: null !default;
+$fluent-scheduler-appointment-20min-icon-right: null !default;
+$fluent-scheduler-appointment-20min-title-line-height: null !default;
+
 $scheduler-left-column-width: 65px !default;
 $fluent-scheduler-timeline-date-table-cell-height: 50px !default;
 
@@ -120,6 +135,20 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-recurrence-end-item-height: 32px !default;
 
   $agenda-appointment-title-font-size: 14px;
+
+  $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default;
+
+  $fluent-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
+  $fluent-scheduler-appointment-10min-icon-font-size: 12px !default;
+  $fluent-scheduler-appointment-10min-icon-top: 0 !default;
+  $fluent-scheduler-appointment-10min-icon-right: 2px !default;
+
+  $fluent-scheduler-appointment-15min-recurrence-padding-right: 14px !default;
+  $fluent-scheduler-appointment-15min-icon-font-size: 12px !default;
+  $fluent-scheduler-appointment-15min-icon-bottom: 2px !default;
+  $fluent-scheduler-appointment-15min-icon-right: 2px !default;
+
+  $fluent-scheduler-appointment-20min-title-line-height: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -168,4 +197,16 @@ $header-panel-time-cell-padding: null !default;
   $fluent-scheduler-recurrence-end-item-height: 22px !default;
 
   $agenda-appointment-title-font-size: 13px;
+
+  $fluent-scheduler-appointment-short-content-padding: 0 8px 0 12px !default;
+
+  $fluent-scheduler-appointment-15min-recurrence-padding-right: 16px !default;
+  $fluent-scheduler-appointment-15min-icon-font-size: 12px !default;
+  $fluent-scheduler-appointment-15min-title-line-height: 12px !default;
+  $fluent-scheduler-appointment-15min-icon-bottom: 0 !default;
+
+  $fluent-scheduler-appointment-20min-recurrence-padding-right: 20px !default;
+  $fluent-scheduler-appointment-20min-icon-top: 0 !default;
+  $fluent-scheduler-appointment-20min-icon-right: 5px !default;
+  $fluent-scheduler-appointment-20min-title-line-height: 18px !default;
 }

packages/devextreme-scss/scss/widgets/generic/scheduler/_index.scss

@@ -591,3 +591,62 @@ $generic-scheduler-agenda-group-header-padding: $generic-scheduler-agenda-time-c
     background: $base-bg;
   }
 }
+
+.dx-scheduler-work-space-day,
+.dx-scheduler-work-space-week,
+.dx-scheduler-work-space-work-week {
+  .dx-scheduler-appointment-10min,
+  .dx-scheduler-appointment-15min {
+    .dx-scheduler-appointment-content {
+      padding: $generic-scheduler-appointment-short-content-padding;
+    }
+  }
+
+  .dx-scheduler-appointment-15min {
+    &.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+      padding-right: $generic-scheduler-appointment-15min-recurrence-padding-right;
+    }
+
+    .dx-scheduler-appointment-title {
+      line-height: $generic-scheduler-appointment-15min-title-line-height;
+    }
+
+    .dx-scheduler-appointment-recurrence-icon {
+      font-size: $generic-scheduler-appointment-15min-icon-font-size;
+      top: $generic-scheduler-appointment-15min-icon-top;
+      right: $generic-scheduler-appointment-15min-icon-right;
+    }
+  }
+
+  @if $size == "default" {
+    .dx-scheduler-appointment-10min {
+      &.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+        padding-right: $generic-scheduler-appointment-10min-recurrence-padding-right;
+      }
+
+      .dx-scheduler-appointment-title {
+        line-height: $generic-scheduler-appointment-10min-title-line-height;
+      }
+
+      .dx-scheduler-appointment-recurrence-icon {
+        font-size: $generic-scheduler-appointment-10min-icon-font-size;
+        top: $generic-scheduler-appointment-10min-icon-top;
+        right: $generic-scheduler-appointment-10min-icon-right;
+      }
+    }
+
+    .dx-scheduler-appointment-20min {
+      .dx-scheduler-appointment-title {
+        line-height: $generic-scheduler-appointment-20min-title-line-height;
+      }
+    }
+  }
+
+  @if $size == "compact" {
+    .dx-scheduler-appointment-10min {
+      .dx-scheduler-appointment-content {
+        display: none;
+      }
+    }
+  }
+}

packages/devextreme-scss/scss/widgets/generic/scheduler/_sizes.scss

@@ -43,6 +43,19 @@ $generic-scheduler-days-of-week-button-size: null !default;
 $generic-scheduler-days-of-week-buttons-gap: null !default;
 $generic-scheduler-recurrence-end-item-height: null !default;
 
+$generic-scheduler-appointment-short-content-padding: null !default;
+$generic-scheduler-appointment-10min-recurrence-padding-right: null !default;
+$generic-scheduler-appointment-10min-title-line-height: null !default;
+$generic-scheduler-appointment-10min-icon-font-size: null !default;
+$generic-scheduler-appointment-10min-icon-top: null !default;
+$generic-scheduler-appointment-10min-icon-right: null !default;
+$generic-scheduler-appointment-15min-recurrence-padding-right: null !default;
+$generic-scheduler-appointment-15min-title-line-height: null !default;
+$generic-scheduler-appointment-15min-icon-font-size: null !default;
+$generic-scheduler-appointment-15min-icon-top: null !default;
+$generic-scheduler-appointment-15min-icon-right: null !default;
+$generic-scheduler-appointment-20min-title-line-height: null !default;
+
 $agenda-appointment-title-font-size: null !default;
 $scheduler-timeline-cell-height: null !default;
 
@@ -97,6 +110,22 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $agenda-appointment-title-font-size: 16px;
 
   $scheduler-timeline-cell-height: 78px !default;
+
+  $generic-scheduler-appointment-short-content-padding: 0 7px !default;
+
+  $generic-scheduler-appointment-10min-recurrence-padding-right: 16px !default;
+  $generic-scheduler-appointment-10min-title-line-height: 16px !default;
+  $generic-scheduler-appointment-10min-icon-font-size: 14px !default;
+  $generic-scheduler-appointment-10min-icon-top: 2px !default;
+  $generic-scheduler-appointment-10min-icon-right: 2px !default;
+
+  $generic-scheduler-appointment-15min-recurrence-padding-right: 20px !default;
+  $generic-scheduler-appointment-15min-title-line-height: 24px !default;
+  $generic-scheduler-appointment-15min-icon-font-size: 18px !default;
+  $generic-scheduler-appointment-15min-icon-top: 4px !default;
+  $generic-scheduler-appointment-15min-icon-right: 2px !default;
+
+  $generic-scheduler-appointment-20min-title-line-height: 24px !default;
 }
 
 @else if $size == "compact" {
@@ -147,4 +176,12 @@ $generic-scheduler-group-header-agenda-font-size: 14px !default;
   $agenda-appointment-title-font-size: 16px;
 
   $scheduler-timeline-cell-height: 50px !default;
+
+  $generic-scheduler-appointment-short-content-padding: 0 7px !default;
+
+  $generic-scheduler-appointment-15min-recurrence-padding-right: 16px !default;
+  $generic-scheduler-appointment-15min-title-line-height: 16px !default;
+  $generic-scheduler-appointment-15min-icon-font-size: 14px !default;
+  $generic-scheduler-appointment-15min-icon-top: 2px !default;
+  $generic-scheduler-appointment-15min-icon-right: 2px !default;
 }

packages/devextreme-scss/scss/widgets/material/scheduler/_index.scss

@@ -171,6 +171,62 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
     height: 2px;
   }
+
+  .dx-scheduler-appointment-10min,
+  .dx-scheduler-appointment-15min {
+    .dx-scheduler-appointment-content {
+      padding: $material-scheduler-appointment-short-content-padding;
+    }
+  }
+
+  .dx-scheduler-appointment-15min {
+    &.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+      padding-right: $material-scheduler-appointment-15min-recurrence-padding-right;
+    }
+
+    .dx-scheduler-appointment-recurrence-icon {
+      font-size: $material-scheduler-appointment-15min-icon-font-size;
+      top: $material-scheduler-appointment-15min-icon-top;
+      right: $material-scheduler-appointment-15min-icon-right;
+    }
+  }
+
+  @if $size == "default" {
+    .dx-scheduler-appointment-10min {
+      &.dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
+        padding-right: $material-scheduler-appointment-10min-recurrence-padding-right;
+      }
+
+      .dx-scheduler-appointment-title {
+        line-height: $material-scheduler-appointment-10min-title-line-height;
+      }
+
+      .dx-scheduler-appointment-recurrence-icon {
+        font-size: $material-scheduler-appointment-10min-icon-font-size;
+        top: $material-scheduler-appointment-10min-icon-top;
+        right: $material-scheduler-appointment-10min-icon-right;
+      }
+    }
+  }
+
+  @if $size == "compact" {
+    .dx-scheduler-appointment-15min {
+      .dx-scheduler-appointment-title {
+        font-size: $material-scheduler-appointment-15min-title-font-size;
+        line-height: $material-scheduler-appointment-15min-title-line-height;
+      }
+    }
+
+    .dx-scheduler-appointment-20min {
+      .dx-scheduler-appointment-title {
+        line-height: $material-scheduler-appointment-20min-title-line-height;
+      }
+
+      .dx-scheduler-appointment-recurrence-icon {
+        top: $material-scheduler-appointment-20min-icon-top;
+      }
+    }
+  }
 }
 
 .dx-scheduler-header-panel {

packages/devextreme-scss/scss/widgets/material/scheduler/_sizes.scss

@@ -25,6 +25,21 @@ $material-tooltip-marker-dimension: null !default;
 $material-scheduler-appointment-tooltip-title-margin-top: null !default;
 $material-scheduler-appointment-tooltip-remove-padding-top: null !default;
 
+$material-scheduler-appointment-short-content-padding: null !default;
+$material-scheduler-appointment-10min-recurrence-padding-right: null !default;
+$material-scheduler-appointment-10min-title-line-height: null !default;
+$material-scheduler-appointment-10min-icon-font-size: null !default;
+$material-scheduler-appointment-10min-icon-top: null !default;
+$material-scheduler-appointment-10min-icon-right: null !default;
+$material-scheduler-appointment-15min-recurrence-padding-right: null !default;
+$material-scheduler-appointment-15min-title-font-size: null !default;
+$material-scheduler-appointment-15min-title-line-height: null !default;
+$material-scheduler-appointment-15min-icon-font-size: null !default;
+$material-scheduler-appointment-15min-icon-top: null !default;
+$material-scheduler-appointment-15min-icon-right: null !default;
+$material-scheduler-appointment-20min-title-line-height: null !default;
+$material-scheduler-appointment-20min-icon-top: null !default;
+
 $scheduler-left-column-width: 65px !default;
 $material-scheduler-timeline-date-table-cell-height: 50px !default;
 $material-scheduler-navigator-icon-font-size: $material-base-icon-size;
@@ -116,6 +131,19 @@ $scheduler-timeline-cell-height: 50px !default;
   $material-scheduler-recurrence-end-item-height: 32px !default;
 
   $agenda-appointment-title-font-size: 14px;
+
+  $material-scheduler-appointment-short-content-padding: 0 7px !default;
+
+  $material-scheduler-appointment-10min-recurrence-padding-right: 14px !default;
+  $material-scheduler-appointment-10min-title-line-height: 12px !default;
+  $material-scheduler-appointment-10min-icon-font-size: 12px !default;
+  $material-scheduler-appointment-10min-icon-top: 0 !default;
+  $material-scheduler-appointment-10min-icon-right: 2px !default;
+
+  $material-scheduler-appointment-15min-recurrence-padding-right: 18px !default;
+  $material-scheduler-appointment-15min-icon-font-size: 16px !default;
+  $material-scheduler-appointment-15min-icon-top: 1px !default;
+  $material-scheduler-appointment-15min-icon-right: 2px !default;
 }
 
 @else if $size == "compact" {
@@ -167,4 +195,16 @@ $scheduler-timeline-cell-height: 50px !default;
   $material-scheduler-recurrence-end-item-height: 32px !default;
 
   $agenda-appointment-title-font-size: 13px;
+
+  $material-scheduler-appointment-short-content-padding: 0 7px !default;
+
+  $material-scheduler-appointment-15min-recurrence-padding-right: 14px !default;
+  $material-scheduler-appointment-15min-title-font-size: 8px !default;
+  $material-scheduler-appointment-15min-title-line-height: 14px !default;
+  $material-scheduler-appointment-15min-icon-font-size: 12px !default;
+  $material-scheduler-appointment-15min-icon-top: 1px !default;
+  $material-scheduler-appointment-15min-icon-right: 2px !default;
+
+  $material-scheduler-appointment-20min-title-line-height: 12px !default;
+  $material-scheduler-appointment-20min-icon-top: 0 !default;
 }