@syncfusion/ej2-angular-schedule 23.2.7 → 24.1.41

package/src/schedule/toolbaritems.directive.d.ts

@@ -0,0 +1,177 @@
+import { ViewContainerRef } from '@angular/core';
+import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
+/**
+ * `e-toolbaritems` directive represent a custom toolbar items of the Schedule.
+ * It must be contained in a Schedule component(`ejs-schedule`).
+ * ```html
+ * <ejs-schedule>
+ *   <e-toolbaritems>
+ *    <e-toolbaritem name='Today'></<e-toolbaritem>
+ *    <e-toolbaritem name='DateRangeText'></e-toolbaritem>
+ *    <e-toolbaritem prefixIcon='e-icons e-cut' text='Cut'></e-toolbaritem>
+ *   <e-toolbaritems>
+ * </ejs-schedule>
+ * ```
+ */
+export declare class ToolbarItemDirective extends ComplexBase<ToolbarItemDirective> {
+    private viewContainerRef;
+    directivePropList: any;
+    click: any;
+    /**
+     * Specifies the types of command to be rendered in the Toolbar.
+     * Supported types are:
+     * * `Button`: Creates the Button control with its given properties like text, prefixIcon, etc.
+     * * `Separator`: Adds a horizontal line that separates the Toolbar commands.
+     * * `Input`: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * AutoComplete, etc.
+     * @default 'Button'
+     * @aspdefaultvalue Syncfusion.EJ2.Navigations.ItemType.Button
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Navigations.ItemType
+     */
+    type: any;
+    /**
+     * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
+     * The possible values for this property as follows
+     * * `Left`: To align commands to the left side of the Toolbar.
+     * * `Center`: To align commands at the center of the Toolbar.
+     * * `Right`: To align commands to the right side of the Toolbar.
+     * @default 'Left'
+     * @aspdefaultvalue Syncfusion.EJ2.Navigations.ItemAlign.Left
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Navigations.ItemAlign
+     */
+    align: any;
+    /**
+     * Defines single/multiple classes (separated by space) to be used for customization of commands.
+     * @default ""
+     */
+    cssClass: any;
+    /**
+     * Specifies whether an item should be disabled or not.
+     * @default false
+     */
+    disabled: any;
+    /**
+     * Defines htmlAttributes used to add custom attributes to Toolbar command.
+     * Supports HTML attributes such as style, class, etc.
+     * @default null
+     */
+    htmlAttributes: any;
+    /**
+     * Specifies the unique ID to be used with button or input element of Toolbar items.
+     * @default ""
+     */
+    id: any;
+    /**
+     * Specifies the unique name for each toolbar item rendered in Schedule. This name is used to map the toolbar items in the Schedule component.
+     *
+     * To access the default toolbar items, provide the name below,
+     *
+     ** `Custom`: Schedule component render the custom toolbar item.
+     ** `Previous`: Schedule component navigates to the previous date from the current date.
+     ** `Next`: Schedule component navigates to the next date from the current date.
+     ** `Today`: Schedule component navigates to the current date from any date.
+     ** `Views`: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.
+     ** `DateRangeText`: Schedule component displays the current date text range.
+     ** `NewEvent`: Schedule component render the icon to add a new event.
+     *
+     * @default 'Custom'
+     * @aspdefaultvalue Custom
+     * @isenumeration true
+     * @asptype ToolbarName
+     */
+    name: any;
+    /**
+     * Specifies the Toolbar command display area when an element's content is too large to fit available space.
+     * This is applicable only to `popup` mode. The possible values for this property as follows
+     * * `Show`:  Always shows the item as the primary priority on the *Toolbar*.
+     * * `Hide`: Always shows the item as the secondary priority on the *popup*.
+     * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.
+     * @default 'None'
+     * @aspdefaultvalue Syncfusion.EJ2.Navigations.OverflowOption.None
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Navigations.OverflowOption
+     */
+    overflow: any;
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.
+     * @default ""
+     */
+    prefixIcon: any;
+    /**
+     * Defines the priority of items to display it in popup always.
+     * It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.
+     * @default false
+     */
+    showAlwaysInPopup: any;
+    /**
+     * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
+     * The possible values for this property as follows
+     * * `Toolbar`:  Text will be displayed on *Toolbar* only.
+     * * `Overflow`: Text will be displayed only when content overflows to *popup*.
+     * * `Both`: Text will be displayed on *popup* and *Toolbar*.
+     * @default 'Both'
+     * @aspdefaultvalue Syncfusion.EJ2.Navigations.DisplayMode.Both
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Navigations.DisplayMode
+     */
+    showTextOn: any;
+    /**
+     * Defines single/multiple classes separated by space used to specify an icon for the button.
+     * The icon will be positioned after the text content if text is available.
+     * @default ""
+     */
+    suffixIcon: any;
+    /**
+     * Specifies the tab order of the Toolbar items. When positive values assigned, it allows to switch focus to the next/previous toolbar items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tool bar items, then tab switches based on element order.
+     * @default -1
+     */
+    tabIndex: any;
+    /**
+     * Specifies the text to be displayed on the Toolbar button.
+     * @default ""
+     */
+    text: any;
+    /**
+     * Specifies the text to be displayed on hovering the Toolbar button.
+     * @default ""
+     */
+    tooltipText: any;
+    /**
+     * Specifies whether an item should be hidden or not.
+     * @default true
+     */
+    visible: any;
+    /**
+     * Specifies the width of the Toolbar button commands.
+     * @default 'auto'
+     */
+    width: any;
+    /**
+     * Specifies the HTML element/element ID as a string that can be added as a Toolbar command.
+     *
+     * @default ""
+     * @angulartype string | object
+     * @reacttype string | function | JSX.Element
+     * @vuetype string | function
+     * @asptype string
+     */
+    template: any;
+    constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ToolbarItemDirective, "e-toolbaritems>e-toolbaritem", never, { "align": "align"; "cssClass": "cssClass"; "disabled": "disabled"; "htmlAttributes": "htmlAttributes"; "id": "id"; "name": "name"; "overflow": "overflow"; "prefixIcon": "prefixIcon"; "showAlwaysInPopup": "showAlwaysInPopup"; "showTextOn": "showTextOn"; "suffixIcon": "suffixIcon"; "tabIndex": "tabIndex"; "template": "template"; "text": "text"; "tooltipText": "tooltipText"; "type": "type"; "visible": "visible"; "width": "width"; }, { "click": "click"; }, ["template"]>;
+}
+/**
+ * ToolbarItem Array Directive
+ * @private
+ */
+export declare class ToolbarItemsDirective extends ArrayBase<ToolbarItemsDirective> {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarItemsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ToolbarItemsDirective, "ejs-schedule>e-toolbaritems", never, {}, {}, ["children"]>;
+}

package/src/schedule/views.directive.d.ts

@@ -90,6 +90,13 @@ export declare class ViewDirective extends ComplexBase<ViewDirective> {
      * @default false
      */
     isSelected: any;
+    /**
+     * Specifies the maximum number of events to be displayed in a single row.
+     * This property is applicable when the 'rowAutoHeight' property is disabled.
+     * This property is only applicable for the month view, timeline views, and timeline year view.
+     * @default null
+     */
+    maxEventsPerRow: any;
     /**
      * This option allows the user to set the number of months count to be displayed on the Schedule.
      * {% codeBlock src='schedule/monthsCount/index.md' %}{% endcodeBlock %}
@@ -278,7 +285,7 @@ export declare class ViewDirective extends ComplexBase<ViewDirective> {
     group_headerTooltipTemplate: any;
     constructor(viewContainerRef: ViewContainerRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<ViewDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ViewDirective, "e-views>e-view", never, { "allowVirtualScrolling": "allowVirtualScrolling"; "cellHeaderTemplate": "cellHeaderTemplate"; "cellTemplate": "cellTemplate"; "dateFormat": "dateFormat"; "dateHeaderTemplate": "dateHeaderTemplate"; "dateRangeTemplate": "dateRangeTemplate"; "dayHeaderTemplate": "dayHeaderTemplate"; "displayDate": "displayDate"; "displayName": "displayName"; "enableLazyLoading": "enableLazyLoading"; "endHour": "endHour"; "eventTemplate": "eventTemplate"; "firstDayOfWeek": "firstDayOfWeek"; "firstMonthOfYear": "firstMonthOfYear"; "group": "group"; "headerIndentTemplate": "headerIndentTemplate"; "headerRows": "headerRows"; "interval": "interval"; "isSelected": "isSelected"; "monthHeaderTemplate": "monthHeaderTemplate"; "monthsCount": "monthsCount"; "numberOfWeeks": "numberOfWeeks"; "option": "option"; "orientation": "orientation"; "readonly": "readonly"; "resourceHeaderTemplate": "resourceHeaderTemplate"; "showWeekNumber": "showWeekNumber"; "showWeekend": "showWeekend"; "startHour": "startHour"; "timeFormat": "timeFormat"; "timeScale": "timeScale"; "workDays": "workDays"; }, {}, ["dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "cellHeaderTemplate", "cellTemplate", "eventTemplate", "monthHeaderTemplate", "resourceHeaderTemplate", "headerIndentTemplate", "timeScale_minorSlotTemplate", "timeScale_majorSlotTemplate", "group_headerTooltipTemplate"]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ViewDirective, "e-views>e-view", never, { "allowVirtualScrolling": "allowVirtualScrolling"; "cellHeaderTemplate": "cellHeaderTemplate"; "cellTemplate": "cellTemplate"; "dateFormat": "dateFormat"; "dateHeaderTemplate": "dateHeaderTemplate"; "dateRangeTemplate": "dateRangeTemplate"; "dayHeaderTemplate": "dayHeaderTemplate"; "displayDate": "displayDate"; "displayName": "displayName"; "enableLazyLoading": "enableLazyLoading"; "endHour": "endHour"; "eventTemplate": "eventTemplate"; "firstDayOfWeek": "firstDayOfWeek"; "firstMonthOfYear": "firstMonthOfYear"; "group": "group"; "headerIndentTemplate": "headerIndentTemplate"; "headerRows": "headerRows"; "interval": "interval"; "isSelected": "isSelected"; "maxEventsPerRow": "maxEventsPerRow"; "monthHeaderTemplate": "monthHeaderTemplate"; "monthsCount": "monthsCount"; "numberOfWeeks": "numberOfWeeks"; "option": "option"; "orientation": "orientation"; "readonly": "readonly"; "resourceHeaderTemplate": "resourceHeaderTemplate"; "showWeekNumber": "showWeekNumber"; "showWeekend": "showWeekend"; "startHour": "startHour"; "timeFormat": "timeFormat"; "timeScale": "timeScale"; "workDays": "workDays"; }, {}, ["dateHeaderTemplate", "dateRangeTemplate", "dayHeaderTemplate", "cellHeaderTemplate", "cellTemplate", "eventTemplate", "monthHeaderTemplate", "resourceHeaderTemplate", "headerIndentTemplate", "timeScale_minorSlotTemplate", "timeScale_majorSlotTemplate", "group_headerTooltipTemplate"]>;
 }
 /**
  * View Array Directive

package/styles/bootstrap-dark.css

@@ -1154,7 +1154,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1162,7 +1162,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1200,7 +1200,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3350,8 +3350,8 @@
   background: transparent;
   border: 0;
   color: #f0f0f0;
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3363,10 +3363,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3400,9 +3400,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3416,8 +3420,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {
@@ -4199,6 +4208,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -4273,13 +4283,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -4289,7 +4292,7 @@
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
   font-weight: bold;
-  margin-bottom: 7px;
+  margin-bottom: 9px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -4331,7 +4334,8 @@
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
-  margin-bottom: 0;
+  margin-bottom: 9px;
+  font-weight: bold;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 8px;
@@ -4497,7 +4501,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 9px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;

package/styles/bootstrap.css

@@ -1149,7 +1149,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1157,7 +1157,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1195,7 +1195,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3345,8 +3345,8 @@
   background: transparent;
   border: 0;
   color: #333;
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3358,10 +3358,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3395,9 +3395,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3411,8 +3415,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {
@@ -4194,6 +4203,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -4268,13 +4278,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -4284,7 +4287,7 @@
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
   font-weight: bold;
-  margin-bottom: 7px;
+  margin-bottom: 9px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -4326,7 +4329,8 @@
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
-  margin-bottom: 0;
+  margin-bottom: 9px;
+  font-weight: bold;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 8px;
@@ -4492,7 +4496,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 9px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;

package/styles/bootstrap4.css

@@ -1258,7 +1258,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1266,7 +1266,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1304,7 +1304,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3454,8 +3454,8 @@
   background: #fff;
   border: 0;
   color: rgba(33, 37, 41, 0.5);
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3467,10 +3467,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3504,9 +3504,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3520,8 +3524,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {
@@ -4303,6 +4312,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -4377,13 +4387,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -4393,7 +4396,7 @@
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 14px;
   font-weight: 400;
-  margin-bottom: 7px;
+  margin-bottom: 3px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -4436,6 +4439,7 @@
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 16px;
   margin-bottom: 0;
+  font-weight: 400;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
@@ -4601,7 +4605,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 3px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;