@syncfusion/ej2-schedule 31.2.12 → 32.1.19

package/dist/global/index.d.ts

@@ -1,12 +1,3 @@
-/*!
-*  filename: index.d.ts
-*  version : 31.2.12
-*  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
-*  licensing@syncfusion.com. Any infringement will be prosecuted under
-*  applicable laws. 
-*/
 import * as _schedule from '@syncfusion/ej2-schedule';
 
 export declare namespace ej {

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "31.2.12",
+  "version": "32.1.19",
   "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.12",
-    "@syncfusion/ej2-data": "~31.2.12",
-    "@syncfusion/ej2-dropdowns": "~31.2.12",
-    "@syncfusion/ej2-excel-export": "~31.2.12",
-    "@syncfusion/ej2-inputs": "~31.2.12",
-    "@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.19",
+    "@syncfusion/ej2-data": "~32.1.19",
+    "@syncfusion/ej2-dropdowns": "~32.1.19",
+    "@syncfusion/ej2-excel-export": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@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

@@ -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;

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/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/agenda.js

@@ -320,9 +320,10 @@ var Agenda = /** @class */ (function (_super) {
             }
             else {
                 for (var a = 0, length_1 = liCollection.length; a < length_1; a++) {
+                    var targetRect = target.getBoundingClientRect();
                     li = liCollection[parseInt(a.toString(), 10)];
                     liDetails = li.getBoundingClientRect();
-                    if (liDetails.top >= 0) {
+                    if (targetRect.top < liDetails.top) {
                         filterElement = closest(li, '.' + cls.AGENDA_CELLS_CLASS);
                         break;
                     }

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 *;

package/styles/bds.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.scss

@@ -1,20 +1,20 @@
-@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 'schedule/bigger.scss';
-@import 'ej2-buttons/styles/radio-button/bds-definition.scss';
-@import 'recurrence-editor/all.scss';
-@import 'recurrence-editor/bigger.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 'schedule/bigger' as *;
+@use 'ej2-buttons/styles/radio-button/bds-definition' as *;
+@use 'recurrence-editor/all' as *;
+@use 'recurrence-editor/bigger' as *;

package/styles/bootstrap-dark-lite.css

@@ -2221,13 +2221,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: #f0f0f0;
   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: #8d8d8d;
@@ -2334,6 +2339,7 @@
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-date {
   font-size: 18px;
+  line-height: unset;
 }
 .e-schedule .e-agenda-view .e-day-date-header .e-m-day {
   font-size: 13px;
@@ -3233,9 +3239,6 @@
   -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
           box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
   color: #fff;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
   height: 38px;
   width: 100px;
   z-index: 9;
@@ -3285,10 +3288,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/bootstrap-dark-lite.scss

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