@syncfusion/ej2-schedule 19.3.55 → 19.4.42

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

@@ -730,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) {
@@ -1200,7 +1201,7 @@ var EventBase = /** @class */ (function () {
             eventObj[this.parent.eventFields.endTime].getTime() < schedule.endHour.getTime() && start.getTime() === end.getTime();
         return isHourRange || isSameRange;
     };
-    EventBase.prototype.allDayExpandScroll = function (dateHeader, heightPropChanged) {
+    EventBase.prototype.allDayExpandScroll = function (dateHeader) {
         var indentHeight = 0;
         var headerRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.HEADER_ROW_CLASS));
         headerRows.forEach(function (element) {
@@ -1210,14 +1211,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) {
             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

@@ -170,12 +170,13 @@ var MonthEvent = /** @class */ (function (_super) {
                 setStyleAttribute(cell, { 'height': height_1 + 'px' });
             });
         }
-        var cellDetail = this.workCells.slice(-1)[0].getBoundingClientRect();
+        var cellDetail = this.workCells[this.parent.activeView.isTimelineView() ?
+            0 : this.workCells.length - 1].getBoundingClientRect();
         this.cellWidth = cellDetail.width;
         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

@@ -48,15 +48,6 @@ export interface EventSettingsModel {
      */
     enableTooltip?: boolean;
 
-    /**
-     * 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.
-     * {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
-     *
-     * @default null
-     */
-    tooltipTemplate?: string;
-
     /**
      * 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
@@ -68,6 +59,23 @@ export interface EventSettingsModel {
      */
     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.
+     * {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    tooltipTemplate?: string;
+
     /**
      * Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
      *  grouping is enabled on scheduler.

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

@@ -45,14 +45,6 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      * @default false
      */
     enableTooltip: boolean;
-    /**
-     * 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.
-     * {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
-     *
-     * @default null
-     */
-    tooltipTemplate: string;
     /**
      * 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
@@ -63,6 +55,21 @@ export declare class EventSettings extends ChildProperty<EventSettings> {
      * @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.
+     * {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    tooltipTemplate: string;
     /**
      * Defines the resource name, to decides the color of which particular resource level is to be applied on appointments, when
      *  grouping is enabled on scheduler.

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

@@ -43,12 +43,15 @@ var EventSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], EventSettings.prototype, "enableTooltip", void 0);
-    __decorate([
-        Property()
-    ], EventSettings.prototype, "tooltipTemplate", 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);
     __decorate([
         Property()
     ], EventSettings.prototype, "resourceColorField", 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/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();
     };

package/src/schedule/renderer/agenda.js

@@ -67,7 +67,8 @@ var Agenda = /** @class */ (function (_super) {
             var event_1 = _a[_i];
             delete event_1.generatedDates;
         }
-        var eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ? args.processedData : this.parent.eventsProcessed;
+        var eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ?
+            args.processedData : this.parent.eventsProcessed;
         if (this.parent.uiStateValues.isGroupAdaptive) {
             var resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
             this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);

package/src/schedule/renderer/header-renderer.d.ts

@@ -36,6 +36,7 @@ export declare class HeaderRenderer {
     setCalendarTimezone(): void;
     private calculateViewIndex;
     private toolbarClickHandler;
+    private hasSelectedDate;
     getHeaderElement(): HTMLElement;
     updateHeaderItems(classType: string): void;
     previousNextIconHandler(): void;

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

@@ -324,8 +324,10 @@ var HeaderRenderer = /** @class */ (function () {
             enableRtl: this.parent.enableRtl
         });
         var calendarView = this.getCalendarView();
+        var isDisplayDate = this.parent.currentView === 'Month' &&
+            !isNullOrUndefined(this.parent.activeViewOptions.displayDate) && !this.hasSelectedDate();
         this.headerCalendar = new Calendar({
-            value: this.parent.selectedDate,
+            value: isDisplayDate ? this.parent.activeViewOptions.displayDate : this.parent.selectedDate,
             min: this.parent.minDate,
             max: this.parent.maxDate,
             firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,
@@ -364,6 +366,7 @@ var HeaderRenderer = /** @class */ (function () {
         var strClass = args.item.cssClass.replace('e-views ', '');
         var data;
         var isSameTime;
+        var currentTime;
         switch (strClass) {
             case 'e-date-range':
                 if (!this.headerPopup) {
@@ -413,8 +416,13 @@ var HeaderRenderer = /** @class */ (function () {
                 this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
                 break;
             case 'e-today':
-                if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(util.resetTime(this.parent.getCurrentTime()))) {
-                    this.parent.changeDate(util.resetTime(this.parent.getCurrentTime()), args.originalEvent);
+                currentTime = util.resetTime(this.parent.getCurrentTime());
+                if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda' || !this.parent.isSelectedDate(currentTime) ||
+                    this.parent.currentView === 'Month' && this.parent.activeViewOptions.displayDate && !this.hasSelectedDate() &&
+                        util.resetTime(this.parent.activeViewOptions.displayDate) !== currentTime || this.parent.currentView === 'Month' &&
+                    this.parent.activeViewOptions.numberOfWeeks > 0 && !this.hasSelectedDate()
+                    && util.resetTime(util.firstDateOfMonth(this.parent.selectedDate)) !== currentTime) {
+                    this.parent.changeDate(currentTime, args.originalEvent);
                 }
                 break;
             case 'e-prev':
@@ -433,8 +441,8 @@ var HeaderRenderer = /** @class */ (function () {
                     var slotCount = this.parent.activeViewOptions.timeScale.slotCount;
                     var msInterval = (interval * util.MS_PER_MINUTE) / slotCount;
                     var startTime = new Date(this.parent.selectedDate.getTime());
-                    var currentTime = this.parent.getCurrentTime();
-                    startTime.setHours(currentTime.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
+                    var currentTime_1 = this.parent.getCurrentTime();
+                    startTime.setHours(currentTime_1.getHours(), (Math.round(startTime.getMinutes() / msInterval) * msInterval), 0);
                     var endTime = new Date(new Date(startTime.getTime()).setMilliseconds(startTime.getMilliseconds() + msInterval));
                     data = { startTime: startTime, endTime: endTime, isAllDay: false };
                 }
@@ -449,6 +457,11 @@ var HeaderRenderer = /** @class */ (function () {
             toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });
         }
     };
+    HeaderRenderer.prototype.hasSelectedDate = function () {
+        var selectedTime = util.resetTime(this.parent.selectedDate).getTime();
+        return selectedTime >= this.parent.activeView.getStartDate().getTime() &&
+            selectedTime <= this.parent.activeView.getEndDate().getTime();
+    };
     HeaderRenderer.prototype.getHeaderElement = function () {
         return this.toolbarObj.element;
     };
@@ -493,9 +506,11 @@ var HeaderRenderer = /** @class */ (function () {
             lastDate = util.addDays(firstDate, 7 * this.parent.activeViewOptions.interval);
         }
         if (this.parent.currentView === 'Month') {
-            firstDate = util.firstDateOfMonth(this.parent.selectedDate);
-            var lastMonthFirstDate = util.addMonths(firstDate, this.parent.activeViewOptions.interval - 1);
-            lastDate = util.lastDateOfMonth(lastMonthFirstDate);
+            var isCustomMonth = !isNullOrUndefined(this.parent.activeViewOptions.displayDate) ||
+                this.parent.activeViewOptions.numberOfWeeks > 0;
+            firstDate = isCustomMonth ? this.parent.activeView.getStartDate() : util.firstDateOfMonth(this.parent.selectedDate);
+            lastDate = isCustomMonth ? this.parent.activeView.getEndDate() :
+                util.lastDateOfMonth(util.addMonths(firstDate, this.parent.activeViewOptions.interval - 1));
         }
         if (!isNullOrUndefined(prevNavEle)) {
             this.toolbarObj.enableItems(prevNavEle, firstDate > this.parent.minDate);

package/src/schedule/renderer/month.d.ts

@@ -42,13 +42,17 @@ export declare class Month extends ViewBase implements IRenderer {
     private renderDateHeaderElement;
     getMonthStart(currentDate: Date): Date;
     getMonthEnd(currentDate: Date): Date;
+    private isCustomRange;
     getRenderDates(workDays?: number[]): Date[];
     getNextPreviousDate(type: string): Date;
+    getStartDate(): Date;
+    getEndDate(): Date;
     getEndDateFromStartDate(start: Date): Date;
     getDateRangeText(): string;
     getLabelText(view: string): string;
     private createWeekNumberElement;
     unWireEvents(): void;
+    private isCustomMonth;
     protected getModuleName(): string;
     destroy(): void;
 }