@syncfusion/ej2-schedule 19.3.46 → 19.4.38

package/src/schedule/base/schedule.js

@@ -45,7 +45,7 @@ import { Group } from '../models/group';
 import { Resources } from '../models/resources';
 import { Gregorian, Islamic } from '../../common/calendar-util';
 import { ResourceBase } from '../base/resource';
-import { Timezone } from '../timezone/timezone';
+import { Timezone, timezoneData } from '../timezone/timezone';
 import * as events from '../base/constant';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
@@ -331,13 +331,19 @@ var Schedule = /** @class */ (function (_super) {
             timeFormat: this.internalTimeFormat,
             group: group,
             headerRows: this.headerRows,
-            orientation: 'Horizontal'
+            orientation: 'Horizontal',
+            numberOfWeeks: 0,
+            displayDate: null
         };
         var viewOptions = this.viewCollections[this.viewIndex];
         var viewsData = extend(scheduleOptions, viewOptions, undefined, true);
         if (this.firstDayOfWeek !== 0 && viewOptions.firstDayOfWeek && this.firstDayOfWeek !== viewOptions.firstDayOfWeek) {
             viewsData.firstDayOfWeek = this.firstDayOfWeek;
         }
+        if (viewsData.displayDate) {
+            viewsData.displayDate = viewsData.displayDate instanceof Date ? new Date(viewsData.displayDate.getTime()) :
+                new Date(viewsData.displayDate);
+        }
         return viewsData;
     };
     Schedule.prototype.initializeDataModule = function () {
@@ -650,7 +656,7 @@ var Schedule = /** @class */ (function (_super) {
         if (this && isNullOrUndefined(this.uiStateValues) || !(this.enablePersistence)) {
             this.uiStateValues = {
                 expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,
-                isIgnoreOccurrence: false, groupIndex: 0, action: false, isBlock: false
+                isIgnoreOccurrence: false, groupIndex: 0, action: false, isBlock: false, isCustomMonth: true
             };
         }
         this.activeCellsData = { startTime: this.getCurrentTime(), endTime: this.getCurrentTime(), isAllDay: false };
@@ -749,7 +755,9 @@ var Schedule = /** @class */ (function (_super) {
             beginFrom: 'Begin From',
             endAt: 'Ends At',
             expandAllDaySection: 'Expand-all-day-section',
-            collapseAllDaySection: 'Collapse-all-day-section'
+            collapseAllDaySection: 'Collapse-all-day-section',
+            searchTimezone: 'Search Timezone',
+            noRecords: 'No records found'
         };
     };
     Schedule.prototype.wireEvents = function () {
@@ -1468,6 +1476,11 @@ var Schedule = /** @class */ (function (_super) {
                     this.keyboardInteractionModule = new KeyboardInteraction(this);
                 }
                 break;
+            case 'timezoneDataSource':
+                if (this.eventWindow) {
+                    this.eventWindow.refresh();
+                }
+                break;
             case 'editorTemplate':
                 if (!isNullOrUndefined(this.editorTemplate)) {
                     this.editorTemplateFn = this.templateParser(this.editorTemplate);
@@ -1611,6 +1624,8 @@ var Schedule = /** @class */ (function (_super) {
                         this.eventWindow.refresh();
                     }
                     break;
+                case 'spannedEventPlacement':
+                case 'minimumEventDuration':
                 case 'enableMaxHeight':
                 case 'enableIndicator':
                     this.refreshEvents(false);
@@ -1985,7 +2000,7 @@ var Schedule = /** @class */ (function (_super) {
      */
     Schedule.prototype.exportToExcel = function (excelExportOptions) {
         if (this.excelExportModule) {
-            this.excelExportModule.initializeExcelExport(excelExportOptions || {});
+            this.excelExportModule.initializeExcelExport(excelExportOptions);
         }
         else {
             throw Error('Inject ExcelExport module');
@@ -2170,6 +2185,9 @@ var Schedule = /** @class */ (function (_super) {
             this.crudModule.refreshDataManager();
         }
         else {
+            if (this.activeViewOptions && this.activeViewOptions.eventTemplate) {
+                this.resetTemplates(['eventTemplate']);
+            }
             var eventsData = this.eventsData || [];
             var blockData = this.blockData || [];
             var data = eventsData.concat(blockData);
@@ -2427,6 +2445,7 @@ var Schedule = /** @class */ (function (_super) {
             this.eventTooltip = null;
         }
         this.destroyPopups();
+        this.hideSpinner();
         this.unWireEvents();
         this.destroyHeaderModule();
         if (this.eventTooltip) {
@@ -2638,6 +2657,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Complex({}, EventSettings)
     ], Schedule.prototype, "eventSettings", void 0);
+    __decorate([
+        Property(timezoneData)
+    ], Schedule.prototype, "timezoneDataSource", void 0);
     __decorate([
         Property()
     ], Schedule.prototype, "resourceHeaderTemplate", void 0);

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

@@ -41,3 +41,7 @@ export declare type TemplateType = 'Both' | 'Cell' | 'Event';
  * An enum that holds the different type of week number options in the scheduler.
  */
 export declare type WeekRule = 'FirstDay' | 'FirstFourDayWeek' | 'FirstFullWeek';
+/**
+ * An enum that holds the options to render the spanned events in all day row or time slot.
+ */
+export declare type SpannedEventPlacement = 'AllDayRow' | 'TimeSlot';

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

@@ -2,6 +2,7 @@
  * Schedule common utilities
  */
 export declare const WEEK_LENGTH: number;
+export declare const DEFAULT_WEEKS: number;
 export declare const MS_PER_DAY: number;
 export declare const MS_PER_MINUTE: number;
 /**

package/src/schedule/base/util.js

@@ -4,6 +4,7 @@ import { createElement, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
  * Schedule common utilities
  */
 export var WEEK_LENGTH = 7;
+export var DEFAULT_WEEKS = 6;
 export var MS_PER_DAY = 86400000;
 export var MS_PER_MINUTE = 60000;
 /**

package/src/schedule/event-renderer/event-base.d.ts

@@ -17,6 +17,7 @@ export declare class EventBase {
      */
     constructor(parent: Schedule);
     processData(events: Record<string, any>[], timeZonePropChanged?: boolean, oldTimezone?: string): Record<string, any>[];
+    updateEventDateTime(eventData: Record<string, any>): Record<string, any>;
     getProcessedEvents(eventCollection?: Record<string, any>[]): Record<string, any>[];
     timezonePropertyChange(oldTimezone: string): void;
     timezoneConvert(eventData: Record<string, any>): void;
@@ -80,6 +81,7 @@ export declare class EventBase {
         [key: string]: Date;
     }): boolean;
     allDayExpandScroll(dateHeader: HTMLElement, heightPropChanged?: boolean): void;
+    updateEventMinimumDuration(startEndHours: Record<string, Date>, startTime: Date, endTime: Date): Record<string, Date>;
     private unWireEvents;
     destroy(): void;
 }

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

@@ -37,12 +37,7 @@ var EventBase = /** @class */ (function () {
             if (generateID) {
                 event_1[fields.id] = temp++;
             }
-            if (typeof event_1[fields.startTime] === 'string') {
-                event_1[fields.startTime] = util.getDateFromString(event_1[fields.startTime]);
-            }
-            if (typeof event_1[fields.endTime] === 'string') {
-                event_1[fields.endTime] = util.getDateFromString(event_1[fields.endTime]);
-            }
+            event_1 = this_1.updateEventDateTime(event_1);
             if (timeZonePropChanged) {
                 this_1.processTimezoneChange(event_1, oldTimezone);
             }
@@ -119,6 +114,15 @@ var EventBase = /** @class */ (function () {
         this.parent.blockProcessed = blockData;
         return eventData;
     };
+    EventBase.prototype.updateEventDateTime = function (eventData) {
+        if (typeof eventData[this.parent.eventFields.startTime] === 'string') {
+            eventData[this.parent.eventFields.startTime] = util.getDateFromString(eventData[this.parent.eventFields.startTime]);
+        }
+        if (typeof eventData[this.parent.eventFields.endTime] === 'string') {
+            eventData[this.parent.eventFields.endTime] = util.getDateFromString(eventData[this.parent.eventFields.endTime]);
+        }
+        return eventData;
+    };
     EventBase.prototype.getProcessedEvents = function (eventCollection) {
         if (eventCollection === void 0) { eventCollection = this.parent.eventsData; }
         var processed = [];
@@ -636,7 +640,7 @@ var EventBase = /** @class */ (function () {
         var isAllDay = event[fieldMapping.isAllDay];
         var isFullDay = ((event[fieldMapping.endTime].getTime() - event[fieldMapping.startTime].getTime())
             / util.MS_PER_DAY) >= 1;
-        return (isAllDay || isFullDay) ? true : false;
+        return (isAllDay || (this.parent.eventSettings.spannedEventPlacement !== 'TimeSlot' && isFullDay)) ? true : false;
     };
     EventBase.prototype.addEventListener = function () {
         this.parent.on(event.documentClick, this.appointmentBorderRemove, this);
@@ -726,7 +730,8 @@ var EventBase = /** @class */ (function () {
     EventBase.prototype.eventClick = function (eventData) {
         var _this = this;
         var target = eventData.target;
-        if (target.classList.contains(cls.DRAG_CLONE_CLASS) || target.classList.contains(cls.RESIZE_CLONE_CLASS)) {
+        if (target.classList.contains(cls.DRAG_CLONE_CLASS) || target.classList.contains(cls.RESIZE_CLONE_CLASS) ||
+            target.classList.contains(cls.INLINE_SUBJECT_CLASS)) {
             return;
         }
         if ((eventData.ctrlKey || eventData.metaKey) && eventData.which === 1 && this.parent.keyboardInteractionModule) {
@@ -1207,13 +1212,28 @@ var EventBase = /** @class */ (function () {
         indentHeight = dateHeader.offsetHeight - indentHeight;
         this.parent.element.querySelector('.' + cls.ALLDAY_CELLS_CLASS).style.height = (indentHeight / 12) + 'em';
         var content = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-        if (this.parent.uiStateValues.expand && (content.offsetWidth - content.clientWidth > 0 || heightPropChanged)) {
+        if (this.parent.uiStateValues.expand && (content.offsetWidth - content.clientWidth > 0 || heightPropChanged || this.parent.element.classList.contains(cls.DEVICE_CLASS))) {
             addClass([dateHeader], cls.ALLDAY_APPOINTMENT_SCROLL);
         }
         else {
             removeClass([dateHeader], cls.ALLDAY_APPOINTMENT_SCROLL);
         }
     };
+    EventBase.prototype.updateEventMinimumDuration = function (startEndHours, startTime, endTime) {
+        var eventDuration = (util.getUniversalTime(endTime) - util.getUniversalTime(startTime)) / util.MS_PER_MINUTE;
+        if (eventDuration < this.parent.eventSettings.minimumEventDuration) {
+            var tempEnd = new Date(startTime);
+            tempEnd.setMinutes(tempEnd.getMinutes() + this.parent.eventSettings.minimumEventDuration);
+            endTime = tempEnd;
+            if (endTime.getTime() > startEndHours.endHour.getTime()) {
+                var tempStart = new Date(startEndHours.endHour.getTime());
+                tempStart.setMinutes(tempStart.getMinutes() - this.parent.eventSettings.minimumEventDuration);
+                startTime = tempStart;
+                endTime = startEndHours.endHour;
+            }
+        }
+        return { startDate: startTime, endDate: endTime };
+    };
     EventBase.prototype.unWireEvents = function () {
         var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {

package/src/schedule/event-renderer/inline-edit.js

@@ -18,11 +18,11 @@ var InlineEdit = /** @class */ (function () {
         if (this.parent.quickPopup) {
             this.parent.quickPopup.quickPopupHide();
         }
-        var moreWrapper = this.parent.element.querySelector('.e-more-popup-wrapper ');
-        if (moreWrapper && moreWrapper.classList.contains(cls.POPUP_OPEN)) {
-            this.parent.quickPopup.morePopup.hide();
-        }
         if (args.type === 'Cell') {
+            var moreWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS);
+            if (moreWrapper && moreWrapper.classList.contains(cls.POPUP_OPEN)) {
+                this.parent.quickPopup.morePopup.hide();
+            }
             this.removeInlineAppointmentElement();
             this.cellEdit(args);
         }
@@ -85,8 +85,8 @@ var InlineEdit = /** @class */ (function () {
                     '.e-inner-wrap' : '.e-appointment-details';
                 args.element.querySelector(elementSelector).insertBefore(inlineSubject, timeEle);
             }
+            inlineSubject.focus();
         }
-        inlineSubject.focus();
         inlineSubject.setSelectionRange(subject.length, subject.length);
     };
     InlineEdit.prototype.createVerticalViewInline = function (saveObj, dayIndex, resIndex, daysCount) {
@@ -182,6 +182,9 @@ var InlineEdit = /** @class */ (function () {
         if (target && target.value !== '') {
             this.inlineCrudActions(target);
         }
+        else {
+            this.removeInlineAppointmentElement();
+        }
     };
     InlineEdit.prototype.inlineCrudActions = function (target) {
         if (closest(target, '.' + cls.INLINE_APPOINTMENT_CLASS)) {

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

@@ -124,10 +124,10 @@ var MonthEvent = /** @class */ (function (_super) {
                     this.parent.virtualScrollModule.updateVirtualScrollHeight();
                 }
             }
-            this.parent.notify(events.scrollUiUpdate, data);
             if (!this.parent.enablePersistence) {
                 this.parent.notify(events.contentReady, {});
             }
+            this.parent.notify(events.scrollUiUpdate, data);
             if (this.parent.currentView === 'Month' && this.parent.showWeekNumber) {
                 var totalCells_1 = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
                 var weekNumberCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.WEEK_NUMBER_CLASS));
@@ -175,7 +175,7 @@ var MonthEvent = /** @class */ (function (_super) {
         this.cellHeight = cellDetail.height;
         this.dateRender = dateRender;
         var filteredDates = this.getRenderedDates(dateRender);
-        this.getSlotDates(workDays);
+        this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
         this.processBlockEvents(blockList, resIndex, resData);
         for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
             var event_1 = eventsList_1[_i];

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

@@ -141,6 +141,10 @@ var TimelineEvent = /** @class */ (function (_super) {
         var eventData = event.data;
         startTime = this.getStartTime(event, eventData);
         endTime = this.getEndTime(event, eventData);
+        var startEndHours = util.getStartEndHours(event[this.fields.startTime], this.startHour, this.endHour);
+        var eventDates = this.updateEventMinimumDuration(startEndHours, startTime, endTime);
+        startTime = eventDates.startDate;
+        endTime = eventDates.endDate;
         this.day = this.parent.getIndexOfDate(this.dateRender, util.resetTime(new Date(startTime.getTime())));
         if (this.day < 0) {
             return;

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

@@ -420,18 +420,21 @@ var VerticalEvent = /** @class */ (function (_super) {
         if (currentDay.length === 0) {
             currentDate = util.resetTime(renderedDate[0]);
         }
-        var fieldMapping = this.parent.eventFields;
-        var startEndHours = util.getStartEndHours(currentDate, this.startHour, this.endHour);
+        var field = this.parent.eventFields;
+        var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
         var event = extend({}, record, null, true);
         event.isSpanned = { isBottom: false, isTop: false };
-        if (record[fieldMapping.startTime].getTime() < startEndHours.startHour.getTime()) {
-            event[fieldMapping.startTime] = startEndHours.startHour;
+        if (record[field.startTime].getTime() < schedule.startHour.getTime()) {
+            event[field.startTime] = schedule.startHour;
             event.isSpanned.isTop = true;
         }
-        if (record[fieldMapping.endTime].getTime() > startEndHours.endHour.getTime()) {
-            event[fieldMapping.endTime] = startEndHours.endHour;
+        if (record[field.endTime].getTime() > schedule.endHour.getTime()) {
+            event[field.endTime] = schedule.endHour;
             event.isSpanned.isBottom = true;
         }
+        var eventDates = this.updateEventMinimumDuration(schedule, event[field.startTime], event[field.endTime]);
+        event[field.startTime] = eventDates.startDate;
+        event[field.endTime] = eventDates.endDate;
         return event;
     };
     VerticalEvent.prototype.renderAllDayEvents = function (eventObj, dayIndex, resource, dayCount, inline) {

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

@@ -489,7 +489,7 @@ var YearEvent = /** @class */ (function (_super) {
                 }
             }
             else {
-                if (((util.resetTime(appStart).getTime() <= dateStart) && (util.resetTime(appEnd).getTime() > dateStart)) ||
+                if (((util.resetTime(appStart).getTime() <= dateStart) && (util.resetTime(appEnd).getTime() >= dateStart)) ||
                     (util.resetTime(appStart).getTime() >= dateStart) && (util.resetTime(appEnd).getTime() <= dateEnd)) {
                     appointmentsList.push(app);
                 }

package/src/schedule/exports/excel-export.d.ts

@@ -6,8 +6,9 @@ import { ExportOptions } from '../base/interface';
 export declare class ExcelExport {
     private parent;
     constructor(parent: Schedule);
-    initializeExcelExport(excelExportOptions: ExportOptions): void;
+    initializeExcelExport(excelExportOptions?: ExportOptions): void;
     private processWorkbook;
+    private getExportColumns;
     protected getModuleName(): string;
     destroy(): void;
 }

package/src/schedule/exports/excel-export.js

@@ -9,10 +9,8 @@ var ExcelExport = /** @class */ (function () {
         this.parent = parent;
     }
     ExcelExport.prototype.initializeExcelExport = function (excelExportOptions) {
-        var _this = this;
-        var exportFields = excelExportOptions.fields || Object.keys(this.parent.eventFields).map(function (field) {
-            return _this.parent.eventFields[field];
-        });
+        if (excelExportOptions === void 0) { excelExportOptions = {}; }
+        var exportColumns = this.getExportColumns(excelExportOptions);
         var exportName = excelExportOptions.fileName || 'Schedule';
         var exportType = excelExportOptions.exportType || 'xlsx';
         var isIncludeOccurrences = excelExportOptions.includeOccurrences || false;
@@ -24,39 +22,44 @@ var ExcelExport = /** @class */ (function () {
         else {
             eventCollection = !isIncludeOccurrences ? this.parent.eventsData : this.parent.eventsProcessed;
         }
-        this.processWorkbook(exportFields, exportName, exportType, eventCollection);
+        this.processWorkbook(exportColumns, exportName, exportType, eventCollection);
     };
     ExcelExport.prototype.processWorkbook = function (fields, name, type, eventCollection) {
         var _this = this;
         var columns = [];
         var rows = [];
         var columnHeader = [];
-        fields.forEach(function (field, i) { return columns.push({ index: i + 1, width: (field === 'Id' ? 20 : 150) }); });
+        fields.forEach(function (field, i) { columns.push({ index: i + 1, width: (field.name === 'Id' ? 50 : 150) }); });
         var style = { fontSize: 12, borders: { color: '#E0E0E0' }, bold: true };
-        fields.forEach(function (field, i) { return columnHeader.push({ index: i + 1, value: field, style: style }); });
+        fields.forEach(function (field, i) { columnHeader.push({ index: i + 1, value: field.text, style: style }); });
         rows.push({ index: 1, cells: columnHeader });
-        var i = 2;
-        var _loop_1 = function (event_1) {
+        eventCollection.forEach(function (event, i) {
             var columnData = [];
             fields.forEach(function (field, n) {
-                var columnRule = { index: n + 1, value: event_1[field] || '' };
-                if (field === _this.parent.eventFields.startTime || field === _this.parent.eventFields.endTime) {
+                var columnRule = { index: n + 1, value: event[field.name] || '' };
+                if (field.name === _this.parent.eventFields.startTime || field.name === _this.parent.eventFields.endTime) {
                     var styleRule = { fontSize: 12, numberFormat: 'm/d/yyyy h:mm AM/PM' };
                     columnRule = extend({}, columnRule, { style: styleRule }, true);
                 }
                 columnData.push(columnRule);
             });
-            rows.push({ index: i, cells: columnData });
-            i++;
-        };
-        for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {
-            var event_1 = eventCollection_1[_i];
-            _loop_1(event_1);
-        }
+            rows.push({ index: i + 2, cells: columnData });
+        });
         var workSheet = [{ columns: columns, rows: rows }];
         var book = new Workbook({ worksheets: workSheet }, type, this.parent.locale);
         book.save(name + '.' + type);
     };
+    ExcelExport.prototype.getExportColumns = function (exportOptions) {
+        var _this = this;
+        var exportColumns = exportOptions.fieldsInfo || [];
+        if (exportColumns.length === 0) {
+            var fields = exportOptions.fields || Object.keys(this.parent.eventFields).map(function (field) {
+                return _this.parent.eventFields[field];
+            });
+            fields.forEach(function (field) { exportColumns.push({ name: field, text: field }); });
+        }
+        return exportColumns;
+    };
     ExcelExport.prototype.getModuleName = function () {
         return 'excelExport';
     };

package/src/schedule/models/event-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { SortComparerFunction } from '../base/interface';import { Field } from './fields';import { FieldModel } from './fields-model';
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { SortComparerFunction } from '../base/interface';import { SpannedEventPlacement } from '../base/type';import { Field } from './fields';import { FieldModel } from './fields-model';
 
 /**
  * Interface for a class EventSettings
@@ -48,6 +48,25 @@ export interface EventSettingsModel {
      */
     enableTooltip?: boolean;
 
+    /**
+     * Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
+     * This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
+     * * AllDayRow
+     * * TimeSlot
+     * {% codeBlock src='schedule/spannedEventPlacement/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'AllDayRow'
+     */
+    spannedEventPlacement?: SpannedEventPlacement;
+
+    /**
+     * Sets a minimum duration for an event where the events are rendered for this minimum duration when the duration of the event is lesser than this value.
+     *  It accepts duration value in minutes. This property is only applicable when the event duration is lesser than this property duration.
+     *
+     * @default 1
+     */
+    minimumEventDuration?: number;
+
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
      *  All the event fields mapped with Schedule dataSource can be accessed within this template code.

package/src/schedule/models/event-settings.d.ts

@@ -1,6 +1,7 @@
 import { ChildProperty } from '@syncfusion/ej2-base';
 import { Query, DataManager } from '@syncfusion/ej2-data';
 import { SortComparerFunction } from '../base/interface';
+import { SpannedEventPlacement } from '../base/type';
 import { FieldModel } from './fields-model';
 /**
  * Holds the configuration of event related options and dataSource binding to Schedule.
@@ -44,6 +45,23 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      * @default false
      */
     enableTooltip: boolean;
+    /**
+     * Defines the option to render the spanned events (more than 24 hours) in either `AllDayRow` or `TimeSlot`. By default it renders in `AllDayRow`.
+     * This property is applicable for `Day`, `Week` and `WorkWeek` views only. The possible values for this property as follows
+     * * AllDayRow
+     * * TimeSlot
+     * {% codeBlock src='schedule/spannedEventPlacement/index.md' %}{% endcodeBlock %}
+     *
+     * @default 'AllDayRow'
+     */
+    spannedEventPlacement: SpannedEventPlacement;
+    /**
+     * Sets a minimum duration for an event where the events are rendered for this minimum duration when the duration of the event is lesser than this value.
+     *  It accepts duration value in minutes. This property is only applicable when the event duration is lesser than this property duration.
+     *
+     * @default 1
+     */
+    minimumEventDuration: number;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto tooltip.
      *  All the event fields mapped with Schedule dataSource can be accessed within this template code.

package/src/schedule/models/event-settings.js

@@ -43,6 +43,12 @@ var EventSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], EventSettings.prototype, "enableTooltip", void 0);
+    __decorate([
+        Property('AllDayRow')
+    ], EventSettings.prototype, "spannedEventPlacement", void 0);
+    __decorate([
+        Property(1)
+    ], EventSettings.prototype, "minimumEventDuration", void 0);
     __decorate([
         Property()
     ], EventSettings.prototype, "tooltipTemplate", void 0);

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

@@ -257,4 +257,23 @@ export interface ViewsModel {
      */
     headerRows?: HeaderRowsModel[];
 
+    /**
+     * This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month.
+     *  Use displayDate property to customize the starting week of month.
+     * {% codeBlock src='schedule/numberOfWeeks/index.md' %}{% endcodeBlock %}
+     *
+     * @default 0
+     * @aspType int
+     */
+    numberOfWeeks?: number;
+
+    /**
+     * Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view.
+     *  If this property value is not set, then the month view will be rendered from the first week of the month.
+     * {% codeBlock src='schedule/displayDate/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    displayDate?: Date;
+
 }

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

@@ -229,4 +229,21 @@ export declare class Views extends ChildProperty<Views> {
      * @default []
      */
     headerRows: HeaderRowsModel[];
+    /**
+     * This property customizes the number of weeks that are shown in month view. By default, it shows all weeks in the current month.
+     *  Use displayDate property to customize the starting week of month.
+     * {% codeBlock src='schedule/numberOfWeeks/index.md' %}{% endcodeBlock %}
+     *
+     * @default 0
+     * @aspType int
+     */
+    numberOfWeeks: number;
+    /**
+     * Specifies the starting week date at an initial rendering of month view. This property is only applicable for month view.
+     *  If this property value is not set, then the month view will be rendered from the first week of the month.
+     * {% codeBlock src='schedule/displayDate/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    displayDate: Date;
 }

package/src/schedule/models/views.js

@@ -113,6 +113,12 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Collection([], HeaderRows)
     ], Views.prototype, "headerRows", void 0);
+    __decorate([
+        Property(0)
+    ], Views.prototype, "numberOfWeeks", void 0);
+    __decorate([
+        Property()
+    ], Views.prototype, "displayDate", void 0);
     return Views;
 }(ChildProperty));
 export { Views };

package/src/schedule/popups/event-window.d.ts

@@ -25,7 +25,6 @@ export declare class EventWindow {
     private duration;
     private isCrudAction;
     private eventWindowTime;
-    private timezoneData;
     private isEnterKey;
     private dialogEvent;
     constructor(parent: Schedule);

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

@@ -26,7 +26,6 @@ var EventWindow = /** @class */ (function () {
         this.parent = parent;
         this.l10n = this.parent.localeObj;
         this.fields = this.parent.eventFields;
-        this.timezoneData = this.parent.tzModule.timezoneData;
         this.eventWindowTime = { startTime: new Date(), endTime: new Date() };
         this.renderEventWindow();
     }
@@ -464,14 +463,15 @@ var EventWindow = /** @class */ (function () {
             allowFiltering: true,
             change: this.onTimezoneChange.bind(this),
             cssClass: this.parent.cssClass || '',
-            dataSource: this.timezoneData,
+            dataSource: this.parent.timezoneDataSource,
             enableRtl: this.parent.enableRtl,
             fields: { text: 'Text', value: 'Value' },
-            filterBarPlaceholder: 'Search Timezone',
+            filterBarPlaceholder: this.parent.localeObj.getConstant('searchTimezone'),
+            noRecordsTemplate: this.parent.localeObj.getConstant('noRecords'),
             filtering: function (e) {
                 var query = new Query();
                 query = (e.text !== '') ? query.where('Text', 'contains', e.text, true) : query;
-                e.updateData(_this.timezoneData, query);
+                e.updateData(_this.parent.timezoneDataSource, query);
             },
             htmlAttributes: { 'title': this.getFieldLabel(value), 'name': fieldName },
             floatLabelType: 'Always',
@@ -1797,7 +1797,6 @@ var EventWindow = /** @class */ (function () {
             this.fields = null;
             this.buttonObj = null;
             this.repeatStatus = null;
-            this.timezoneData = null;
             this.eventWindowTime = null;
         }
     };

package/src/schedule/popups/form-validator.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createElement, remove } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, remove } from '@syncfusion/ej2-base';
 import { FormValidator } from '@syncfusion/ej2-inputs';
 import * as cls from '../base/css-constant';
 /**
@@ -49,6 +49,9 @@ var FieldValidator = /** @class */ (function () {
         if (!elem && !this.ignoreError) {
             this.createTooltip(inputElement, error, id, '');
         }
+        if (!isNullOrUndefined(elem)) {
+            elem.querySelector('.e-error').innerHTML = error.innerHTML;
+        }
     };
     FieldValidator.prototype.createTooltip = function (element, error, name, display) {
         var dlgContent;

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

@@ -907,6 +907,9 @@ var QuickPopups = /** @class */ (function () {
     };
     QuickPopups.prototype.closeClick = function (event) {
         this.dialogEvent = event;
+        if (this.parent.currentView === 'Year' && this.parent.activeCellsData && this.parent.activeCellsData.element) {
+            this.parent.selectCell(this.parent.activeCellsData.element);
+        }
         this.quickPopupHide();
         this.morePopup.hide();
     };