@syncfusion/ej2-schedule 31.2.15 → 32.1.20

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.2.15
+*  version : 32.1.20
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,22 +1,22 @@
 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "31.2.15",
+  "version": "32.1.20",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-schedule.umd.min.js",
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-schedule.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.12",
-    "@syncfusion/ej2-calendars": "~31.2.15",
-    "@syncfusion/ej2-data": "~31.2.12",
-    "@syncfusion/ej2-dropdowns": "~31.2.15",
-    "@syncfusion/ej2-excel-export": "~31.2.12",
-    "@syncfusion/ej2-inputs": "~31.2.15",
-    "@syncfusion/ej2-lists": "~31.2.12",
-    "@syncfusion/ej2-navigations": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.19",
+    "@syncfusion/ej2-calendars": "~32.1.20",
+    "@syncfusion/ej2-data": "~32.1.19",
+    "@syncfusion/ej2-dropdowns": "~32.1.20",
+    "@syncfusion/ej2-excel-export": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.20",
+    "@syncfusion/ej2-lists": "~32.1.19",
+    "@syncfusion/ej2-navigations": "~32.1.19",
+    "@syncfusion/ej2-popups": "~32.1.19"
   },
   "devDependencies": {},
   "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.",

package/src/recurrence-editor/date-generator.js

@@ -144,10 +144,6 @@ export function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCo
     maxOccurrence = maximumCount;
     startDayOfWeek = startDayOfWeek || 0;
     setFirstDayOfWeek(DAYINDEX[parseInt(startDayOfWeek.toString(), 10)]);
-    if (ruleObject.until) {
-        var end = resetTime(ruleObject.until);
-        ruleObject.until = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59);
-    }
     switch (ruleObject.freq) {
         case 'DAILY':
             dailyType(modifiedDate, ruleObject.until, data, ruleObject);

package/src/schedule/actions/action-base.d.ts

@@ -29,6 +29,7 @@ export declare class ActionBase {
     createCloneElement(element: HTMLElement): HTMLElement;
     removeCloneElementClasses(): void;
     removeCloneElement(): void;
+    removeDragResizeClones(): void;
     getCursorElement(e: MouseEvent & TouchEvent): HTMLElement;
     autoScroll(): void;
     autoScrollValidation(): boolean;

package/src/schedule/actions/action-base.js

@@ -91,7 +91,7 @@ var ActionBase = /** @class */ (function () {
         var startHour = this.parent.activeView.getStartHour();
         var intervalInMS = util.MS_PER_MINUTE * this.actionObj.interval;
         dateInMS += (startHour.getHours() * 60 + startHour.getMinutes()) * util.MS_PER_MINUTE + startHour.getSeconds() * 1000;
-        dateInMS = dateInMS + Math.floor((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
+        dateInMS = dateInMS + ((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
         return new Date(dateInMS);
     };
     ActionBase.prototype.getContentAreaDimension = function () {
@@ -249,6 +249,13 @@ var ActionBase = /** @class */ (function () {
             remove(timeIndicator);
         }
     };
+    ActionBase.prototype.removeDragResizeClones = function () {
+        var eventWrappers = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CLONE_ELEMENT_CLASS));
+        for (var _i = 0, eventWrappers_1 = eventWrappers; _i < eventWrappers_1.length; _i++) {
+            var wrapper = eventWrappers_1[_i];
+            remove(wrapper);
+        }
+    };
     ActionBase.prototype.getCursorElement = function (e) {
         var pages = this.parent.eventBase.getPageCoordinates(e);
         return document.elementFromPoint(pages.clientX, pages.clientY);
@@ -435,15 +442,11 @@ var ActionBase = /** @class */ (function () {
         this.monthEvent.dateRender = dateRender;
         this.monthEvent.getSlotDates(workDays);
         if (this.resizeEdges.left || this.resizeEdges.right) {
-            var eventWrappers = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CLONE_ELEMENT_CLASS));
-            for (var _i = 0, eventWrappers_1 = eventWrappers; _i < eventWrappers_1.length; _i++) {
-                var wrapper = eventWrappers_1[_i];
-                remove(wrapper);
-            }
+            this.removeDragResizeClones();
         }
         var spannedEvents = this.monthEvent.splitEvent(event, dateRender);
-        for (var _a = 0, spannedEvents_1 = spannedEvents; _a < spannedEvents_1.length; _a++) {
-            var event_1 = spannedEvents_1[_a];
+        for (var _i = 0, spannedEvents_1 = spannedEvents; _i < spannedEvents_1.length; _i++) {
+            var event_1 = spannedEvents_1[_i];
             var day = this.parent.getIndexOfDate(dateRender, util.resetTime(event_1[this.monthEvent.fields.startTime]));
             var diffInDays = event_1.data.count;
             var appWidth = (diffInDays * this.actionObj.cellWidth) - 7;

package/src/schedule/actions/drag.js

@@ -1037,11 +1037,7 @@ var DragAndDrop = /** @class */ (function (_super) {
         }
         var event = this.getUpdatedEvent(this.actionObj.start, this.actionObj.end, this.actionObj.event);
         if (isNullOrUndefined(this.parent.eventDragArea)) {
-            var eventWrappers = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CLONE_ELEMENT_CLASS));
-            for (var _i = 0, eventWrappers_1 = eventWrappers; _i < eventWrappers_1.length; _i++) {
-                var wrapper = eventWrappers_1[_i];
-                remove(wrapper);
-            }
+            this.removeDragResizeClones();
         }
         if (this.multiData && this.multiData.length > 0) {
             var startTime = util.resetTime(new Date(event[this.parent.eventFields.startTime]));

package/src/schedule/actions/keyboard.js

@@ -1273,6 +1273,7 @@ var KeyboardInteraction = /** @class */ (function () {
             navigator.clipboard.writeText(this.clipBoardTextArea.value)
                 .then(function () {
                 _this.clipBoardTextArea.blur();
+                _this.clipBoardTextArea.selectionStart = _this.clipBoardTextArea.selectionEnd;
                 window.getSelection().removeAllRanges();
                 if (e) {
                     var closestAppointment = e.target.closest('.' + cls.APPOINTMENT_CLASS);

package/src/schedule/actions/resize.js

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { addClass, Browser, EventHandler, remove, closest, extend, formatUnit, setStyleAttribute, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { addClass, Browser, EventHandler, closest, extend, formatUnit, setStyleAttribute, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ActionBase } from '../actions/action-base';
 import { MonthEvent } from '../event-renderer/month';
 import * as util from '../base/util';
@@ -269,11 +269,7 @@ var Resize = /** @class */ (function (_super) {
         }
     };
     Resize.prototype.yearEventsRendering = function (event) {
-        var eventWrappers = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CLONE_ELEMENT_CLASS));
-        for (var _i = 0, eventWrappers_1 = eventWrappers; _i < eventWrappers_1.length; _i++) {
-            var wrapper = eventWrappers_1[_i];
-            remove(wrapper);
-        }
+        this.removeDragResizeClones();
         var endDate = new Date(event[this.parent.eventFields.endTime]);
         var monthDiff = 0;
         if (this.parent.activeViewOptions.group.resources.length === 0) {
@@ -328,6 +324,7 @@ var Resize = /** @class */ (function (_super) {
         this.actionObj.action = null;
         this.removeCloneElementClasses();
         this.removeCloneElement();
+        this.removeDragResizeClones();
         this.actionClass('removeClass');
         this.parent.uiStateValues.action = this.parent.uiStateValues.isTapHold = false;
         var resizeArgs = { cancel: false, data: this.getChangedData(), element: this.actionObj.element, event: e };
@@ -352,7 +349,7 @@ var Resize = /** @class */ (function (_super) {
         if (!isTop) {
             offsetValue += this.actionObj.clone.offsetHeight;
         }
-        var minutes = (offsetValue / Math.round(this.actionObj.cellHeight)) * this.actionObj.slotInterval;
+        var minutes = Math.round((offsetValue / Math.round(this.actionObj.cellHeight)) * this.actionObj.slotInterval);
         var element = this.actionObj.clone.offsetParent;
         if (isNullOrUndefined(element)) {
             return;
@@ -418,7 +415,7 @@ var Resize = /** @class */ (function (_super) {
                     var offsetWidth = (Math.round(offset / this.actionObj.cellWidth) *
                         this.actionObj.cellWidth) + (isLeft ? 0 : (this.parent.getElementWidth(this.actionObj.clone) -
                         this.actionObj.cellWidth));
-                    cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
+                    cellIndex = Math.ceil(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
                 cellIndex = this.getIndex(cellIndex);
@@ -436,13 +433,29 @@ var Resize = /** @class */ (function (_super) {
             }
             else {
                 if (!isLeft) {
-                    offset += this.parent.getElementWidth(this.actionObj.clone);
+                    var cloneWidth = this.parent.getElementWidth(this.actionObj.clone);
+                    var pixelsPerInterval = this.actionObj.cellWidth /
+                        (this.actionObj.slotInterval / this.actionObj.interval);
+                    var numIntervals = Math.round(cloneWidth / pixelsPerInterval);
+                    cloneWidth = numIntervals * pixelsPerInterval;
+                    offset = offset + cloneWidth;
                 }
-                var spanMinutes = Math.floor((this.actionObj.slotInterval / this.actionObj.cellWidth) *
+                var spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
                     (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
                 spanMinutes = (isLastCell || (!isLeft && spanMinutes === 0)) ? this.actionObj.slotInterval : spanMinutes;
                 resizeTime = new Date(resizeDate.getTime());
                 resizeTime = new Date(resizeDate.getTime() + (spanMinutes * util.MS_PER_MINUTE));
+                var isCustomResizeInterval = this.actionObj.interval !== this.actionObj.slotInterval;
+                var initialCellTime = new Date(resizeTime.getTime());
+                var intervalInMS = this.actionObj.interval * 60000;
+                if (intervalInMS > 0 && isCustomResizeInterval) {
+                    if (this.resizeEdges.right || this.resizeEdges.left) {
+                        var eventTime = this.resizeEdges.right ? eventEnd : eventStart;
+                        var timeDifferenceMs = initialCellTime.getTime() - eventTime.getTime();
+                        var intervalCount = Math.round(timeDifferenceMs / intervalInMS);
+                        resizeTime = new Date(eventTime.getTime() + intervalCount * intervalInMS);
+                    }
+                }
                 this.updateTimePosition(resizeTime);
             }
         }

package/src/schedule/base/interface.d.ts

@@ -372,6 +372,8 @@ export interface ResourceDetails {
     resourceData: Record<string, any>;
     /** Returns the respective resource fields data. */
     groupData?: Record<string, any>;
+    /** Returns the respective resource date. */
+    date?: Date;
     /** It returns the child level resources in compact mode. */
     resourceChild?: ResourceDetails[];
     /** It returns the Id of current resource in compact mode. */

package/src/schedule/base/resource.js

@@ -379,14 +379,16 @@ var ResourceBase = /** @class */ (function () {
                         resourceId: levelId,
                         resourceName: treeLevel.resourceData[resource.textField],
                         resource: treeLevel.resource,
-                        resourceData: treeLevel.resourceData
+                        resourceData: treeLevel.resourceData,
+                        date: _this.parent.selectedDate
                     };
                 }
                 else {
                     resObj = {
                         type: 'resourceHeader', resource: treeLevel.resource,
                         resourceData: treeLevel.resourceData, groupIndex: groupIndex,
-                        groupOrder: treeLevel.groupOrder
+                        groupOrder: treeLevel.groupOrder,
+                        date: _this.parent.selectedDate
                     };
                     resTreeColl.push(resObj);
                     groupIndex++;
@@ -714,9 +716,15 @@ var ResourceBase = /** @class */ (function () {
         }
         this.lastResourceLevel = headerLevels.slice(-1)[0] || [];
         if (!this.parent.activeViewOptions.group.byDate) {
+            for (var levelIndex = 0; levelIndex < headerLevels.length; levelIndex++) {
+                for (var _d = 0, _e = headerLevels[parseInt(levelIndex.toString(), 10)]; _d < _e.length; _d++) {
+                    var levelItem = _e[_d];
+                    levelItem.date = this.parent.selectedDate;
+                }
+            }
             var index = 0;
-            for (var _d = 0, _e = this.lastResourceLevel; _d < _e.length; _d++) {
-                var lastLevelResource = _e[_d];
+            for (var _f = 0, _g = this.lastResourceLevel; _f < _g.length; _f++) {
+                var lastLevelResource = _g[_f];
                 for (var i = 0; i < lastLevelResource.colSpan; i++) {
                     lastColumnDates[parseInt(index.toString(), 10)].groupIndex = lastLevelResource.groupIndex;
                     index++;
@@ -800,8 +808,8 @@ var ResourceBase = /** @class */ (function () {
                 dateIndex++;
             };
             var this_3 = this;
-            for (var _f = 0, headerDates_1 = headerDates; _f < headerDates_1.length; _f++) {
-                var headerDate = headerDates_1[_f];
+            for (var _h = 0, headerDates_1 = headerDates; _h < headerDates_1.length; _h++) {
+                var headerDate = headerDates_1[_h];
                 _loop_3(headerDate);
             }
             this.resourceDateTree = this.resourceDateTree.filter(function (data) { return data.length > 0; });
@@ -814,19 +822,23 @@ var ResourceBase = /** @class */ (function () {
             return dateHeaderLevels;
         }
         var dateColSpan = 0;
-        for (var _g = 0, _h = levels[0]; _g < _h.length; _g++) {
-            var firstRowTd = _h[_g];
+        for (var _j = 0, _k = levels[0]; _j < _k.length; _j++) {
+            var firstRowTd = _k[_j];
             dateColSpan += firstRowTd.colSpan;
         }
-        for (var _j = 0, headerDates_2 = headerDates; _j < headerDates_2.length; _j++) {
-            var headerDate = headerDates_2[_j];
+        for (var _l = 0, headerDates_2 = headerDates; _l < headerDates_2.length; _l++) {
+            var headerDate = headerDates_2[_l];
             headerDate.colSpan = dateColSpan;
             datesColumn.push(headerDate);
             var resGroup = extend([], levels, null, true);
             for (var k = 0, length_2 = resGroup.length; k < length_2; k++) {
+                for (var _m = 0, _o = resGroup[parseInt(k.toString(), 10)]; _m < _o.length; _m++) {
+                    var resTd = _o[_m];
+                    resTd.date = headerDate.date;
+                }
                 if (k === resGroup.length - 1) {
-                    for (var _k = 0, _l = resGroup[parseInt(k.toString(), 10)]; _k < _l.length; _k++) {
-                        var resTd = _l[_k];
+                    for (var _p = 0, _q = resGroup[parseInt(k.toString(), 10)]; _p < _q.length; _p++) {
+                        var resTd = _q[_p];
                         resTd.date = headerDate.date;
                         resTd.workDays = headerDate.workDays;
                         resTd.startHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.startHourField]) ||

package/src/schedule/base/schedule.d.ts

@@ -1599,8 +1599,8 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * Scrolls the Schedule content area to the specified time.
      *
      * @function scrollTo
-     * @param {string} hour Accepts the time value in the skeleton format of 'Hm'.
-     * @param {Date} scrollDate Accepts the date object value.
+     * @param {string} hour Accepts the time value in the skeleton format of 'Hm'. This parameter specifies the hour and minute to scroll to within the schedule.
+     * @param {Date} scrollDate Accepts a Date object value that represents the specific date to scroll to in the schedule.
      * @returns {void}
      */
     scrollTo(hour: string, scrollDate?: Date): void;

package/src/schedule/base/schedule.js

@@ -917,7 +917,7 @@ var Schedule = /** @class */ (function (_super) {
         addClass(cells, cls.SELECTED_CELL_CLASS);
         if (focusCell) {
             focusCell.setAttribute('tabindex', '0');
-            focusCell.focus({ preventScroll: isPreventScroll || false });
+            focusCell.focus({ preventScroll: isPreventScroll || focusCell.classList.contains('e-all-day-cells') && this.enableAllDayScroll });
         }
     };
     /**
@@ -2170,8 +2170,8 @@ var Schedule = /** @class */ (function (_super) {
      * Scrolls the Schedule content area to the specified time.
      *
      * @function scrollTo
-     * @param {string} hour Accepts the time value in the skeleton format of 'Hm'.
-     * @param {Date} scrollDate Accepts the date object value.
+     * @param {string} hour Accepts the time value in the skeleton format of 'Hm'. This parameter specifies the hour and minute to scroll to within the schedule.
+     * @param {Date} scrollDate Accepts a Date object value that represents the specific date to scroll to in the schedule.
      * @returns {void}
      */
     Schedule.prototype.scrollTo = function (hour, scrollDate) {

package/src/schedule/event-renderer/agenda-base.js

@@ -249,7 +249,7 @@ var AgendaBase = /** @class */ (function (_super) {
                                         groupOrder: resData[parseInt(res.toString(), 10)].groupOrder.slice(0, -1),
                                         resourceData: resData[parseInt(res.toString(), 10)].resourceData,
                                         groupIndex: (lastLevelInfo.length - data.length), className: [cls.RESOURCE_NAME],
-                                        date: agendaDate
+                                        date: this.parent.activeViewOptions.group.byDate ? firstDate : agendaDate
                                     };
                                     lastLevelInfo[parseInt((lastLevelInfo.length - data.length).toString(), 10)].push(tempObj);
                                     tempLastLevelInfo.push(extend({}, tempObj, null, true));
@@ -277,7 +277,8 @@ var AgendaBase = /** @class */ (function (_super) {
                                 tempGroupedData[0].type = 'parentColumnLevel_' + (y + 1);
                                 tempGroupedData[0].resource = topResources[topResources.length - (y + 1)];
                                 tempGroupedData[0].resourceData = data[parseInt(x.toString(), 10)];
-                                tempGroupedData[0].date = agendaDate;
+                                tempGroupedData[0].date = this.parent.activeViewOptions.group.byDate ?
+                                    tempLastLevelInfo[parseInt(u.toString(), 10)].date : agendaDate;
                                 lastLevelInfo[tempGroupedData[0].groupIndex].push(tempGroupedData[0]);
                                 tempGroupedData = [];
                                 totalRowSpan = 0;

package/src/schedule/event-renderer/month.js

@@ -561,8 +561,9 @@ var MonthEvent = /** @class */ (function (_super) {
                             if (!isNullOrUndefined(groupIndex)) {
                                 moreIndicatorElement.setAttribute('data-group-index', groupIndex);
                             }
-                            moreIndicatorElement.style.top = (this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight) + 'px';
+                            moreIndicatorElement.style.top = (this.cellHeight - this.monthHeaderHeight) + 'px';
                             moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
+                            moreIndicatorElement.style.transform = 'translateY(-100%)';
                             this.renderElement(this.workCells[day + i], moreIndicatorElement);
                             EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                         }

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

@@ -318,10 +318,11 @@ var TimelineEvent = /** @class */ (function (_super) {
             if (!isNullOrUndefined(groupIndex)) {
                 moreIndicatorElement.setAttribute('data-group-index', groupIndex);
             }
-            moreIndicatorElement.style.top = top + appArea + 'px';
+            moreIndicatorElement.style.top = top + this.cellHeight + 'px';
             moreIndicatorElement.style.width = 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';
+            moreIndicatorElement.style.transform = 'translateY(-100%)';
             this.renderElement(cellTd, moreIndicatorElement);
             EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
         }

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

@@ -210,7 +210,7 @@ var VerticalEvent = /** @class */ (function (_super) {
             var appWidth = eventObj.IsBlock ? '99%' : '100%';
             setStyleAttribute(appointmentElement, { 'width': appWidth, 'height': blockHeight, 'top': blockTop });
             var index = this.getDayIndex(dayIndex, resource, dayCount);
-            var appLeft = eventObj.IsBlock ? '0.5px' : '0px';
+            var appLeft = eventObj.IsBlock ? '1px' : '0px';
             this.appendEvent(eventObj, appointmentElement, index, appLeft);
         }
     };

package/src/schedule/event-renderer/year.js

@@ -466,10 +466,10 @@ var YearEvent = /** @class */ (function (_super) {
         }
         var moreIndicator = this.getMoreIndicatorElement(count, startDate, endDate);
         var rowTr = this.parent.element.querySelector(".e-content-wrap tr:nth-child(" + (row + 1) + ")");
-        var top = rowTr.offsetTop + (this.cellHeight - this.moreIndicatorHeight);
+        var top = rowTr.offsetTop + this.cellHeight;
         left = (Math.floor(left / this.cellWidth) * this.cellWidth);
         right = (Math.floor(right / this.cellWidth) * this.cellWidth);
-        setStyleAttribute(moreIndicator, { 'width': this.cellWidth + 'px', 'left': left + 'px', 'right': right + 'px', 'top': top + 'px' });
+        setStyleAttribute(moreIndicator, { 'width': this.cellWidth + 'px', 'left': left + 'px', 'right': right + 'px', 'top': top + 'px', 'transform': 'translateY(-100%)' });
         if (!isNullOrUndefined(index)) {
             moreIndicator.setAttribute('data-group-index', index.toString());
         }

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

@@ -176,14 +176,18 @@ var ViewBase = /** @class */ (function () {
         }
     };
     ViewBase.prototype.getHeaderBarHeight = function () {
-        var headerBarHeight = 2;
+        var computedStyle = getComputedStyle(this.parent.element);
+        var borderTop = parseFloat(computedStyle.borderTopWidth) || 1;
+        var borderBottom = parseFloat(computedStyle.borderBottomWidth) || 1;
+        var border = Math.round(borderTop + borderBottom);
+        var headerBarHeight = border;
         if (this.parent.headerModule) {
             headerBarHeight += util.getOuterHeight(this.parent.headerModule.getHeaderElement());
         }
         if (this.parent.uiStateValues.isGroupAdaptive) {
             var resHeader = this.parent.element.querySelector('.' + cls.RESOURCE_HEADER_TOOLBAR);
             if (resHeader) {
-                headerBarHeight += resHeader.offsetHeight;
+                headerBarHeight += util.getOuterHeight(resHeader);
             }
         }
         return headerBarHeight;
@@ -471,7 +475,7 @@ var ViewBase = /** @class */ (function () {
     ViewBase.prototype.setResourceHeaderContent = function (tdElement, tdData, className) {
         if (className === void 0) { className = cls.TEXT_ELLIPSIS; }
         if (this.parent.activeViewOptions.resourceHeaderTemplate) {
-            var data = { resource: tdData.resource, resourceData: tdData.resourceData };
+            var data = { resource: tdData.resource, resourceData: tdData.resourceData, date: tdData.date };
             var scheduleId = this.parent.element.id + '_';
             var viewName = this.parent.activeViewOptions.resourceHeaderTemplateName;
             var templateId = scheduleId + viewName + 'resourceHeaderTemplate';

package/styles/bds-lite.css

@@ -307,6 +307,43 @@
   font-weight: 600;
 }
 
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: var(--color-sf-bg-primary);
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  -webkit-transition: none;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+  /* stylelint-disable */
+}
+.e-sidebar.e-right {
+  border-left: 1px solid var(--color-sf-border-secondary) !important;
+  left: auto;
+  right: 0;
+  top: 0;
+}
+.e-sidebar.e-left {
+  border-right: 1px solid var(--color-sf-border-secondary) !important;
+  left: 0;
+  right: auto;
+  top: 0;
+}
+
+.e-backdrop {
+  -webkit-filter: blur(2px) !important;
+          filter: blur(2px) !important;
+}
+
+.e-sidebar-overlay {
+  backdrop-filter: blur(2px) !important;
+}
+
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e765";
 }
@@ -2439,13 +2476,18 @@
   display: -ms-flexbox;
   display: flex;
 }
-.e-schedule .e-month-agenda-view .e-subject {
+.e-schedule .e-month-agenda-view .e-subject,
+.e-schedule .e-month-agenda-view .e-inline-subject {
   color: var(--color-sf-text-primary);
   font-size: 14px;
   line-height: 26px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.e-schedule .e-month-agenda-view .e-inline-subject {
+  font-weight: normal;
+  padding-top: 0;
+}
 .e-schedule .e-month-agenda-view .e-recurrence-icon,
 .e-schedule .e-month-agenda-view .e-recurrence-edit-icon {
   color: var(--color-sf-text-tertiary);
@@ -2552,6 +2594,7 @@
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
   font-size: 16px;
+  line-height: unset;
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-day {
   font-size: 12px;
@@ -3451,9 +3494,6 @@
   -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
           box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
   color: var(--color-sf-on-brand-solid-primary);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   height: 38px;
   width: 100px;
   z-index: 9;
@@ -3503,10 +3543,7 @@
   display: none;
 }
 .e-appointment.e-schedule-event-clone.e-month-event .e-appointment-details .e-subject {
-  padding: 3px 2px;
-}
-.e-appointment.e-schedule-event-clone.e-month-event .e-appointment-details .e-time {
-  display: none;
+  padding: 0;
 }
 
 .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.e-schedule-event-clone .e-appointment-details .e-subject {

package/styles/bds-lite.scss

@@ -1,18 +1,18 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
-@import 'ej2-navigations/styles/treeview/bds-definition.scss';
-@import 'ej2-inputs/styles/input/bds-definition.scss';
-@import 'ej2-inputs/styles/numerictextbox/bds-definition.scss';
-@import 'ej2-calendars/styles/calendar/bds-definition.scss';
-@import 'ej2-calendars/styles/datepicker/bds-definition.scss';
-@import 'ej2-calendars/styles/datetimepicker/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/multi-select/bds-definition.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'recurrence-editor/bds-definition.scss';
-@import 'schedule/bds-definition.scss';
-@import 'schedule/icons/bds.scss';
-@import 'schedule/all.scss';
-@import 'ej2-buttons/styles/radio-button/bds-definition.scss';
-@import 'recurrence-editor/all.scss';
+@use 'ej2-navigations/styles/toolbar/bds-definition' as *;
+@use 'ej2-navigations/styles/treeview/bds-definition' as *;
+@use 'ej2-inputs/styles/input/bds-definition' as *;
+@use 'ej2-inputs/styles/numerictextbox/bds-definition' as *;
+@use 'ej2-calendars/styles/calendar/bds-definition' as *;
+@use 'ej2-calendars/styles/datepicker/bds-definition' as *;
+@use 'ej2-calendars/styles/datetimepicker/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/multi-select/bds-definition' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'recurrence-editor/bds-definition' as *;
+@use 'ej2-navigations/styles/sidebar/bds-definition' as *;
+@use 'schedule/bds-definition' as *;
+@use 'schedule/icons/bds' as *;
+@use 'schedule/all' as *;
+@use 'ej2-buttons/styles/radio-button/bds-definition' as *;
+@use 'recurrence-editor/all' as *;