@syncfusion/ej2-schedule 21.2.6 → 21.2.10

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 21.2.6
+*  version : 21.2.10
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-schedule@*",
-  "_id": "@syncfusion/ej2-schedule@21.2.5",
+  "_id": "@syncfusion/ej2-schedule@21.2.9",
   "_inBundle": false,
-  "_integrity": "sha512-l5+CXqLSUctpAdXgtXKDAZdCtduUffHvNXCi1MG06ib5JBxIaj1zH3JGBXbRuacOD1aw9wf2fpPHZMVVDCgfwg==",
+  "_integrity": "sha512-w0xxAq2mqnZo3rKNxml0d2qPUTG89tD6ahom2fkOKLliJ3U+7xlIYzoHYvDenIzGYUgtqEVctIxrNQYJDAg+Qw==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-21.2.5.tgz",
-  "_shasum": "0d4b86b906501cc20a7d80641256c00242deaedf",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-21.2.9.tgz",
+  "_shasum": "337678dc579849fe4bf8c97031aee088ca111724",
   "_spec": "@syncfusion/ej2-schedule@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -35,16 +35,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~21.2.3",
-    "@syncfusion/ej2-buttons": "~21.2.6",
-    "@syncfusion/ej2-calendars": "~21.2.6",
-    "@syncfusion/ej2-data": "~21.2.6",
-    "@syncfusion/ej2-dropdowns": "~21.2.6",
-    "@syncfusion/ej2-excel-export": "~21.2.6",
-    "@syncfusion/ej2-inputs": "~21.2.6",
-    "@syncfusion/ej2-lists": "~21.2.6",
-    "@syncfusion/ej2-navigations": "~21.2.6",
-    "@syncfusion/ej2-popups": "~21.2.4"
+    "@syncfusion/ej2-base": "~21.2.9",
+    "@syncfusion/ej2-buttons": "~21.2.10",
+    "@syncfusion/ej2-calendars": "~21.2.10",
+    "@syncfusion/ej2-data": "~21.2.9",
+    "@syncfusion/ej2-dropdowns": "~21.2.10",
+    "@syncfusion/ej2-excel-export": "~21.2.8",
+    "@syncfusion/ej2-inputs": "~21.2.9",
+    "@syncfusion/ej2-lists": "~21.2.9",
+    "@syncfusion/ej2-navigations": "~21.2.9",
+    "@syncfusion/ej2-popups": "~21.2.10"
   },
   "deprecated": false,
   "description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.",
@@ -73,6 +73,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "21.2.6",
+  "version": "21.2.10",
   "sideEffects": false
 }

package/src/schedule/actions/drag.js

@@ -581,7 +581,9 @@ var DragAndDrop = /** @class */ (function (_super) {
                 (dragArea.scrollTop + dragArea.offsetHeight - this.actionObj.clone.offsetHeight + window.pageYOffset) +
                     (this.actionObj.clone.offsetHeight - this.heightUptoCursorPoint);
             offsetTop = Math.round(offsetTop / this.actionObj.cellHeight) * this.actionObj.cellHeight;
-            this.actionObj.clone.style.top = formatUnit(offsetTop);
+            if (dragArea.scrollTop > 0) {
+                this.actionObj.clone.style.top = formatUnit(offsetTop);
+            }
         }
         var rowIndex = (this.parent.activeViewOptions.timeScale.enable) ? (offsetTop / this.actionObj.cellHeight) : 0;
         var heightPerMinute = this.actionObj.cellHeight / this.actionObj.slotInterval;

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

@@ -47,7 +47,8 @@ var TimelineEvent = /** @class */ (function (_super) {
         if (this.parent.activeViewOptions.headerRows.length > 0 &&
             this.parent.activeViewOptions.headerRows.slice(-1)[0].option !== 'Hour') {
             this.renderType = 'day';
-            this.cellWidth = this.content.offsetWidth / this.dateRender.length;
+            var workCell = this.content.querySelector('.' + cls.WORK_CELLS_CLASS);
+            this.cellWidth = workCell.getBoundingClientRect().width / +(workCell.getAttribute('colspan') || 1);
             this.slotsPerDay = 1;
         }
         else {
@@ -252,7 +253,7 @@ var TimelineEvent = /** @class */ (function (_super) {
     TimelineEvent.prototype.renderTimelineMoreIndicator = function (startTime, startDate, endDate, appHeight, interval, resIndex, appointmentsList, top, appLeft, appRight, cellTd, moreIndicator, appPos, position) {
         appLeft = (this.parent.enableRtl) ? appRight = position : position;
         appPos = (this.parent.enableRtl) ? appRight : appLeft;
-        appPos = (Math.round(appPos / this.cellWidth) * this.cellWidth);
+        appPos = (Math.floor(appPos / this.cellWidth) * this.cellWidth);
         if ((cellTd && isNullOrUndefined(moreIndicator)) ||
             (!this.isAlreadyAvail(appPos, cellTd))) {
             var startDateTime = (this.parent.activeViewOptions.option === 'TimelineMonth' || this.renderType === 'day') ? new Date(+startTime) : startDate;
@@ -279,8 +280,8 @@ var TimelineEvent = /** @class */ (function (_super) {
             }
             moreIndicatorElement.style.top = top + appArea + 'px';
             moreIndicatorElement.style.width = this.cellWidth + 'px';
-            moreIndicatorElement.style.left = ((appLeft / this.cellWidth) * this.cellWidth) + 'px';
-            moreIndicatorElement.style.right = ((appRight / this.cellWidth) * this.cellWidth) + 'px';
+            moreIndicatorElement.style.left = (Math.floor(appLeft / this.cellWidth) * this.cellWidth) + 'px';
+            moreIndicatorElement.style.right = (Math.floor(appRight / this.cellWidth) * this.cellWidth) + 'px';
             this.renderElement(cellTd, moreIndicatorElement);
             EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
         }

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

@@ -164,6 +164,7 @@ var EventWindow = /** @class */ (function () {
     };
     EventWindow.prototype.onBeforeOpen = function (args) {
         var _this = this;
+        var endTime = this.eventData[this.fields.endTime].getTime();
         var eventProp = {
             type: 'Editor',
             data: this.eventData,
@@ -188,6 +189,12 @@ var EventWindow = /** @class */ (function () {
         this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
             args.cancel = popupArgs.cancel;
             _this.duration = _this.cellClickAction ? popupArgs.duration : null;
+            if (_this.eventData[_this.fields.endTime].getTime() === endTime && !_this.cellClickAction &&
+                _this.eventData[_this.fields.endTime].getHours() === 0 &&
+                _this.eventData[_this.fields.endTime].getMinutes() === 0) {
+                _this.eventData = extend({}, _this.eventData, null, true);
+                _this.trimAllDay(_this.eventData);
+            }
             _this.refreshDateTimePicker(_this.duration);
             if (_this.cellClickAction && popupArgs.duration !== _this.getSlotDuration() && isNullOrUndefined(_this.parent.editorTemplate)) {
                 var startObj = _this.getInstance(cls.EVENT_WINDOW_START_CLASS);
@@ -869,12 +876,12 @@ var EventWindow = /** @class */ (function () {
         this.fieldValidator.renderFormValidator(form, rules, this.element, this.parent.locale);
     };
     EventWindow.prototype.showDetails = function (eventData) {
+        this.eventData = eventData;
         var eventObj = extend({}, eventData, null, true);
         if ((!this.cellClickAction || this.cellClickAction && !isNullOrUndefined(this.parent.editorTemplate)) &&
             eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {
             this.trimAllDay(eventObj);
         }
-        this.eventData = eventObj;
         var formElements = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);
         var keyNames = Object.keys(eventObj);
         for (var _i = 0, formElements_2 = formElements; _i < formElements_2.length; _i++) {

package/src/schedule/renderer/header-renderer.js

@@ -168,7 +168,7 @@ var HeaderRenderer = /** @class */ (function () {
         }
         else {
             var text = this.parent.activeView.getDateRangeText(date);
-            selEle.setAttribute('aria-label', text);
+            selEle.firstElementChild.setAttribute('aria-label', text);
             textEle.textContent = text;
         }
         this.refresh();
@@ -199,16 +199,16 @@ var HeaderRenderer = /** @class */ (function () {
         var items = [];
         items.push({
             align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
-            cssClass: 'e-prev', htmlAttributes: { 'aria-label': 'previous period', 'role': 'navigation' }
+            cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
         });
         items.push({
             align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
-            cssClass: 'e-next', htmlAttributes: { 'aria-label': 'next period', 'role': 'navigation' }
+            cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
         });
         items.push({
             align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
             overflow: 'Show',
-            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'aria-label': 'title', 'role': 'navigation' }
+            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
         });
         if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) {
             items.push({

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

@@ -151,18 +151,22 @@ 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

@@ -2148,6 +2148,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;

package/styles/bootstrap.css

@@ -2148,6 +2148,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;

package/styles/bootstrap4.css

@@ -2227,6 +2227,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;

package/styles/bootstrap5-dark.css

@@ -2201,6 +2201,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;

package/styles/bootstrap5.css

@@ -2201,6 +2201,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;

package/styles/fabric-dark.css

@@ -2115,6 +2115,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #514f4f;
 }
+.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;

package/styles/fabric.css

@@ -2110,6 +2110,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #b7e0ff;
 }
+.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;

package/styles/fluent-dark.css

@@ -2178,6 +2178,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #292827;
 }
+.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;

package/styles/fluent.css

@@ -2178,6 +2178,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #edebe9;
 }
+.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;

package/styles/highcontrast-light.css

@@ -2192,6 +2192,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #400074;
 }
+.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;

package/styles/highcontrast.css

@@ -2196,6 +2196,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #ffd939;
 }
+.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;

package/styles/material-dark.css

@@ -2137,6 +2137,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #757575;
 }
+.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;

package/styles/material.css

@@ -2173,6 +2173,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e0e0e0;
 }
+.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;

package/styles/schedule/_layout.scss

@@ -2302,6 +2302,11 @@
         &:focus {
           background: $schedule-select-bg-color;
         }
+
+        &.e-template {
+          display: inline-flex;
+          flex-direction: row-reverse;
+        }
       }
 
       .e-subject-wrap {

package/styles/schedule/bootstrap-dark.css

@@ -2148,6 +2148,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;

package/styles/schedule/bootstrap.css

@@ -2148,6 +2148,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;

package/styles/schedule/bootstrap4.css

@@ -2227,6 +2227,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;

package/styles/schedule/bootstrap5-dark.css

@@ -2201,6 +2201,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;

package/styles/schedule/bootstrap5.css

@@ -2201,6 +2201,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;

package/styles/schedule/fabric-dark.css

@@ -2115,6 +2115,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #514f4f;
 }
+.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;

package/styles/schedule/fabric.css

@@ -2110,6 +2110,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #b7e0ff;
 }
+.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;

package/styles/schedule/fluent-dark.css

@@ -2178,6 +2178,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #292827;
 }
+.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;

package/styles/schedule/fluent.css

@@ -2178,6 +2178,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #edebe9;
 }
+.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;

package/styles/schedule/highcontrast-light.css

@@ -2192,6 +2192,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #400074;
 }
+.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;

package/styles/schedule/highcontrast.css

@@ -2196,6 +2196,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #ffd939;
 }
+.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;

package/styles/schedule/material-dark.css

@@ -2137,6 +2137,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #757575;
 }
+.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;

package/styles/schedule/material.css

@@ -2173,6 +2173,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e0e0e0;
 }
+.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;

package/styles/schedule/tailwind-dark.css

@@ -2143,6 +2143,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #6b7280;
 }
+.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;

package/styles/schedule/tailwind.css

@@ -2143,6 +2143,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e5e7eb;
 }
+.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;

package/styles/tailwind-dark.css

@@ -2144,6 +2144,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #6b7280;
 }
+.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;

package/styles/tailwind.css

@@ -2144,6 +2144,12 @@
 .e-schedule .e-month-agenda-view .e-appointment.e-appointment-border, .e-schedule .e-month-agenda-view .e-appointment:focus {
   background: #e5e7eb;
 }
+.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;