@syncfusion/ej2-schedule 22.2.12 → 23.1.38

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

@@ -50,40 +50,54 @@ var EventWindow = /** @class */ (function () {
         };
         if (this.parent.isAdaptive) {
             dialogModel.cssClass = cls.EVENT_WINDOW_DIALOG_CLASS + ' ' + cls.DEVICE_CLASS;
-            dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
-                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                    this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            }
         }
         else {
-            dialogModel.buttons = [{
-                    buttonModel: {
-                        content: this.l10n.getConstant('deleteButton'), cssClass: cls.DELETE_EVENT_CLASS,
-                        disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
-                    },
-                    click: this.eventDelete.bind(this)
-                }, {
-                    buttonModel: {
-                        content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS,
-                        isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
-                    },
-                    click: this.eventSave.bind(this)
-                }, {
-                    buttonModel: { cssClass: cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
-                    click: this.dialogClose.bind(this)
-                }];
-            dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            if (!this.parent.editorFooterTemplate) {
+                this.renderDialogButtons(dialogModel);
+            }
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            }
         }
         this.dialogObject = new Dialog(dialogModel, this.element);
         if (this.dialogObject.element.querySelector('.e-dlg-closeicon-btn')) {
             this.dialogObject.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));
         }
+        this.addEventHandlers();
         addClass([this.element.parentElement], cls.EVENT_WINDOW_DIALOG_CLASS + '-container');
-        if (this.parent.isAdaptive) {
-            EventHandler.add(this.element.querySelector('.' + cls.EVENT_WINDOW_BACK_ICON_CLASS), 'click', this.dialogClose, this);
-            EventHandler.add(this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS), 'click', this.eventSave, this);
-        }
         EventHandler.add(this.dialogObject.element, 'keydown', this.preventEventSave, this);
         this.applyFormValidation();
     };
+    EventWindow.prototype.renderDialogButtons = function (dialogButton) {
+        dialogButton.buttons = [{
+                buttonModel: {
+                    content: this.l10n.getConstant('deleteButton'), cssClass: cls.DELETE_EVENT_CLASS,
+                    disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
+                },
+                click: this.eventDelete.bind(this)
+            }, {
+                buttonModel: {
+                    content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS,
+                    isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
+                },
+                click: this.eventSave.bind(this)
+            }, {
+                buttonModel: { cssClass: cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
+                click: this.dialogClose.bind(this)
+            }];
+    };
+    EventWindow.prototype.addEventHandlers = function () {
+        var backIcon = this.element.querySelector('.' + cls.EVENT_WINDOW_BACK_ICON_CLASS);
+        var saveIcon = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS);
+        if (this.parent.isAdaptive && !isNullOrUndefined(backIcon) && !isNullOrUndefined(saveIcon)) {
+            EventHandler.add(backIcon, 'click', this.dialogClose, this);
+            EventHandler.add(saveIcon, 'click', this.eventSave, this);
+        }
+    };
     EventWindow.prototype.refresh = function () {
         this.destroy(true);
         this.renderEventWindow();
@@ -127,6 +141,23 @@ var EventWindow = /** @class */ (function () {
             }
             data = eventObj;
         }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement(data);
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader(data);
+            }
+        }
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter(data);
+        }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate) || !isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.dataBind();
+            this.addEventHandlers();
+        }
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
             this.renderFormElements(this.element.querySelector('.e-schedule-form'), data);
         }
@@ -157,6 +188,65 @@ var EventWindow = /** @class */ (function () {
         this.dialogObject.dataBind();
         this.applyFormValidation();
     };
+    EventWindow.prototype.setDialogHeader = function () {
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement();
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader();
+            }
+        }
+        else if (this.parent.isAdaptive) {
+            this.dialogObject.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+        }
+        else {
+            this.dialogObject.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+        }
+        this.dialogObject.dataBind();
+        this.addEventHandlers();
+    };
+    EventWindow.prototype.setDialogFooter = function () {
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter();
+        }
+        else if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.renderDialogButtons(this.dialogObject);
+        }
+        else if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.footerTemplate = null;
+        }
+        this.dialogObject.dataBind();
+    };
+    EventWindow.prototype.createAdaptiveHeaderElement = function (data) {
+        var header = createElement('div', { className: 'e-title-header' });
+        var headerBackIcon = createElement('div', { className: 'e-back-icon e-icons' });
+        header.appendChild(headerBackIcon);
+        var headerTemplate = this.getDialogHeader(data);
+        header.appendChild(headerTemplate);
+        var headerSaveIcon = createElement('div', { className: 'e-save-icon e-icons' });
+        header.appendChild(headerSaveIcon);
+        return header;
+    };
+    EventWindow.prototype.getDialogHeader = function (args) {
+        var headerTemplate = [];
+        var headerTemplateId = this.parent.element.id + '_editorHeaderTemplate';
+        var temHeaderDiv = document.createElement('div');
+        headerTemplate = [].slice.call(this.parent.getEditorHeaderTemplate()(args || {}, this.parent, 'editorHeaderTemplate', headerTemplateId, false));
+        append(headerTemplate, temHeaderDiv);
+        return temHeaderDiv;
+    };
+    EventWindow.prototype.getDialogFooter = function (args) {
+        var footerTemplate = [];
+        var footerTemplateId = this.parent.element.id + '_editorFooterTemplate';
+        var temFooterDiv = document.createElement('div');
+        footerTemplate = [].slice.call(this.parent.getEditorFooterTemplate()(args || {}, this.parent, 'editorFooterTemplate', footerTemplateId, false));
+        append(footerTemplate, temFooterDiv);
+        return temFooterDiv;
+    };
     EventWindow.prototype.preventEventSave = function (e) {
         if (this.parent && !this.parent.allowKeyboardInteraction && e.code === 'Enter') {
             this.isEnterKey = true;
@@ -430,9 +520,9 @@ var EventWindow = /** @class */ (function () {
         var resourceDiv = this.createDivElement(value + '-container' + ' ' + 'e-resources');
         var resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
         resourceDiv.appendChild(resourceInput);
-        function resourceTemplate(data) {
+        var resourceTemplate = function (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({
@@ -785,7 +875,9 @@ var EventWindow = /** @class */ (function () {
             this.renderRepeatDialog();
         }
         this.element.querySelector('.' + cls.FORM_CLASS).removeAttribute('data-id');
-        this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        }
         eventObj.Timezone = false;
         this.repeatStartDate = eventObj[this.fields.startTime];
         this.repeatRule = '';
@@ -1025,10 +1117,12 @@ var EventWindow = /** @class */ (function () {
         if (!this.parent.eventSettings.allowEditing) {
             return;
         }
-        if (!this.parent.isAdaptive) {
+        if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
             removeClass([this.element.querySelector('.' + cls.DELETE_EVENT_CLASS)], cls.DISABLE_CLASS);
         }
-        this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        }
         this.element.querySelector('.' + cls.FORM_CLASS).setAttribute('data-id', eventObj[this.fields.id].toString());
         if (isNullOrUndefined(this.parent.editorTemplate)) {
             eventObj = extend({}, eventObj, null, true);
@@ -1851,7 +1945,7 @@ var EventWindow = /** @class */ (function () {
     };
     EventWindow.prototype.destroy = function (isIgnore) {
         if (this.parent && !this.parent.isDestroyed) {
-            this.parent.resetTemplates(['editorTemplate']);
+            this.parent.resetTemplates(['editorTemplate', 'editorHeaderTemplate', 'editorFooterTemplate']);
         }
         this.destroyComponents();
         if (this.recurrenceEditor) {

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

@@ -317,6 +317,9 @@ var QuickPopups = /** @class */ (function () {
                         'aria-label': this_1.parent.getAnnouncementString(eventData)
                     }
                 });
+                if (eventData[fields.isReadonly]) {
+                    addClass([appointmentElement], 'e-read-only');
+                }
                 var templateElement = void 0;
                 if (!isNullOrUndefined(this_1.parent.activeViewOptions.eventTemplate)) {
                     var tempId = this_1.parent.element.id + '_' + this_1.parent.activeViewOptions.eventTemplateName + 'eventTemplate';

package/styles/bootstrap-dark.css

@@ -3626,6 +3626,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/bootstrap.css

@@ -3626,6 +3626,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/bootstrap4.css

@@ -3705,6 +3705,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/bootstrap5-dark.css

@@ -3679,6 +3679,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/bootstrap5.css

@@ -3679,6 +3679,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/fabric-dark.css

@@ -3593,6 +3593,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/fabric.css

@@ -3588,6 +3588,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/fluent-dark.css

@@ -3656,6 +3656,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #1b1a19;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/fluent.css

@@ -3656,6 +3656,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/highcontrast-light.css

@@ -3670,6 +3670,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/highcontrast.css

@@ -3674,6 +3674,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 @keyframes tbar-popup-shadow {
   0% {
     border-color: rgba(255, 255, 255, 0.5);
@@ -3615,6 +3614,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 /*! component's theme wise override definitions and variables */
 @keyframes tbar-popup-shadow {
   0% {
@@ -3651,6 +3650,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/material3-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;
@@ -2574,7 +2573,7 @@
   line-height: 18px;
   margin: 4px 0;
   min-width: 18px;
-  padding: 8px;
+  padding: 0 8px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
@@ -3718,6 +3717,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: rgba(var(--color-sf-surface));
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/material3-dark.scss

@@ -1,4 +1,4 @@
 
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 @import 'schedule/material3-dark.scss';
 @import 'recurrence-editor/material3-dark.scss';

package/styles/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;
@@ -2630,7 +2629,7 @@
   line-height: 18px;
   margin: 4px 0;
   min-width: 18px;
-  padding: 8px;
+  padding: 0 8px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
@@ -3774,6 +3773,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: rgba(var(--color-sf-surface));
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,

package/styles/material3.scss

@@ -1,4 +1,4 @@
 
-@import 'ej2-base/styles/material3-definition.scss';
+
 @import 'schedule/material3.scss';
 @import 'recurrence-editor/material3.scss';

package/styles/recurrence-editor/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import 'ej2-inputs/styles/numerictextbox/bootstrap-dark-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
 @import 'ej2-buttons/styles/radio-button/bootstrap-dark-definition.scss';

package/styles/recurrence-editor/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import 'ej2-inputs/styles/numerictextbox/bootstrap-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap-definition.scss';
 @import 'ej2-buttons/styles/radio-button/bootstrap-definition.scss';

package/styles/recurrence-editor/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import 'ej2-inputs/styles/numerictextbox/bootstrap4-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
 @import 'ej2-buttons/styles/radio-button/bootstrap4-definition.scss';

package/styles/recurrence-editor/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import 'ej2-inputs/styles/numerictextbox/bootstrap5-dark-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
 @import 'ej2-buttons/styles/radio-button/bootstrap5-dark-definition.scss';

package/styles/recurrence-editor/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import 'ej2-inputs/styles/numerictextbox/bootstrap5-definition.scss';
 @import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
 @import 'ej2-buttons/styles/radio-button/bootstrap5-definition.scss';

package/styles/recurrence-editor/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import 'ej2-inputs/styles/numerictextbox/fabric-dark-definition.scss';
 @import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
 @import 'ej2-buttons/styles/radio-button/fabric-dark-definition.scss';