@syncfusion/ej2-schedule 24.2.4 → 25.1.35

package/styles/schedule/_layout.scss

@@ -32,6 +32,7 @@
       }
 
       .e-toolbar-items {
+        height: $schedule-tbar-min-height;
 
         &.e-tbar-pos {
           height: $schedule-tbar-min-height;
@@ -173,6 +174,8 @@
         }
 
         .e-toolbar-items {
+          height: $schedule-tbar-bgr-size;
+          
           &.e-tbar-pos {
             height: $schedule-tbar-bgr-size;
             min-height: $schedule-tbar-bgr-size;
@@ -210,6 +213,28 @@
       }
     }
 
+    @media screen and (max-width: 320px) {
+      .e-schedule-toolbar {
+        .e-toolbar-pop {
+          width: 100%;
+          
+          .e-toolbar-item .e-tbar-btn.e-btn {
+            padding-left: 7px;
+          }
+           
+          &.e-rtl {
+            .e-toolbar-item .e-tbar-btn.e-btn {
+              padding-right: 7px;
+            }
+          }
+        }
+
+        .e-tbar-btn .e-tbar-btn-text {
+          font-size: $schedule-device-font-size;
+        }
+      }
+    }
+
     .e-schedule-resource-toolbar {
       background: $schedule-tbar-default-bg;
       border-bottom: $schedule-tbar-border-bottom-size;
@@ -2701,7 +2726,7 @@
         .e-toolbar-item {
           min-height: $schedule-tbar-bgr-items-size;
 
-          &:not(.e-separator) {
+          &:not(.e-separator):not(.e-spacer) {
             min-width: $schedule-tbar-bgr-item-size;
           }
 
@@ -3103,7 +3128,24 @@
       }
     }
   }
+  
+  /*! schedule event window for smaller viewports*/
+  @media screen and (max-width: 320px) {
+    .e-schedule-dialog.e-popup.e-popup-open {
+      max-height: 350px;
+      min-width: 100%;
+    }
 
+    .e-schedule-dialog {
+      .e-all-day-container {
+        padding-bottom: 10px;
+      }
+
+      .e-all-day-time-zone-row {
+        display: block;
+      }
+    }
+  }
   .e-ddl.e-popup {
     .e-resource-template {
       display: flex;
@@ -3787,6 +3829,23 @@
     }
   }
 
+  /*! schedule quick popup for smaller viewports */
+  @media screen and (max-width: 320px) {
+    .e-quick-popup-wrapper {
+      min-width: 100%;
+
+      .e-popup-footer {
+        padding-left: 5px;
+      }
+
+      &.e-rtl {
+        .e-popup-footer {
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+  
   .e-bigger .e-quick-popup-wrapper {
     .e-cell-popup .e-popup-content .e-popup-table .e-subject {
       font-size: 24px;

package/styles/schedule/_material-dark-definition.scss

@@ -148,6 +148,7 @@ $schedule-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-tbar-right-active-items-btn-border: none !default;
 $schedule-device-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-device-tbar-right-items-btn-border: none !default;
+$schedule-device-font-size: 8px !default;
 
 $schedule-content-nrml-font-text-transform: uppercase !default;
 $schedule-header-hover-border-radius: 0% !default;

package/styles/schedule/_material-definition.scss

@@ -145,6 +145,7 @@ $schedule-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-tbar-right-active-items-btn-border: none !default;
 $schedule-device-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-device-tbar-right-items-btn-border: none !default;
+$schedule-device-font-size: 8px !default;
 
 $schedule-content-nrml-font-text-transform: uppercase !default;
 $schedule-header-hover-border-radius: 100% !default;

package/styles/schedule/_material3-definition.scss

@@ -165,6 +165,7 @@ $schedule-tbar-right-items-btn-border-radius: 20px !default;
 $schedule-tbar-right-active-items-btn-border: 1px solid rgba($primary) !default;
 $schedule-device-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-device-tbar-right-items-btn-border: none !default;
+$schedule-device-font-size: 8px !default;
 
 // view definitions
 $schedule-timeline-header-cells-height: 40px !default;
@@ -222,7 +223,7 @@ $schedule-header-day-line-height: 20px !default;
 $schedule-header-day-padding-bottom: 4px !default;
 $schedule-month-header-cells-nrml-height: 34px !default;
 $schedule-month-header-cells-bgr-height: 38px !default;
-$schedule-month-header-cells-padding: 8px !default;
+$schedule-month-header-cells-padding: 3px !default;
 $schedule-allday-cells-height: 0 !default;
 $schedule-work-cells-height: 36px !default;
 $schedule-work-cells-width: 36px !default;

package/styles/schedule/_tailwind-definition.scss

@@ -35,7 +35,7 @@ $schedule-header-cells-height: 60px !default;
 $schedule-header-cells-width: 36px !default;
 $schedule-month-header-cells-nrml-height: 34px !default;
 $schedule-month-header-cells-bgr-height: 38px !default;
-$schedule-month-header-cells-padding: 8px !default;
+$schedule-month-header-cells-padding: 3px !default;
 $schedule-allday-cells-height: 0 !default;
 $schedule-work-cells-height: 36px !default;
 $schedule-work-cells-width: 36px !default;
@@ -150,6 +150,7 @@ $schedule-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-tbar-right-active-items-btn-border: none !default;
 $schedule-device-tbar-right-items-btn-border-radius: 0 !default;
 $schedule-device-tbar-right-items-btn-border: none !default;
+$schedule-device-font-size: 8px !default;
 
 $schedule-content-nrml-font-text-transform: none !default;
 $schedule-header-hover-border-radius: 100% !default;

package/styles/schedule/bootstrap-dark.css

@@ -138,6 +138,10 @@
   color: #fff;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap theme definitions and variables */
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e990";
@@ -323,6 +327,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 43px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 43px;
   min-height: 43px;
@@ -395,6 +402,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 56px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 56px;
   min-height: 56px;
@@ -421,6 +431,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #131313;
   border-bottom: 1px solid #505050;
@@ -2468,8 +2492,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 56px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2789,6 +2813,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3378,6 +3415,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/schedule/bootstrap.css

@@ -133,6 +133,10 @@
   width: 40px;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap theme definitions and variables */
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e990";
@@ -318,6 +322,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 43px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 43px;
   min-height: 43px;
@@ -390,6 +397,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 56px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 56px;
   min-height: 56px;
@@ -416,6 +426,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #f8f8f8;
   border-bottom: 1px solid #ddd;
@@ -2463,8 +2487,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 56px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2784,6 +2808,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3373,6 +3410,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/schedule/bootstrap4.css

@@ -427,6 +427,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 46px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 46px;
   min-height: 46px;
@@ -499,6 +502,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 54px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 54px;
   min-height: 54px;
@@ -525,6 +531,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #f8f9fa;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
@@ -1358,7 +1378,7 @@
   cursor: default;
   font-weight: normal;
   height: 35px;
-  padding: 8px;
+  padding: 3px;
 }
 .e-schedule .e-month-view .e-content-table {
   height: 100%;
@@ -2572,8 +2592,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 54px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2893,6 +2913,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3482,6 +3515,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/schedule/bootstrap5-dark.css

@@ -372,6 +372,9 @@
   font-size: 14px;
   text-transform: none;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 38px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 38px;
   min-height: 38px;
@@ -444,6 +447,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 54px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 54px;
   min-height: 54px;
@@ -470,6 +476,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #282d31;
   border-bottom: 0;
@@ -1303,7 +1323,7 @@
   cursor: default;
   font-weight: normal;
   height: 34px;
-  padding: 8px;
+  padding: 3px;
 }
 .e-schedule .e-month-view .e-content-table {
   height: 100%;
@@ -2517,8 +2537,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 54px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2838,6 +2858,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3427,6 +3460,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/schedule/bootstrap5.css

@@ -372,6 +372,9 @@
   font-size: 14px;
   text-transform: none;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 38px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 38px;
   min-height: 38px;
@@ -444,6 +447,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 54px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 54px;
   min-height: 54px;
@@ -470,6 +476,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #f8f9fa;
   border-bottom: 0;
@@ -1303,7 +1323,7 @@
   cursor: default;
   font-weight: normal;
   height: 34px;
-  padding: 8px;
+  padding: 3px;
 }
 .e-schedule .e-month-view .e-content-table {
   height: 100%;
@@ -2517,8 +2537,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 54px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2838,6 +2858,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3427,6 +3460,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }