@syncfusion/ej2-schedule
Version:
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.
756 lines (755 loc) • 42.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/* eslint-disable @typescript-eslint/no-explicit-any */
import { append, prepend, createElement, extend, EventHandler, closest, addClass } from '@syncfusion/ej2-base';
import { isNullOrUndefined, setStyleAttribute, remove } from '@syncfusion/ej2-base';
import { EventBase } from './event-base';
import * as cls from '../base/css-constant';
import * as events from '../base/constant';
import * as util from '../base/util';
var EVENT_GAP = 0;
/**
* Month view events render
*/
var MonthEvent = /** @class */ (function (_super) {
__extends(MonthEvent, _super);
function MonthEvent(parent) {
var _this = _super.call(this, parent) || this;
_this.renderedEvents = [];
_this.monthHeaderHeight = 0;
_this.moreIndicatorHeight = 19;
_this.renderType = 'day';
_this.element = _this.parent.activeView.getPanel();
_this.fields = _this.parent.eventFields;
_this.maxHeight = _this.parent.eventSettings.enableMaxHeight && !_this.parent.eventSettings.enableIndicator
&& !_this.parent.rowAutoHeight;
_this.withIndicator = _this.parent.eventSettings.enableMaxHeight && _this.parent.eventSettings.enableIndicator
&& !_this.parent.rowAutoHeight;
_this.maxOrIndicator = (_this.maxHeight || _this.withIndicator);
_this.moreIndicatorHeight =
(_this.parent.rowAutoHeight && _this.parent.eventSettings.ignoreWhitespace) ? 0 : _this.moreIndicatorHeight;
_this.addEventListener();
return _this;
}
MonthEvent.prototype.removeEventWrapper = function (appElement) {
if (appElement.length > 0) {
appElement = (this.parent.currentView === 'Month' || (!this.parent.activeView.isTimelineView() &&
!this.parent.activeViewOptions.timeScale.enable)) ? appElement : [appElement[0]];
for (var _i = 0, appElement_1 = appElement; _i < appElement_1.length; _i++) {
var wrap = appElement_1[_i];
if (wrap.parentElement && wrap.parentElement.parentNode) {
remove(wrap.parentElement);
}
}
}
};
MonthEvent.prototype.renderAppointments = function () {
if (this.parent.dragAndDropModule) {
this.parent.dragAndDropModule.setDragArea();
}
this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
if (this.parent.rowAutoHeight) {
this.parent.uiStateValues.top = conWrap.scrollTop;
this.parent.uiStateValues.left = conWrap.scrollLeft;
}
var appointmentWrapper = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
var appElement = [].slice.call(this.element.querySelectorAll('.e-appointment-wrapper ' + '[data-group-index="' +
this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex + '"]'));
this.removeEventWrapper(appElement);
if (this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)] &&
this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
var ele = [].slice.call(this.element.querySelectorAll('.e-appointment-wrapper ' + '[data-group-index="' +
this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex + '"]'));
this.removeEventWrapper(ele);
}
}
}
else {
for (var _i = 0, appointmentWrapper_1 = appointmentWrapper; _i < appointmentWrapper_1.length; _i++) {
var wrap = appointmentWrapper_1[_i];
remove(wrap);
}
}
this.removeHeightProperty(cls.CONTENT_TABLE_CLASS);
if (!this.element.querySelector('.' + cls.WORK_CELLS_CLASS)) {
return;
}
if (this.parent.currentView === 'Month') {
var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
var cellTd = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);
cellTd.appendChild(wrapper);
this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
cellTd.removeChild(wrapper);
}
this.eventHeight = this.parent.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
var selector = '.' + cls.CONTENT_TABLE_CLASS + ' tbody tr';
this.addCellHeight(selector, this.eventHeight, (this.parent.currentView === 'Month' ? EVENT_GAP : 2), this.monthHeaderHeight, this.moreIndicatorHeight);
var scrollTop = conWrap.scrollTop;
if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll
&& !isNullOrUndefined(this.parent.currentAction)) {
conWrap.scrollTop = conWrap.scrollTop - 1;
}
if (this.parent.activeViewOptions.group.resources.length > 0) {
this.renderResourceEvents();
if (this.parent.virtualScrollModule) {
this.parent.virtualScrollModule.updateFocusedWorkCell();
}
}
else {
this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays);
}
if (this.parent.rowAutoHeight) {
this.updateBlockElements();
var data = {
cssProperties: this.parent.getCssProperties(),
module: this.parent.getModuleName(),
isPreventScrollUpdate: true,
scrollPosition: { left: this.parent.uiStateValues.left, top: this.parent.uiStateValues.top }
};
if (this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll) {
if (this.parent.currentAction) {
conWrap.scrollTop = scrollTop;
this.parent.currentAction = null;
}
else {
this.parent.virtualScrollModule.updateVirtualScrollHeight();
}
}
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));
weekNumberCells.forEach(function (cell, i) {
var height = totalCells_1[parseInt(i.toString(), 10)].offsetHeight;
setStyleAttribute(cell, { 'height': height + 'px' });
});
this.parent.element.querySelector('.' + cls.WEEK_NUMBER_WRAPPER_CLASS).scrollTop =
this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS).scrollTop;
}
}
this.parent.renderTemplates();
};
MonthEvent.prototype.renderEventsHandler = function (dateRender, workDays, resData) {
this.renderedEvents = [];
var eventsList;
var blockList;
var resIndex = 0;
if (resData) {
resIndex = resData.groupIndex;
this.cssClass = resData.cssClass;
this.groupOrder = resData.groupOrder;
eventsList = this.parent.eventBase.filterEventsByResource(resData, this.parent.eventsProcessed);
blockList = this.parent.eventBase.filterEventsByResource(resData, this.parent.blockProcessed);
this.workCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS + '[data-group-index="' + resIndex + '"]'));
}
else {
eventsList = this.parent.eventsProcessed;
blockList = this.parent.blockProcessed;
this.workCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
}
this.sortByDateTime(eventsList);
this.sortByDateTime(blockList);
if (this.parent.currentView === 'Month' && this.parent.rowAutoHeight && this.parent.activeViewOptions.group.resources.length === 0) {
var totalCells = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
var height_1 = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS).clientHeight / totalCells.length;
totalCells.forEach(function (cell) {
setStyleAttribute(cell, { 'height': height_1 + 'px' });
});
}
var cellDetail = this.workCells[this.parent.activeView.isTimelineView() ? 0 : this.workCells.length - 1];
this.cellWidth = this.parent.getElementWidth(cellDetail);
this.cellHeight = this.parent.getElementHeight(cellDetail);
this.dateRender = dateRender;
var filteredDates = this.getRenderedDates(dateRender);
this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
this.processBlockEvents(blockList, resIndex, resData);
var events = [];
for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
var event_1 = eventsList_1[_i];
if (this.parent.resourceBase && !resData) {
this.cssClass = this.parent.resourceBase.getCssClass(event_1);
}
events = events.concat(this.splitEvent(event_1, filteredDates || this.dateRender));
}
for (var level = 0; level < this.slots.length; level++) {
this.renderedEvents = [];
var slot = this.slots[parseInt(level.toString(), 10)];
var endDate = util.addDays(new Date(slot[slot.length - 1]), 1);
var spannedEvents = this.filterEvents(new Date(slot[0]), endDate, events);
for (var _a = 0, spannedEvents_1 = spannedEvents; _a < spannedEvents_1.length; _a++) {
var event_2 = spannedEvents_1[_a];
if (this.maxHeight) {
var sDate = this.parent.currentView === 'Month' ? event_2[this.fields.startTime] :
this.getStartTime(event_2, event_2.data);
if (this.getIndex(sDate) > 0) {
continue;
}
}
this.updateIndicatorIcon(event_2);
this.renderEvents(event_2, resIndex, eventsList);
}
}
this.cssClass = null;
this.groupOrder = null;
};
MonthEvent.prototype.processBlockEvents = function (blockEvents, resIndex, resData) {
for (var _i = 0, blockEvents_1 = blockEvents; _i < blockEvents_1.length; _i++) {
var event_3 = blockEvents_1[_i];
if (this.parent.resourceBase && !resData) {
this.cssClass = this.parent.resourceBase.getCssClass(event_3);
}
var blockSpannedList = [];
if (this.renderType === 'day' && !event_3[this.fields.isAllDay]) {
var temp = extend({}, event_3, null, true);
var isSameDate = this.isSameDate(temp[this.fields.startTime], temp[this.fields.endTime]);
temp.isBlockIcon = isSameDate;
if (!isSameDate && util.getDateInMs(temp[this.fields.startTime]) > 0) {
var e = extend({}, event_3, null, true);
e[this.fields.endTime] = util.addDays(util.resetTime(new Date(event_3[this.fields.startTime] + '')), 1);
e.isBlockIcon = true;
temp[this.fields.startTime] = e[this.fields.endTime];
blockSpannedList.push(e);
}
isSameDate = this.isSameDate(temp[this.fields.startTime], temp[this.fields.endTime]);
if (!isSameDate && util.getDateInMs(temp[this.fields.endTime]) > 0) {
var e = extend({}, event_3, null, true);
e[this.fields.startTime] = util.resetTime(new Date(event_3[this.fields.endTime] + ''));
e.isBlockIcon = true;
blockSpannedList.push(e);
temp[this.fields.endTime] = e[this.fields.startTime];
}
blockSpannedList.push(temp);
}
else {
blockSpannedList.push(event_3);
}
for (var _a = 0, blockSpannedList_1 = blockSpannedList; _a < blockSpannedList_1.length; _a++) {
var blockEvent = blockSpannedList_1[_a];
var spannedEvents = this.splitEvent(blockEvent, this.dateRender);
for (var _b = 0, spannedEvents_2 = spannedEvents; _b < spannedEvents_2.length; _b++) {
var event_4 = spannedEvents_2[_b];
this.renderBlockEvents(event_4, resIndex, !!blockEvent.isBlockIcon);
}
}
}
};
MonthEvent.prototype.isSameDate = function (start, end) {
return new Date(+start).setHours(0, 0, 0, 0) === new Date(+end).setHours(0, 0, 0, 0);
};
MonthEvent.prototype.renderBlockEvents = function (event, resIndex, isIcon) {
var eventData = event.data;
var startTime = this.getStartTime(event, eventData);
var endTime = this.getEndTime(event, eventData);
var day = this.parent.getIndexOfDate(this.dateRender, util.resetTime(new Date(startTime.getTime())));
if (day < 0 || startTime > endTime) {
return;
}
var cellTd = this.getCellTd(day);
var position = this.getPosition(startTime, endTime, event[this.fields.isAllDay], day);
if (!isIcon) {
var diffInDays = eventData.count;
var appWidth = this.getEventWidth(startTime, endTime, event[this.fields.isAllDay], diffInDays);
appWidth = (appWidth <= 0) ? this.cellWidth : appWidth;
appWidth = event.IsBlock ? appWidth - 1 : appWidth;
var appLeft = (this.parent.enableRtl) ? 0 : event.IsBlock ? position + 1 : position;
var appRight = (this.parent.enableRtl) ? event.IsBlock ? position + 1 : position : 0;
var appHeight = this.cellHeight - this.monthHeaderHeight;
appHeight = event.IsBlock ? appHeight - 1 : appHeight;
var appTop = this.getRowTop(resIndex);
var blockElement = this.createBlockAppointmentElement(event, resIndex, this.isResourceEventTemplate);
setStyleAttribute(blockElement, {
'width': appWidth + 'px', 'height': appHeight + 'px', 'left': appLeft + 'px',
'right': appRight + 'px', 'top': appTop + 'px'
});
this.renderEventElement(event, blockElement, cellTd);
}
else {
this.renderBlockIndicator(cellTd, position, resIndex);
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MonthEvent.prototype.renderBlockIndicator = function (cellTd, position, resIndex) {
var blockIndicator = createElement('div', { className: 'e-icons ' + cls.BLOCK_INDICATOR_CLASS });
if (isNullOrUndefined(cellTd.querySelector('.' + cls.BLOCK_INDICATOR_CLASS))) {
cellTd.appendChild(blockIndicator);
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MonthEvent.prototype.getStartTime = function (event, eventData) {
return event[this.fields.startTime];
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MonthEvent.prototype.getEndTime = function (event, eventData) {
return event[this.fields.endTime];
};
MonthEvent.prototype.getCellTd = function (day) {
return this.workCells[parseInt(day.toString(), 10)];
};
MonthEvent.prototype.getEventWidth = function (startDate, endDate, isAllDay, count) {
return count * this.cellWidth - 1;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MonthEvent.prototype.getPosition = function (startTime, endTime, isAllDay, day) {
return 0;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MonthEvent.prototype.getRowTop = function (resIndex) {
return 0;
};
MonthEvent.prototype.updateIndicatorIcon = function (event) {
if (this.parent.currentView.indexOf('Timeline') === -1 || this.parent.currentView === 'TimelineMonth'
|| event[this.fields.isAllDay]) {
return;
}
var cloneData = event.data;
var start = this.parent.activeView.getStartHour();
var end = this.parent.activeView.getEndHour();
var startHour = util.getStartEndHours(event[this.fields.startTime], start, end);
var endHour = util.getStartEndHours(event[this.fields.endTime], start, end);
var actualStartTime = cloneData[this.fields.startTime];
var actualEndTime = cloneData[this.fields.endTime];
cloneData.isLeft = cloneData.isLeft || actualStartTime.getTime() < startHour.startHour.getTime();
cloneData.isRight = cloneData.isRight || actualEndTime.getTime() > endHour.endHour.getTime();
if (util.resetTime(actualStartTime).getTime() !== util.resetTime(actualEndTime).getTime()) {
var actualStartHour = startHour.startHour;
var actualEndHour = endHour.endHour;
var startTime = new Date(util.resetTime(actualStartTime));
startTime.setHours(actualEndHour.getHours(), actualEndHour.getMinutes(), actualEndHour.getSeconds());
cloneData.isLeft = cloneData.isLeft || actualStartTime.getTime() >= (actualStartHour.getDate() === startHour.endHour.getDate() ?
startTime.getTime() : util.addDays(startTime, 1).getTime());
if (actualEndTime.getTime() !== util.resetTime(actualEndTime).getTime()) {
var endTime = new Date(util.resetTime(actualEndTime));
cloneData.isRight = cloneData.isRight || actualEndTime.getTime() <=
endTime.setHours(actualStartHour.getHours(), actualStartHour.getMinutes(), actualStartHour.getSeconds());
}
}
};
MonthEvent.prototype.renderResourceEvents = function () {
var resources = this.parent.uiStateValues.isGroupAdaptive ?
[this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
this.parent.resourceBase.renderedResources;
if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
var sourceRes = this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)];
if (!this.parent.uiStateValues.isGroupAdaptive ||
(this.parent.uiStateValues.groupIndex === sourceRes.groupIndex && this.parent.uiStateValues.isGroupAdaptive)) {
this.renderEventsHandler(sourceRes.renderDates, sourceRes.workDays, sourceRes);
}
if (this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
var target = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];
this.renderEventsHandler(target.renderDates, target.workDays, target);
}
}
this.parent.crudModule.crudObj.isCrudAction = false;
}
else {
for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
var slotData = resources_1[_i];
this.renderEventsHandler(slotData.renderDates, slotData.workDays, slotData);
}
}
};
MonthEvent.prototype.getSlotDates = function (workDays) {
this.slots = [];
var dates = this.dateRender.map(function (date) { return +date; });
var noOfDays = !this.parent.activeViewOptions.showWeekend || (this.parent.activeViewOptions.group.byDate &&
this.parent.activeViewOptions.group.hideNonWorkingDays) ? workDays.length : util.WEEK_LENGTH;
while (dates.length > 0) {
this.slots.push(dates.splice(0, noOfDays));
}
};
MonthEvent.prototype.createAppointmentElement = function (record, resIndex, isCloneElement) {
if (isCloneElement === void 0) { isCloneElement = false; }
var eventSubject = (record[this.fields.subject] || this.parent.eventSettings.fields.subject.default ||
this.parent.localeObj.getConstant('addTitle'));
var newRecord = extend({}, record, record.data, true);
var attrs = {
'data-id': 'Appointment_' + record[this.fields.id],
'role': 'button', 'tabindex': '0',
'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
};
if (!isCloneElement) {
attrs['data-guid'] = record.Guid;
}
if (this.parent.activeViewOptions.group.resources.length > 0) {
attrs['data-group-index'] = resIndex.toString();
}
var appointmentWrapper = createElement('div', { className: cls.APPOINTMENT_CLASS, attrs: attrs });
if (!isNullOrUndefined(this.cssClass)) {
addClass([appointmentWrapper], this.cssClass);
}
if (record[this.fields.isReadonly]) {
addClass([appointmentWrapper], 'e-read-only');
}
var appointmentDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });
appointmentWrapper.appendChild(appointmentDetails);
var templateElement;
var eventData = record.data;
var eventObj = this.getEventData(record);
if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
var scheduleId = this.parent.element.id + '_';
var viewName = this.parent.activeViewOptions.eventTemplateName;
var templateId = scheduleId + viewName + 'eventTemplate';
var eventTemplate = this.isResourceEventTemplate ? this.parent.getEventTemplateName(resIndex) : 'eventTemplate';
templateElement = this.parent.getAppointmentTemplate()(eventObj, this.parent, eventTemplate, templateId, false, undefined, undefined, this.parent.root);
}
else {
var eventLocation = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '');
var appointmentSubject = createElement('div', { className: cls.SUBJECT_CLASS });
this.parent.sanitize((eventSubject + (eventLocation ? '; ' + eventLocation : '')), appointmentSubject);
var appointmentStartTime = createElement('div', {
className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
innerHTML: this.parent.getTimeString(eventData[this.fields.startTime])
});
var appointmentEndTime = createElement('div', {
className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
innerHTML: this.parent.getTimeString(eventData[this.fields.endTime])
});
if (this.parent.currentView === 'Month') {
if (record[this.fields.isAllDay]) {
templateElement = [appointmentSubject];
addClass([appointmentSubject], 'e-text-center');
}
else if (eventData.count <= 1 && !eventData.isLeft && !eventData.isRight) {
templateElement = [appointmentStartTime, appointmentSubject];
}
else {
templateElement = [];
addClass([appointmentSubject], 'e-text-center');
if (!eventData.isLeft) {
templateElement.push(appointmentStartTime);
}
templateElement.push(appointmentSubject);
if (!eventData.isRight) {
templateElement.push(appointmentEndTime);
}
}
}
else {
var innerElement = void 0;
if (record[this.fields.isAllDay]) {
var allDayString = createElement('div', {
className: cls.APPOINTMENT_TIME, innerHTML: this.parent.localeObj.getConstant('allDay')
});
innerElement = [appointmentSubject, allDayString];
}
else {
var timeString = this.parent.getTimeString(eventData[this.fields.startTime])
+ ' - ' + this.parent.getTimeString(eventData[this.fields.endTime]);
var appTime = createElement('div', {
className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''), innerHTML: timeString
});
var appLocation = createElement('div', { className: cls.LOCATION_CLASS });
this.parent.sanitize(eventLocation, appLocation);
innerElement = [appointmentSubject, appTime, appLocation];
}
var wrap = createElement('div', { className: 'e-inner-wrap' });
append(innerElement, wrap);
templateElement = [wrap];
}
}
append(templateElement, appointmentDetails);
this.appendEventIcons(record, appointmentDetails);
this.renderResizeHandler(appointmentWrapper, record.data, record[this.fields.isReadonly]);
return appointmentWrapper;
};
MonthEvent.prototype.appendEventIcons = function (record, appointmentDetails) {
var eventData = record.data;
if (!isNullOrUndefined(record[this.fields.recurrenceRule]) || !isNullOrUndefined(record[this.fields.recurrenceID])) {
var iconClass = (record[this.fields.id] === record[this.fields.recurrenceID]) ?
cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
appointmentDetails.appendChild(createElement('div', {
className: cls.ICON + ' ' + iconClass + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : '')
}));
}
if (eventData.isLeft) {
var iconLeft = createElement('div', {
className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_LEFT_CLASS
});
prepend([iconLeft], appointmentDetails);
}
if (eventData.isRight) {
var iconRight = createElement('div', {
className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_RIGHT_CLASS
});
append([iconRight], appointmentDetails);
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
MonthEvent.prototype.renderEvents = function (event, resIndex, eventsList) {
var startTime = event[this.fields.startTime];
var endTime = event[this.fields.endTime];
var day = this.parent.getIndexOfDate(this.dateRender, util.resetTime(startTime));
if ((day < 0) || (startTime.getTime() < this.parent.minDate.getTime()) || (endTime.getTime() > this.parent.maxDate.getTime())) {
return;
}
var eventsPerRow = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
var overlapCount = this.getIndex(startTime);
event.Index = overlapCount;
var diffInDays = event.data.count;
if (startTime.getTime() <= endTime.getTime()) {
var appWidth = (diffInDays * this.cellWidth) - 5;
var cellTd = this.workCells[parseInt(day.toString(), 10)];
var appTop = (overlapCount * (this.eventHeight + EVENT_GAP));
var height = this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
var enableAppRender = this.parent.activeViewOptions.maxEventsPerRow && !this.parent.rowAutoHeight &&
!this.parent.eventSettings.enableIndicator ? overlapCount < eventsPerRow : this.maxOrIndicator ? overlapCount < 1
? true : false : this.cellHeight > height;
if (this.parent.rowAutoHeight || enableAppRender) {
this.renderedEvents.push(extend({}, event, null, true));
var appointmentElement = void 0;
if (this.inlineValue) {
appointmentElement = this.parent.inlineModule.createInlineAppointmentElement();
}
else {
appointmentElement = this.createAppointmentElement(event, resIndex);
}
this.applyResourceColor(appointmentElement, event, 'backgroundColor', this.groupOrder);
this.wireAppointmentEvents(appointmentElement, event);
setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'top': appTop + 'px' });
this.renderEventElement(event, appointmentElement, cellTd);
if (this.parent.rowAutoHeight) {
var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
var conWidth = this.parent.getElementWidth(conWrap);
var isWithoutScroll = conWrap.offsetHeight === conWrap.clientHeight &&
conWrap.offsetWidth === conWrap.clientWidth;
var firstChild = cellTd.parentElement.firstElementChild;
this.updateCellHeight(firstChild, height);
if (isWithoutScroll &&
(conWrap.offsetWidth > conWrap.clientWidth || conWidth !== this.parent.getElementWidth(conWrap))) {
this.adjustAppointments(conWidth);
}
}
}
else {
for (var i = 0; i < diffInDays; i++) {
if (this.workCells[day + i]) {
var indicator = this.workCells[day + i].querySelector('.' + cls.MORE_INDICATOR_CLASS);
if (indicator) {
var count = parseInt(indicator.getAttribute('data-count'), 10) + 1;
indicator.setAttribute('data-count', count.toString());
indicator.setAttribute('aria-label', count + ' ' + this.parent.localeObj.getConstant('moreEvents'));
indicator.innerHTML = this.getMoreIndicatorText(count);
}
else {
var startDate = new Date(this.dateRender[day + i].getTime());
var endDate = util.addDays(this.dateRender[day + i], 1);
var groupIndex = this.workCells[day + i].getAttribute('data-group-index');
var moreIndicatorElement = this.getMoreIndicatorElement(1, startDate, endDate);
if (!isNullOrUndefined(groupIndex)) {
moreIndicatorElement.setAttribute('data-group-index', groupIndex);
}
moreIndicatorElement.style.top = (this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight) + 'px';
moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
this.renderElement(this.workCells[day + i], moreIndicatorElement);
EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
}
}
}
}
}
};
MonthEvent.prototype.adjustAppointments = function (conWidth) {
var _this = this;
var tr = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr');
var actualCellWidth = this.parent.getElementWidth(this.workCells[0]);
this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
var currentPercentage = (actualCellWidth * tr.children.length) / (conWidth / 100);
var apps = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
apps.forEach(function (app) {
if (_this.parent.enableRtl && app.style.right !== '0px') {
app.style.right = ((parseFloat(app.style.right) / 100) * currentPercentage) + 'px';
}
else if (app.style.left !== '0px') {
app.style.left = ((parseFloat(app.style.left) / 100) * currentPercentage) + 'px';
}
app.style.width = ((parseFloat(app.style.width) / 100) * currentPercentage) + 'px';
});
};
MonthEvent.prototype.updateCellHeight = function (cell, height) {
if ((height > cell.offsetHeight)) {
setStyleAttribute(cell, { 'height': height + 'px' });
}
};
MonthEvent.prototype.updateBlockElements = function () {
var blockElement = [].slice.call(this.element.querySelectorAll('.' + cls.BLOCK_APPOINTMENT_CLASS));
for (var _i = 0, blockElement_1 = blockElement; _i < blockElement_1.length; _i++) {
var element = blockElement_1[_i];
var target = closest(element, 'tr');
this.monthHeaderHeight = element.offsetParent.offsetTop - target.offsetTop;
element.style.height = ((target.offsetHeight - 1) - this.monthHeaderHeight) + 'px';
var firstChild = target.firstElementChild;
var width = Math.round(element.offsetWidth / firstChild.offsetWidth);
element.style.width = (firstChild.offsetWidth * width) + 'px';
}
};
// eslint-disable-next-line max-len
MonthEvent.prototype.getFilteredEvents = function (startDate, endDate, groupIndex, eventsList) {
var filteredEvents;
if (isNullOrUndefined(groupIndex)) {
filteredEvents = this.filterEvents(startDate, endDate);
}
else {
var data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
filteredEvents = this.filterEvents(startDate, endDate, isNullOrUndefined(eventsList) ? undefined : eventsList, data);
}
return filteredEvents;
};
MonthEvent.prototype.getOverlapEvents = function (date, appointments) {
var appointmentsList = [];
var dateTime = util.resetTime(date).getTime();
for (var _i = 0, appointments_1 = appointments; _i < appointments_1.length; _i++) {
var app = appointments_1[_i];
if ((util.resetTime(app[this.fields.startTime]).getTime() <= dateTime) &&
(util.resetTime(app[this.fields.endTime]).getTime() >= dateTime)) {
appointmentsList.push(app);
}
}
return appointmentsList;
};
MonthEvent.prototype.getIndex = function (date) {
var appIndex = -1;
var appointments = this.renderedEvents;
if (appointments.length > 0) {
var appointmentsList = this.getOverlapEvents(date, appointments);
var appLevel = appointmentsList.map(function (obj) { return obj.Index; });
appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
}
return (appIndex === -1) ? 0 : appIndex;
};
MonthEvent.prototype.moreIndicatorClick = function (event) {
var _this = this;
var target = closest(event.target, '.' + cls.MORE_INDICATOR_CLASS);
var startDate = new Date(parseInt(target.getAttribute('data-start-date'), 10));
var endDate = new Date(parseInt(target.getAttribute('data-end-date'), 10));
var groupIndex = target.getAttribute('data-group-index');
var moreArgs = {
cancel: false, event: event, element: target, isPopupOpen: true,
startTime: startDate, endTime: endDate, viewName: this.parent.getNavigateView()
};
if (groupIndex) {
moreArgs.groupIndex = parseInt(groupIndex, 10);
}
this.parent.trigger(events.moreEventsClick, moreArgs, function (clickArgs) {
if (!clickArgs.cancel) {
if (clickArgs.isPopupOpen) {
var filteredEvents = _this.getFilteredEvents(startDate, endDate, groupIndex);
var moreArgs_1 = { date: startDate, event: filteredEvents, element: event.target };
_this.parent.quickPopup.moreEventClick(moreArgs_1, endDate, groupIndex);
}
else {
_this.parent.setProperties({ selectedDate: startDate }, true);
_this.parent.changeView(clickArgs.viewName, event);
}
}
});
};
MonthEvent.prototype.renderEventElement = function (event, appointmentElement, cellTd) {
var _this = this;
var eventType = appointmentElement.classList.contains(cls.BLOCK_APPOINTMENT_CLASS) ? 'blockEvent' : 'event';
var isAppointment = appointmentElement.classList.contains(cls.APPOINTMENT_CLASS);
var eventObj = this.parent.currentView === 'Month' ? this.getSpannedTime(event) : this.getEventData(event);
var args = { data: eventObj, element: appointmentElement, cancel: false, type: eventType };
this.parent.trigger(events.eventRendered, args, function (eventArgs) {
if (eventArgs.cancel) {
_this.renderedEvents.pop();
}
else {
_this.renderElement(cellTd, appointmentElement, isAppointment);
}
});
};
MonthEvent.prototype.getSpannedTime = function (event) {
var eventObj = extend({}, event, null, true);
if ((eventObj[this.fields.startTime]).getDate() === (eventObj.data[this.fields.startTime]).getDate()) {
eventObj[this.fields.startTime] = eventObj.data[this.fields.startTime];
}
if ((eventObj[this.fields.endTime]).getDate() === (eventObj.data[this.fields.endTime]).getDate()) {
eventObj[this.fields.endTime] = eventObj.data[this.fields.endTime];
}
return eventObj;
};
MonthEvent.prototype.getEventData = function (event) {
var eventObj = extend({}, event, null, true);
eventObj[this.fields.startTime] = event.data[this.fields.startTime];
eventObj[this.fields.endTime] = event.data[this.fields.endTime];
return eventObj;
};
MonthEvent.prototype.renderElement = function (cellTd, element, isAppointment) {
if (isAppointment === void 0) { isAppointment = false; }
if (this.maxOrIndicator && isAppointment) {
this.setMaxEventHeight(element, cellTd);
}
var wrapperEle = cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
if (wrapperEle) {
wrapperEle.appendChild(element);
}
else {
var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
wrapper.appendChild(element);
cellTd.appendChild(wrapper);
}
};
MonthEvent.prototype.getMoreIndicatorElement = function (count, startDate, endDate) {
var moreIndicatorElement = createElement('div', {
className: cls.MORE_INDICATOR_CLASS,
innerHTML: this.getMoreIndicatorText(count),
attrs: {
'role': 'button',
'tabindex': '0',
'aria-label': this.parent.globalize.formatNumber(count) + ' ' + this.parent.localeObj.getConstant('moreEvents'),
'data-count': count.toString(),
'data-start-date': startDate.getTime().toString(),
'data-end-date': endDate.getTime().toString()
}
});
return moreIndicatorElement;
};
MonthEvent.prototype.getMoreIndicatorText = function (count) {
return '+' + this.parent.globalize.formatNumber(count) + ' ' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
};
MonthEvent.prototype.removeHeightProperty = function (selector) {
var rows = [].slice.call(this.element.querySelectorAll('.' + selector + ' tbody tr'));
for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {
var row = rows_1[_i];
row.firstElementChild.style.height = '';
}
};
MonthEvent.prototype.setMaxEventHeight = function (event, cell) {
var headerHeight = util.getOuterHeight(cell.querySelector('.' + cls.DATE_HEADER_CLASS));
var height = (cell.offsetHeight - headerHeight) - (this.maxHeight ? 0 : this.moreIndicatorHeight);
setStyleAttribute(event, { 'height': height + 'px', 'align-items': 'center' });
};
MonthEvent.prototype.destroy = function () {
this.element = null;
this.fields = null;
this.maxHeight = null;
this.withIndicator = null;
this.maxOrIndicator = null;
this.moreIndicatorHeight = null;
this.removeEventListener();
_super.prototype.destroy.call(this);
};
return MonthEvent;
}(EventBase));
export { MonthEvent };