@syncfusion/ej2-schedule 21.2.9 → 22.1.34

package/src/schedule/models/views-model.d.ts

@@ -80,8 +80,9 @@ export interface ViewsModel {
      *  This template is only applicable for month view day cells.
      *
      * @default null
+     * @aspType string
      */
-    cellHeaderTemplate?: string;
+    cellHeaderTemplate?: string | Function;
 
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
@@ -89,15 +90,17 @@ export interface ViewsModel {
      *  It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    dateHeaderTemplate?: string;
+    dateHeaderTemplate?: string | Function;
 
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
      *
      * @default null
+     * @aspType string
      */
-    dateRangeTemplate?: string;
+    dateRangeTemplate?: string | Function;
 
     /**
      * The template option which is used to render the customized work cells on the Schedule. Here, the
@@ -105,8 +108,9 @@ export interface ViewsModel {
      *  The field accessible via template is `date`. It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    cellTemplate?: string;
+    cellTemplate?: string | Function;
 
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
@@ -114,8 +118,9 @@ export interface ViewsModel {
      *  This template is only applicable for year view header cells.
      *
      * @default null
+     * @aspType string
      */
-    dayHeaderTemplate?: string;
+    dayHeaderTemplate?: string | Function;
 
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
@@ -123,8 +128,9 @@ export interface ViewsModel {
      *  This template is only applicable for year view header cells.
      *
      * @default null
+     * @aspType string
      */
-    monthHeaderTemplate?: string;
+    monthHeaderTemplate?: string | Function;
 
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
@@ -133,8 +139,9 @@ export interface ViewsModel {
      *  whereas it will get applied only on the events of the view to which it is currently being defined.
      *
      * @default null
+     * @aspType string
      */
-    eventTemplate?: string;
+    eventTemplate?: string | Function;
 
     /**
      * When set to `false`, it hides the weekend days of a week from the Schedule.
@@ -212,8 +219,9 @@ export interface ViewsModel {
      *  It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    resourceHeaderTemplate?: string;
+    resourceHeaderTemplate?: string | Function;
 
     /**
      * The template option which is used to render the customized header indent cell on the schedule. Here, the
@@ -221,8 +229,9 @@ export interface ViewsModel {
      *  It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    headerIndentTemplate?: string;
+    headerIndentTemplate?: string | Function;
 
     /**
      * By default, Schedule follows the time-format as per the default culture assigned to it.

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

@@ -73,46 +73,52 @@ export declare class Views extends ChildProperty<Views> {
      *  This template is only applicable for month view day cells.
      *
      * @default null
+     * @aspType string
      */
-    cellHeaderTemplate: string;
+    cellHeaderTemplate: string | Function;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
      *  date header cells. The field that can be accessed via this template is `date`.
      *  It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    dateHeaderTemplate: string;
+    dateHeaderTemplate: string | Function;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
      *
      * @default null
+     * @aspType string
      */
-    dateRangeTemplate: string;
+    dateRangeTemplate: string | Function;
     /**
      * The template option which is used to render the customized work cells on the Schedule. Here, the
      *  template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the work cells.
      *  The field accessible via template is `date`. It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    cellTemplate: string;
+    cellTemplate: string | Function;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
      *  Year view day cell header.
      *  This template is only applicable for year view header cells.
      *
      * @default null
+     * @aspType string
      */
-    dayHeaderTemplate: string;
+    dayHeaderTemplate: string | Function;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the
      *  Year view day cell header.
      *  This template is only applicable for year view header cells.
      *
      * @default null
+     * @aspType string
      */
-    monthHeaderTemplate: string;
+    monthHeaderTemplate: string | Function;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
      *  the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code.
@@ -120,8 +126,9 @@ export declare class Views extends ChildProperty<Views> {
      *  whereas it will get applied only on the events of the view to which it is currently being defined.
      *
      * @default null
+     * @aspType string
      */
-    eventTemplate: string;
+    eventTemplate: string | Function;
     /**
      * When set to `false`, it hides the weekend days of a week from the Schedule.
      * The days which are not defined in the working days collection are usually treated as weekend days.
@@ -190,16 +197,18 @@ export declare class Views extends ChildProperty<Views> {
      *  It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    resourceHeaderTemplate: string;
+    resourceHeaderTemplate: string | Function;
     /**
      * The template option which is used to render the customized header indent cell on the schedule. Here, the
      *  template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell.
      *  It gets applied only to the view objects on which it is defined.
      *
      * @default null
+     * @aspType string
      */
-    headerIndentTemplate: string;
+    headerIndentTemplate: string | Function;
     /**
      * By default, Schedule follows the time-format as per the default culture assigned to it.
      * It is also possible to manually set specific time format by using the `timeFormat` property.

package/src/schedule/popups/event-tooltip.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { isNullOrUndefined, append, createElement, addClass } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, append, createElement, addClass, initializeCSPTemplate } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
@@ -116,11 +116,14 @@ var EventTooltip = /** @class */ (function () {
             }
             var tooltipTime = (record[fields.isAllDay]) ? this.parent.localeObj.getConstant('allDay') :
                 (startTime + ' - ' + endTime);
-            var content = '<div><div class="e-subject">' + tooltipSubject + '</div>' +
+            var content_1 = '<div><div class="e-subject">' + tooltipSubject + '</div>' +
                 '<div class="e-location">' + tooltipLocation + '</div>' +
                 '<div class="e-details">' + tooltipDetails + '</div>' +
                 '<div class="e-all-day">' + tooltipTime + '</div></div>';
-            this.setContent(content);
+            var contentTemp = function () {
+                return content_1;
+            };
+            this.setContent(initializeCSPTemplate(contentTemp));
         }
         this.parent.renderTemplates();
     };

package/src/schedule/popups/event-window.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { createElement, isNullOrUndefined, addClass, remove, EventHandler, extend, append, detach } from '@syncfusion/ej2-base';
-import { cldrData, removeClass, getValue, getDefaultDateObject, closest, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { cldrData, removeClass, getValue, getDefaultDateObject, closest, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';
 import { Query, Deferred } from '@syncfusion/ej2-data';
 import { CheckBox, Button } from '@syncfusion/ej2-buttons';
 import { Dialog } from '@syncfusion/ej2-popups';
@@ -430,8 +430,10 @@ var EventWindow = /** @class */ (function () {
         var resourceDiv = this.createDivElement(value + '-container' + ' ' + 'e-resources');
         var resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
         resourceDiv.appendChild(resourceInput);
-        var resourceTemplate = '<div class="e-resource-template"><div class="e-resource-color" style="background-color:${' +
-            resourceData.colorField + '}"></div><div class="e-resource-text">${' + resourceData.textField + '}</div></div>';
+        function resourceTemplate(data) {
+            return "<div class=\"e-resource-template\"><div class=\"e-resource-color\" style=\"background-color:" + data[resourceData.colorField] + "\"></div><div class=\"e-resource-text\">" + data[resourceData.textField] + "</div></div>";
+        }
+        initializeCSPTemplate(resourceTemplate, resourceData);
         if (resourceData.allowMultiple) {
             var listObj = new MultiSelect({
                 enableRtl: this.parent.enableRtl,
@@ -681,16 +683,18 @@ var EventWindow = /** @class */ (function () {
         return labelText;
     };
     EventWindow.prototype.onChange = function (args) {
-        var targetSelector = "." + cls.EVENT_WINDOW_ALL_DAY_CLASS + ",." + cls.TIME_ZONE_CLASS + ",." + cls.EVENT_WINDOW_REPEAT_CLASS;
-        var target = closest(args.event.target, targetSelector);
-        if (target.classList.contains(cls.EVENT_WINDOW_ALL_DAY_CLASS)) {
-            this.onAllDayChange(args.checked);
-        }
-        else if (target.classList.contains(cls.TIME_ZONE_CLASS)) {
-            this.timezoneChangeStyle(args.checked);
-        }
-        else if (target.classList.contains(cls.EVENT_WINDOW_REPEAT_CLASS)) {
-            this.onRepeatChange(args.checked);
+        if (args.event && args.event.target) {
+            var targetSelector = "." + cls.EVENT_WINDOW_ALL_DAY_CLASS + ",." + cls.TIME_ZONE_CLASS + ",." + cls.EVENT_WINDOW_REPEAT_CLASS;
+            var target = closest(args.event.target, targetSelector);
+            if (target.classList.contains(cls.EVENT_WINDOW_ALL_DAY_CLASS)) {
+                this.onAllDayChange(args.checked);
+            }
+            else if (target.classList.contains(cls.TIME_ZONE_CLASS)) {
+                this.timezoneChangeStyle(args.checked);
+            }
+            else if (target.classList.contains(cls.EVENT_WINDOW_REPEAT_CLASS)) {
+                this.onRepeatChange(args.checked);
+            }
         }
     };
     EventWindow.prototype.renderRepeatDialog = function () {
@@ -1525,7 +1529,7 @@ var EventWindow = /** @class */ (function () {
                 this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
                 return true;
             }
-            else if (!(previousEndTime.getTime() <= currentStartTime.getTime() && nextStartTime.getTime() >
+            else if (!(previousEndTime.getTime() <= currentStartTime.getTime() && nextStartTime.getTime() >=
                 currentEndTime.getTime()) || (util.resetTime(nextEndTime).getTime() <
                 util.resetTime(currentStartTime).getTime()) ||
                 (util.resetTime(previousStartTime).getTime() > util.resetTime(currentEndTime).getTime()) ||

package/src/schedule/popups/quick-popups.js

@@ -1325,7 +1325,9 @@ var QuickPopups = /** @class */ (function () {
             this.dialogEvent = event;
         }
         this.quickPopupHide();
-        this.parent.eventBase.focusElement();
+        if (isNullOrUndefined(event) || (!isNullOrUndefined(event) && event.action !== 'escape')) {
+            this.parent.eventBase.focusElement();
+        }
     };
     QuickPopups.prototype.addEventListener = function () {
         this.parent.on(event.cellClick, this.cellClick, this);

package/src/schedule/renderer/timeline-view.js

@@ -151,18 +151,23 @@ var TimelineViews = /** @class */ (function (_super) {
     };
     TimelineViews.prototype.getLeftFromDateTime = function (currentDateIndex, date) {
         var startHour = this.getStartHour();
-        var endHour = this.getEndHour();
         var diffInDates = 0;
         var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
         if (!isNullOrUndefined(currentDateIndex)) {
-            var end = (endHour.getHours() === 0) ? 24 : endHour.getHours();
             if (currentDateIndex[0] !== 0) {
-                diffInDates = (currentDateIndex[0]) * ((end - startHour.getHours()) * 60) + (endHour.getMinutes() - startHour.getMinutes());
+                if (this.parent.activeView.colLevels[0] && this.parent.activeView.colLevels[0][0].colSpan) {
+                    diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[0][0].colSpan * this.getWorkCellWidth();
+                }
+                else {
+                    var endHour = this.getEndHour();
+                    var end = (endHour.getHours() === 0) ? 24 : endHour.getHours();
+                    diffInMinutes = diffInMinutes + ((currentDateIndex[0]) * (((end - startHour.getHours()) * 60) +
+                        (endHour.getMinutes() - startHour.getMinutes())));
+                }
             }
-            diffInMinutes = diffInDates + diffInMinutes;
         }
-        return (diffInMinutes * this.getWorkCellWidth() * this.parent.activeViewOptions.timeScale.slotCount) /
-            this.parent.activeViewOptions.timeScale.interval;
+        return diffInDates + ((diffInMinutes * this.getWorkCellWidth() * this.parent.activeViewOptions.timeScale.slotCount) /
+            this.parent.activeViewOptions.timeScale.interval);
     };
     TimelineViews.prototype.getWorkCellWidth = function () {
         return this.element.querySelector('.e-work-cells').getBoundingClientRect().width;

package/styles/bootstrap-dark.css

@@ -1668,20 +1668,13 @@
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-edit-icon {
-  line-height: 38px;
+  line-height: 22px;
   padding: 0 5px;
 }
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-indicator {
-  display: block;
-}
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-left-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  font-size: 10px;
-  line-height: 38px;
-  padding-right: 7px;
-}
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  padding-right: 5px;
+  line-height: 22px;
+  padding: 0 2px;
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment.e-appointment-border, .e-schedule .e-timeline-year-view .e-event-table .e-appointment:focus {
   border: 0;
@@ -2148,6 +2141,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #484848;
 }
+.e-schedule .e-month-agenda-view .e-appointment.e-template {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
 .e-schedule .e-month-agenda-view .e-subject-wrap {
   display: -ms-flexbox;
   display: flex;
@@ -2543,9 +2542,9 @@
   height: 35px;
 }
 .e-bigger .e-schedule .e-month-view .e-resource-cells,
-.e-bigger .e-schedule .e-month-view .e-date-header-wrap,
+.e-bigger .e-schedule .e-month-view .e-date-header-wrap table td,
 .e-bigger.e-schedule .e-month-view .e-resource-cells,
-.e-bigger.e-schedule .e-month-view .e-date-header-wrap {
+.e-bigger.e-schedule .e-month-view .e-date-header-wrap table td {
   font-size: 14px;
 }
 .e-bigger .e-schedule .e-month-view .e-content-wrap,
@@ -2562,6 +2561,10 @@
 .e-bigger.e-schedule .e-month-view .e-m-day {
   font-size: 14px;
 }
+.e-bigger .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar,
+.e-bigger.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
+  min-width: 306px;
+}
 
 .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-appointment-border, .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment:focus {
   border: 1px solid #fff;

package/styles/bootstrap.css

@@ -1668,20 +1668,13 @@
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-edit-icon {
-  line-height: 38px;
+  line-height: 22px;
   padding: 0 5px;
 }
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-indicator {
-  display: block;
-}
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-left-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  font-size: 10px;
-  line-height: 38px;
-  padding-right: 7px;
-}
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  padding-right: 5px;
+  line-height: 22px;
+  padding: 0 2px;
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment.e-appointment-border, .e-schedule .e-timeline-year-view .e-event-table .e-appointment:focus {
   border: 0;
@@ -2148,6 +2141,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e6e6e6;
 }
+.e-schedule .e-month-agenda-view .e-appointment.e-template {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
 .e-schedule .e-month-agenda-view .e-subject-wrap {
   display: -ms-flexbox;
   display: flex;
@@ -2543,9 +2542,9 @@
   height: 35px;
 }
 .e-bigger .e-schedule .e-month-view .e-resource-cells,
-.e-bigger .e-schedule .e-month-view .e-date-header-wrap,
+.e-bigger .e-schedule .e-month-view .e-date-header-wrap table td,
 .e-bigger.e-schedule .e-month-view .e-resource-cells,
-.e-bigger.e-schedule .e-month-view .e-date-header-wrap {
+.e-bigger.e-schedule .e-month-view .e-date-header-wrap table td {
   font-size: 14px;
 }
 .e-bigger .e-schedule .e-month-view .e-content-wrap,
@@ -2562,6 +2561,10 @@
 .e-bigger.e-schedule .e-month-view .e-m-day {
   font-size: 14px;
 }
+.e-bigger .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar,
+.e-bigger.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
+  min-width: 306px;
+}
 
 .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-appointment-border, .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment:focus {
   border: 1px solid rgba(0, 0, 0, 0.5);

package/styles/bootstrap4.css

@@ -1747,20 +1747,13 @@
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-edit-icon {
-  line-height: 38px;
+  line-height: 22px;
   padding: 0 5px;
 }
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-indicator {
-  display: block;
-}
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-left-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  font-size: 10px;
-  line-height: 38px;
-  padding-right: 7px;
-}
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  padding-right: 5px;
+  line-height: 22px;
+  padding: 0 2px;
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment.e-appointment-border, .e-schedule .e-timeline-year-view .e-event-table .e-appointment:focus {
   border: 0;
@@ -2227,6 +2220,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e9ecef;
 }
+.e-schedule .e-month-agenda-view .e-appointment.e-template {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
 .e-schedule .e-month-agenda-view .e-subject-wrap {
   display: -ms-flexbox;
   display: flex;
@@ -2622,9 +2621,9 @@
   height: 35px;
 }
 .e-bigger .e-schedule .e-month-view .e-resource-cells,
-.e-bigger .e-schedule .e-month-view .e-date-header-wrap,
+.e-bigger .e-schedule .e-month-view .e-date-header-wrap table td,
 .e-bigger.e-schedule .e-month-view .e-resource-cells,
-.e-bigger.e-schedule .e-month-view .e-date-header-wrap {
+.e-bigger.e-schedule .e-month-view .e-date-header-wrap table td {
   font-size: 16px;
 }
 .e-bigger .e-schedule .e-month-view .e-content-wrap,
@@ -2641,6 +2640,10 @@
 .e-bigger.e-schedule .e-month-view .e-m-day {
   font-size: 14px;
 }
+.e-bigger .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar,
+.e-bigger.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
+  min-width: 306px;
+}
 
 .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-appointment-border, .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment:focus {
   border: 1px solid rgba(0, 0, 0, 0.5);
@@ -3869,7 +3872,7 @@
   border-top: 1px solid #007bff;
 }
 .e-schedule .e-vertical-view .e-previous-timeline {
-  border-top: 1px dotted #007bff;
+  border-top: 1px dashed #007bff;
 }
 .e-schedule .e-vertical-view.e-by-date .e-date-header-wrap table tbody td.e-header-cells {
   border-bottom-width: 1px;

package/styles/bootstrap5-dark.css

@@ -1721,20 +1721,13 @@
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-edit-icon {
-  line-height: 38px;
+  line-height: 26px;
   padding: 0 5px;
 }
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-indicator {
-  display: block;
-}
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-left-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  font-size: 10px;
-  line-height: 38px;
-  padding-right: 7px;
-}
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  padding-right: 5px;
+  line-height: 26px;
+  padding: 0 2px;
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment.e-appointment-border, .e-schedule .e-timeline-year-view .e-event-table .e-appointment:focus {
   border: 0;
@@ -2201,6 +2194,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #343a40;
 }
+.e-schedule .e-month-agenda-view .e-appointment.e-template {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
 .e-schedule .e-month-agenda-view .e-subject-wrap {
   display: -ms-flexbox;
   display: flex;
@@ -2596,9 +2595,9 @@
   height: 38px;
 }
 .e-bigger .e-schedule .e-month-view .e-resource-cells,
-.e-bigger .e-schedule .e-month-view .e-date-header-wrap,
+.e-bigger .e-schedule .e-month-view .e-date-header-wrap table td,
 .e-bigger.e-schedule .e-month-view .e-resource-cells,
-.e-bigger.e-schedule .e-month-view .e-date-header-wrap {
+.e-bigger.e-schedule .e-month-view .e-date-header-wrap table td {
   font-size: 16px;
 }
 .e-bigger .e-schedule .e-month-view .e-content-wrap,
@@ -2615,6 +2614,10 @@
 .e-bigger.e-schedule .e-month-view .e-m-day {
   font-size: 14px;
 }
+.e-bigger .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar,
+.e-bigger.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
+  min-width: 306px;
+}
 
 .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-appointment-border, .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment:focus {
   border: 1px solid rgba(68, 76, 84, 0.5);

package/styles/bootstrap5.css

@@ -1721,20 +1721,13 @@
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-recurrence-edit-icon {
-  line-height: 38px;
+  line-height: 26px;
   padding: 0 5px;
 }
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-indicator {
-  display: block;
-}
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-left-icon,
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  font-size: 10px;
-  line-height: 38px;
-  padding-right: 7px;
-}
-.e-schedule .e-timeline-year-view .e-event-table .e-appointment .e-right-icon {
-  padding-right: 5px;
+  line-height: 26px;
+  padding: 0 2px;
 }
 .e-schedule .e-timeline-year-view .e-event-table .e-appointment.e-appointment-border, .e-schedule .e-timeline-year-view .e-event-table .e-appointment:focus {
   border: 0;
@@ -2201,6 +2194,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e9ecef;
 }
+.e-schedule .e-month-agenda-view .e-appointment.e-template {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+}
 .e-schedule .e-month-agenda-view .e-subject-wrap {
   display: -ms-flexbox;
   display: flex;
@@ -2596,9 +2595,9 @@
   height: 38px;
 }
 .e-bigger .e-schedule .e-month-view .e-resource-cells,
-.e-bigger .e-schedule .e-month-view .e-date-header-wrap,
+.e-bigger .e-schedule .e-month-view .e-date-header-wrap table td,
 .e-bigger.e-schedule .e-month-view .e-resource-cells,
-.e-bigger.e-schedule .e-month-view .e-date-header-wrap {
+.e-bigger.e-schedule .e-month-view .e-date-header-wrap table td {
   font-size: 16px;
 }
 .e-bigger .e-schedule .e-month-view .e-content-wrap,
@@ -2615,6 +2614,10 @@
 .e-bigger.e-schedule .e-month-view .e-m-day {
   font-size: 14px;
 }
+.e-bigger .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar,
+.e-bigger.e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar {
+  min-width: 306px;
+}
 
 .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-appointment-border, .e-schedule.e-multi-drag .e-vertical-view .e-all-day-appointment-wrapper .e-appointment:focus {
   border: 1px solid rgba(222, 226, 230, 0.5);