angular-calendar-scheduler
Version:
This project provide a scheduler view component for [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar).
717 lines • 148 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ChangeDetectorRef, LOCALE_ID, Inject, TemplateRef, ViewEncapsulation } from '@angular/core';
import { Subject } from 'rxjs';
import { isBefore } from 'date-fns';
import { CalendarDragHelper } from 'angular-calendar/esm2015/modules/common/calendar-drag-helper.provider';
import { CalendarResizeHelper } from 'angular-calendar/esm2015/modules/common/calendar-resize-helper.provider';
import { SchedulerConfig } from './scheduler-config';
import { CalendarEventTimesChangedEventType, DateAdapter } from 'angular-calendar';
import { shouldFireDroppedEvent, isDraggedWithinPeriod, roundToNearest, getMinutesMoved, trackByHourColumn, trackByDayOrEvent, trackByHour, trackByHourSegment, getMinimumEventHeightInMinutes, getDefaultEventEnd } from '../common/utils';
import { DEFAULT_HOUR_SEGMENTS, DEFAULT_HOUR_SEGMENT_HEIGHT_PX, DEFAULT_EVENT_WIDTH_PERCENT, MINUTES_IN_HOUR } from './utils/calendar-scheduler-utils';
import { CalendarSchedulerUtils } from './utils/calendar-scheduler-utils.provider';
/**
* [ngClass]="getPositioningClasses(event)"
*
* [style.top.px]="event.top"
* [style.height.px]="event.height"
* [style.left.%]="event.left"
* [style.width.%]="event.width"
*
* DRAG & DROP & RESIZE -> https://github.com/mattlewis92/angular-calendar/blob/master/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts
* FLEXBOX -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
var CalendarSchedulerViewComponent = /** @class */ (function () {
/**
* @hidden
*/
function CalendarSchedulerViewComponent(cdr, locale, config, utils, dateAdapter) {
this.cdr = cdr;
this.config = config;
this.utils = utils;
this.dateAdapter = dateAdapter;
/**
* An array of events to display on view
*/
this.events = [];
/**
* The number of segments in an hour. Must be one of 1, 2, 4, 6
*/
this.hourSegments = DEFAULT_HOUR_SEGMENTS;
/**
* The height in pixels of each hour segment
*/
this.hourSegmentHeight = DEFAULT_HOUR_SEGMENT_HEIGHT_PX;
/**
* An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view
*/
this.excludeDays = [];
/**
* Specify if the first day of current scheduler view has to be today or the first day of the week
*/
this.startsWithToday = false;
/**
* Specify if content must be shown or not
*/
this.showEventContent = true;
/**
* Specify if actions must be shown or not
*/
this.showEventActions = true;
/**
* Specify if status must be shown or not
*/
this.showEventStatus = true;
/**
* Specify if hour must be shown on segment or not
*/
this.showSegmentHour = false;
/**
* The grid size to snap resizing and dragging of events to
*/
this.eventSnapSize = this.hourSegmentHeight;
/**
* Whether to snap events to a grid when dragging
*/
this.snapDraggedEvents = true;
/**
* The day start hours in 24 hour time. Must be 0-23
*/
this.dayStartHour = 0;
/**
* The day start minutes. Must be 0-59
*/
this.dayStartMinute = 0;
/**
* The day end hours in 24 hour time. Must be 0-23
*/
this.dayEndHour = 23;
/**
* The day end minutes. Must be 0-59
*/
this.dayEndMinute = 59;
/**
* The width in pixels of each event on the view
*/
this.eventWidthPercent = DEFAULT_EVENT_WIDTH_PERCENT;
/**
* Called when a header week day is clicked
*/
this.dayHeaderClicked = new EventEmitter();
/**
* Called when the hour is clicked
*/
this.hourClicked = new EventEmitter();
/**
* Called when the segment is clicked
*/
this.segmentClicked = new EventEmitter();
/**
* Called when the event is clicked
*/
this.eventClicked = new EventEmitter();
/**
* Called when an event is resized or dragged and dropped
*/
this.eventTimesChanged = new EventEmitter();
/**
* @hidden
*/
this.hours = [];
/**
* @hidden
*/
// resizes: Map<CalendarSchedulerEvent, SchedulerResizeEvent> = new Map();
this.resizes = new Map();
/**
* @hidden
*/
this.eventDragEnter = 0;
/**
* @hidden
*/
this.dragActive = false;
/**
* @hidden
*/
this.calendarId = Symbol('angular calendar scheduler view id');
/**
* @hidden
*/
this.trackByHourColumn = trackByHourColumn;
/**
* @hidden
*/
this.trackByDayOrEvent = trackByDayOrEvent;
/**
* @hidden
*/
this.trackByHour = trackByHour;
/**
* @hidden
*/
this.trackByHourSegment = trackByHourSegment;
this.locale = this.config.locale || locale;
}
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.refresh) {
this.refreshSubscription = this.refresh.subscribe(function () {
_this.refreshAll();
_this.cdr.markForCheck();
});
}
};
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.ngOnChanges = function (changes) {
if (changes.viewDate || changes.excludeDays || changes.weekendDays) {
this.refreshHeader();
}
if (changes.viewDate ||
changes.events ||
changes.dayStartHour ||
changes.dayEndHour ||
changes.dayStartMinute ||
changes.dayEndMinute ||
changes.excludeDays ||
changes.eventWidth) {
this.refreshHourGrid();
this.refreshBody();
}
};
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.ngOnDestroy = function () {
if (this.refreshSubscription) {
this.refreshSubscription.unsubscribe();
}
};
CalendarSchedulerViewComponent.prototype.getPositioningClasses = function (day, event) {
var classes = [
this.getDayClass(event.start),
this.getTimeClass(day.date, event),
this.getLengthClass(day.date, event)
];
return classes.join(' ');
};
CalendarSchedulerViewComponent.prototype.getDayClass = function (date) {
return '';
};
CalendarSchedulerViewComponent.prototype.getTimeClass = function (date, event) {
if (this.dateAdapter.isSameDay(date, event.start)) {
var hours = event.start.getHours();
if (this.dayStartHour > 0) {
hours = event.start.getHours() - this.dayStartHour;
}
var hoursString = hours < 10 ? "0" + hours : "" + hours;
var minutesString = event.start.getMinutes() < 10 ? "0" + event.start.getMinutes() : "" + event.start.getMinutes();
return "time" + hoursString + minutesString;
}
else if (isBefore(event.start, this.dateAdapter.startOfDay(date))) {
return "time0000";
}
};
CalendarSchedulerViewComponent.prototype.getLengthClass = function (date, event) {
if (this.dateAdapter.isSameDay(date, event.start)) {
var durationInMinutes = this.dateAdapter.differenceInMinutes(event.end, event.start);
var leftToEndOfDay = this.dateAdapter.differenceInMinutes(this.dateAdapter.setMinutes(this.dateAdapter.setHours(event.start, this.dayEndHour + 1), 0), event.start);
return leftToEndOfDay > durationInMinutes ? "length" + durationInMinutes : "length" + leftToEndOfDay;
}
else if (isBefore(event.start, this.dateAdapter.startOfDay(date))) {
var leftDurationInMinutes = 0;
if (this.dateAdapter.isSameDay(date, event.end)) {
leftDurationInMinutes = this.dateAdapter.differenceInMinutes(event.end, this.dateAdapter.startOfDay(date));
if (this.dayStartHour > 0) {
leftDurationInMinutes = (event.end.getHours() - this.dayStartHour) * MINUTES_IN_HOUR;
}
}
else {
leftDurationInMinutes = ((this.dayEndHour + 1) - this.dayStartHour) * MINUTES_IN_HOUR;
}
return "length" + leftDurationInMinutes;
}
};
CalendarSchedulerViewComponent.prototype.refreshHourGrid = function () {
this.hours = this.utils.getSchedulerViewHourGrid({
viewDate: this.viewDate,
hourSegments: this.hourSegments,
dayStart: {
hour: this.dayStartHour,
minute: this.dayStartMinute
},
dayEnd: {
hour: this.dayEndHour,
minute: this.dayEndMinute
}
});
};
CalendarSchedulerViewComponent.prototype.refreshHeader = function () {
this.days = this.utils.getSchedulerViewDays({
viewDate: this.viewDate,
weekStartsOn: this.weekStartsOn,
startsWithToday: this.startsWithToday,
excluded: this.excludeDays,
weekendDays: this.weekendDays
});
};
CalendarSchedulerViewComponent.prototype.refreshBody = function (events) {
var _this = this;
this.view = this.getSchedulerView(events || this.events);
this.view.days.forEach(function (day) {
day.events.forEach(function (event) {
_this.scaleOverlappingEvents(event.event.start, event.event.end, day.events);
});
});
if (this.dayModifier) {
this.days.forEach(function (day) { return _this.dayModifier(day); });
}
if (this.dayModifier || this.hourModifier || this.segmentModifier) {
this.view.days.forEach(function (day) {
if (_this.dayModifier) {
_this.dayModifier(day);
}
day.hours.forEach(function (hour) {
if (_this.hourModifier) {
_this.hourModifier(hour);
}
hour.segments.forEach(function (segment) {
if (_this.segmentModifier) {
_this.segmentModifier(segment);
}
});
});
});
}
if (this.eventModifier) {
this.events.forEach(function (event) { return _this.eventModifier(event); });
}
};
CalendarSchedulerViewComponent.prototype.refreshAll = function () {
this.refreshHeader();
this.refreshHourGrid();
this.refreshBody();
};
CalendarSchedulerViewComponent.prototype.getSchedulerView = function (events) {
return this.utils.getSchedulerView({
events: events,
viewDate: this.viewDate,
hourSegments: this.hourSegments,
weekStartsOn: this.weekStartsOn,
startsWithToday: this.startsWithToday,
dayStart: {
hour: this.dayStartHour,
minute: this.dayStartMinute
},
dayEnd: {
hour: this.dayEndHour,
minute: this.dayEndMinute
},
excluded: this.excludeDays,
eventWidth: this.eventWidthPercent,
hourSegmentHeight: this.hourSegmentHeight
});
};
CalendarSchedulerViewComponent.prototype.scaleOverlappingEvents = function (startTime, endTime, events) {
var newStartTime = startTime;
var newEndTime = endTime;
var overlappingEvents = [];
var maxLeft = 0;
events.forEach(function (event) {
if (event.isProcessed) {
return;
}
if (event.event.start < startTime && event.event.end > startTime) {
newStartTime = event.event.start;
}
else if (event.event.end > endTime && event.event.start < endTime) {
newEndTime = event.event.end;
}
else if (event.event.end <= endTime && event.event.start >= startTime) {
// Nothing, but remove condition and add equals to above two for overlapping effect
}
else {
return;
}
if (event.left > maxLeft) {
maxLeft = event.left;
}
overlappingEvents.push(event);
});
if (startTime === newStartTime && endTime === newEndTime) {
var divisorFactor_1 = Math.floor(maxLeft / this.eventWidthPercent) + 1;
overlappingEvents.forEach(function (event) {
event.isProcessed = true;
event.left /= divisorFactor_1;
event.width /= divisorFactor_1;
});
}
else {
this.scaleOverlappingEvents(newStartTime, newEndTime, events);
}
};
//#region RESIZE
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.resizeStarted = function (eventsContainer, event, resizeEvent) {
this.resizes.set(event.event, resizeEvent);
this.dayColumnWidth = Math.floor(eventsContainer.offsetWidth / this.days.length);
var resizeHelper = new CalendarResizeHelper(eventsContainer);
this.validateResize = function (_a) {
var rectangle = _a.rectangle;
return resizeHelper.validateResize({ rectangle: rectangle });
};
this.cdr.markForCheck();
};
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.resizing = function (event, resizeEvent) {
var _this = this;
this.resizes.set(event.event, resizeEvent);
var adjustedEvents = new Map();
var tempEvents = tslib_1.__spread(this.events);
this.resizes.forEach(function (lastResizeEvent, ev) {
var newEventDates = _this.getResizedEventDates(ev, lastResizeEvent);
var adjustedEvent = tslib_1.__assign({}, ev, newEventDates);
adjustedEvents.set(adjustedEvent, ev);
var eventIndex = tempEvents.indexOf(ev);
tempEvents[eventIndex] = adjustedEvent;
});
this.restoreOriginalEvents(tempEvents, adjustedEvents);
};
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.resizeEnded = function (event) {
this.view = this.getSchedulerView(this.events);
var lastResizeEvent = this.resizes.get(event.event);
this.resizes.delete(event.event);
var newEventDates = this.getResizedEventDates(event.event, lastResizeEvent);
this.eventTimesChanged.emit({
newStart: newEventDates.start,
newEnd: newEventDates.end,
event: event.event,
type: CalendarEventTimesChangedEventType.Resize
});
};
CalendarSchedulerViewComponent.prototype.getResizedEventDates = function (event, resizeEvent) {
var minimumEventHeight = getMinimumEventHeightInMinutes(this.hourSegments, this.hourSegmentHeight);
var newEventDates = {
start: event.start,
end: getDefaultEventEnd(this.dateAdapter, event, minimumEventHeight)
};
var end = event.end, eventWithoutEnd = tslib_1.__rest(event, ["end"]);
var smallestResizes = {
start: this.dateAdapter.addMinutes(newEventDates.end, minimumEventHeight * -1),
end: getDefaultEventEnd(this.dateAdapter, eventWithoutEnd, minimumEventHeight)
};
if (resizeEvent.edges.left) {
var daysDiff = Math.round(+resizeEvent.edges.left / this.dayColumnWidth);
var newStart = this.dateAdapter.addDays(newEventDates.start, daysDiff);
if (newStart < smallestResizes.start) {
newEventDates.start = newStart;
}
else {
newEventDates.start = smallestResizes.start;
}
}
else if (resizeEvent.edges.right) {
var daysDiff = Math.round(+resizeEvent.edges.right / this.dayColumnWidth);
var newEnd = this.dateAdapter.addDays(newEventDates.end, daysDiff);
if (newEnd > smallestResizes.end) {
newEventDates.end = newEnd;
}
else {
newEventDates.end = smallestResizes.end;
}
}
if (resizeEvent.edges.top) {
var precision = this.eventSnapSize || this.hourSegmentHeight;
var draggedInPixelsSnapSize = Math.round(resizeEvent.edges.top / precision) * precision;
var pixelAmountInMinutes = MINUTES_IN_HOUR / (this.hourSegments * this.hourSegmentHeight);
var minutesMoved = draggedInPixelsSnapSize * pixelAmountInMinutes;
var newStart = this.dateAdapter.addMinutes(newEventDates.start, minutesMoved);
if (newStart < smallestResizes.start) {
newEventDates.start = newStart;
}
else {
newEventDates.start = smallestResizes.start;
}
}
else if (resizeEvent.edges.bottom) {
var precision = this.eventSnapSize || this.hourSegmentHeight;
var draggedInPixelsSnapSize = Math.round(resizeEvent.edges.bottom / precision) * precision;
var pixelAmountInMinutes = MINUTES_IN_HOUR / (this.hourSegments * this.hourSegmentHeight);
var minutesMoved = draggedInPixelsSnapSize * pixelAmountInMinutes;
var newEnd = this.dateAdapter.addMinutes(newEventDates.end, minutesMoved);
if (newEnd > smallestResizes.end) {
newEventDates.end = newEnd;
}
else {
newEventDates.end = smallestResizes.end;
}
}
return newEventDates;
};
//#endregion
//#region DRAG & DROP
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.eventDropped = function (dropEvent, date) {
if (shouldFireDroppedEvent(dropEvent, date, this.calendarId)) {
this.eventTimesChanged.emit({
type: CalendarEventTimesChangedEventType.Drop,
event: dropEvent.dropData.event,
newStart: date,
newEnd: null
});
}
};
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.dragStarted = function (eventsContainer, eventContainer, event) {
var _this = this;
this.dayColumnWidth = Math.floor(eventsContainer.offsetWidth / this.days.length);
var dragHelper = new CalendarDragHelper(eventsContainer, eventContainer);
this.validateDrag = function (_a) {
var x = _a.x, y = _a.y;
return _this.resizes.size === 0 && dragHelper.validateDrag({ x: x, y: y, snapDraggedEvents: _this.snapDraggedEvents });
};
this.dragActive = true;
this.eventDragEnter = 0;
if (!this.snapDraggedEvents && event) {
this.view.days.forEach(function (day) {
var linkedEvent = day.events.find(function (ev) { return ev.event === event.event && ev !== event; });
// hide any linked events while dragging
if (linkedEvent) {
linkedEvent.width = 0;
linkedEvent.height = 0;
}
});
}
this.cdr.markForCheck();
};
/**
* @hidden
*/
CalendarSchedulerViewComponent.prototype.dragMove = function (event, dragEvent) {
if (this.snapDraggedEvents) {
var newEventTimes = this.getDragMovedEventTimes(event, dragEvent, this.dayColumnWidth, true);
var originalEvent_1 = event.event;
var adjustedEvent_1 = tslib_1.__assign({}, originalEvent_1, newEventTimes);
var tempEvents = this.events.map(function (ev) {
if (ev === originalEvent_1) {
return adjustedEvent_1;
}
return ev;
});
this.restoreOriginalEvents(tempEvents, new Map([[adjustedEvent_1, originalEvent_1]]));
}
};
CalendarSchedulerViewComponent.prototype.dragEnded = function (event, dragEndEvent, dayWidth, useY) {
if (useY === void 0) { useY = false; }
this.view = this.getSchedulerView(this.events);
this.dragActive = false;
var _a = this.getDragMovedEventTimes(event, dragEndEvent, dayWidth, useY), start = _a.start, end = _a.end;
if (this.eventDragEnter > 0 && isDraggedWithinPeriod(start, end, this.view.period)) {
this.eventTimesChanged.emit({
newStart: start,
newEnd: end,
event: event.event,
type: CalendarEventTimesChangedEventType.Drag
});
}
};
CalendarSchedulerViewComponent.prototype.getDragMovedEventTimes = function (event, dragEndEvent, dayWidth, useY) {
var daysDragged = roundToNearest(dragEndEvent.x, dayWidth) / dayWidth;
var minutesMoved = useY ?
getMinutesMoved(dragEndEvent.y, this.hourSegments, this.hourSegmentHeight, this.eventSnapSize)
: 0;
var start = this.dateAdapter.addMinutes(this.dateAdapter.addDays(event.event.start, daysDragged), minutesMoved);
var end;
if (event.event.end) {
end = this.dateAdapter.addMinutes(this.dateAdapter.addDays(event.event.end, daysDragged), minutesMoved);
}
return { start: start, end: end };
};
CalendarSchedulerViewComponent.prototype.restoreOriginalEvents = function (tempEvents, adjustedEvents) {
this.refreshBody(tempEvents);
var adjustedEventsArray = tempEvents.filter(function (event) { return adjustedEvents.has(event); });
this.view.days.forEach(function (day) {
adjustedEventsArray.forEach(function (adjustedEvent) {
var originalEvent = adjustedEvents.get(adjustedEvent);
var existingColumnEvent = day.events.find(function (ev) { return ev.event === adjustedEvent; });
if (existingColumnEvent) {
// restore the original event so trackBy kicks in and the dom isn't changed
existingColumnEvent.event = originalEvent;
}
else {
// add a dummy event to the drop so if the event was removed from the original column the drag doesn't end early
day.events.push({
event: originalEvent,
left: 0,
top: 0,
height: 0,
width: 0,
startsBeforeDay: false,
endsAfterDay: false
});
}
});
});
adjustedEvents.clear();
};
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Date)
], CalendarSchedulerViewComponent.prototype, "viewDate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], CalendarSchedulerViewComponent.prototype, "events", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "hourSegments", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "hourSegmentHeight", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], CalendarSchedulerViewComponent.prototype, "excludeDays", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "startsWithToday", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showEventContent", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showEventActions", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showEventStatus", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showSegmentHour", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "dayModifier", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "hourModifier", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "segmentModifier", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "eventModifier", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Subject)
], CalendarSchedulerViewComponent.prototype, "refresh", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", String)
], CalendarSchedulerViewComponent.prototype, "locale", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "eventSnapSize", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "snapDraggedEvents", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "weekStartsOn", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "headerTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "cellTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "eventTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "eventTitleTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "allDayEventTemplate", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Array)
], CalendarSchedulerViewComponent.prototype, "weekendDays", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayStartHour", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayStartMinute", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayEndHour", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayEndMinute", void 0);
tslib_1.__decorate([
Input(),
tslib_1.__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "eventWidthPercent", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "dayHeaderClicked", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "hourClicked", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "segmentClicked", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "eventClicked", void 0);
tslib_1.__decorate([
Output(),
tslib_1.__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "eventTimesChanged", void 0);
CalendarSchedulerViewComponent = tslib_1.__decorate([
Component({
selector: 'calendar-scheduler-view',
template: "\n <div class=\"cal-scheduler-view\">\n <calendar-scheduler-header\n [days]=\"days\"\n [locale]=\"locale\"\n [customTemplate]=\"headerTemplate\"\n (dayHeaderClicked)=\"dayHeaderClicked.emit($event)\">\n </calendar-scheduler-header>\n\n <div class=\"cal-scheduler\" #calendarContainer>\n <div class=\"cal-scheduler-hour-rows aside\">\n <div class=\"cal-scheduler-hour align-center horizontal\" *ngFor=\"let hour of hours; trackBy:trackByHour\">\n <div class=\"cal-scheduler-time\">\n <div class=\"cal-scheduler-time-segment\" *ngFor=\"let segment of hour.segments\"\n [style.height.px]=\"hourSegmentHeight\">\n {{ segment.date | calendarDate:'dayViewHour':locale }}\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"cal-scheduler-cols aside\" #dayColumns\n [class.cal-resize-active]=\"resizes.size > 0\"\n mwlDroppable\n (dragEnter)=\"eventDragEnter = eventDragEnter + 1\"\n (dragLeave)=\"eventDragEnter = eventDragEnter - 1\">\n <div class=\"cal-scheduler-col\"\n *ngFor=\"let day of view.days; trackBy:trackByHourColumn\"\n [ngClass]=\"day?.cssClass\"\n [style.backgroundColor]=\"day.backgroundColor\">\n <div #eventContainer\n class=\"cal-scheduler-event-container\"\n *ngFor=\"let event of day.events; trackBy:trackByDayOrEvent\"\n [ngClass]=\"event.event?.cssClass\"\n [hidden]=\"event.height === 0 && event.width === 0\"\n [style.top.px]=\"event.top\"\n [style.height.px]=\"event.height\"\n [style.left.%]=\"event.left\"\n [style.width.%]=\"event.width\"\n\n mwlResizable\n [resizeSnapGrid]=\"{left: dayColumnWidth, right: dayColumnWidth, top: eventSnapSize || hourSegmentHeight, bottom: eventSnapSize || hourSegmentHeight}\"\n [validateResize]=\"validateResize\"\n [allowNegativeResizes]=\"true\"\n (resizeStart)=\"resizeStarted(dayColumns, event, $event)\"\n (resizing)=\"resizing(event, $event)\"\n (resizeEnd)=\"resizeEnded(event)\"\n\n mwlDraggable\n dragActiveClass=\"cal-drag-active\"\n [dropData]=\"{event: event.event, calendarId: calendarId}\"\n [dragAxis]=\"{\n x: event.event.draggable && resizes.size === 0,\n y: event.event.draggable && resizes.size === 0\n }\"\n [dragSnapGrid]=\"snapDraggedEvents ? {x: dayColumnWidth, y: eventSnapSize || hourSegmentHeight} : {}\"\n [ghostDragEnabled]=\"!snapDraggedEvents\"\n [validateDrag]=\"validateDrag\"\n (dragPointerDown)=\"dragStarted(dayColumns, eventContainer, event)\"\n (dragging)=\"dragMove(event, $event)\"\n (dragEnd)=\"dragEnded(event, $event, dayColumnWidth, true)\">\n\n <div *ngIf=\"event.event?.resizable?.beforeStart && !event.startsBeforeDay\"\n class=\"cal-resize-handle cal-resize-handle-before-start\"\n mwlResizeHandle\n [resizeEdges]=\"{\n left: true,\n top: true\n }\">\n </div>\n <calendar-scheduler-event\n [day]=\"day\"\n [event]=\"event\"\n [showContent]=\"showEventContent && event.height >= 75\"\n [showActions]=\"showEventActions\"\n [showStatus]=\"showEventStatus\"\n [customTemplate]=\"eventTemplate\"\n [eventTitleTemplate]=\"eventTitleTemplate\"\n (eventClicked)=\"eventClicked.emit($event)\">\n </calendar-scheduler-event>\n <div *ngIf=\"event.event?.resizable?.afterEnd && !event.endsAfterDay\"\n class=\"cal-resize-handle cal-resize-handle-after-end\"\n mwlResizeHandle\n [resizeEdges]=\"{\n right: true,\n bottom: true\n }\">\n </div>\n </div>\n\n <div class=\"cal-scheduler-hour\"\n *ngFor=\"let hour of day.hours; let i = index; trackBy:trackByHour\"\n [class.cal-even]=\"i % 2 === 0\"\n [class.cal-odd]=\"i % 2 === 1\"\n [ngClass]=\"hour.cssClass\"\n [style.backgroundColor]=\"hour.backgroundColor\"\n (mwlClick)=\"hourClicked.emit({hour: hour})\"\n [class.cal-past]=\"day.isPast\"\n [class.cal-today]=\"day.isToday\"\n [class.cal-future]=\"day.isFuture\"\n [class.cal-weekend]=\"day.isWeekend\"\n [class.cal-in-month]=\"day.inMonth\"\n [class.cal-out-month]=\"!day.inMonth\">\n <div class=\"cal-scheduler-hour-segments\">\n <calendar-scheduler-hour-segment\n *ngFor=\"let segment of hour.segments; trackBy:trackByHourSegment\"\n [day]=\"day\"\n [segment]=\"segment\"\n [locale]=\"locale\"\n [customTemplate]=\"cellTemplate\"\n [hourSegmentHeight]=\"hourSegmentHeight\"\n [showHour]=\"showSegmentHour\"\n (segmentClicked)=\"segmentClicked.emit($event)\"\n mwlDroppable\n [dragOverClass]=\"!dragActive || !snapDraggedEvents ? 'cal-drag-over' : 'null'\"\n dragActiveClass=\"cal-drag-active\"\n (drop)=\"eventDropped($event, segment.date)\">\n </calendar-scheduler-hour-segment>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n ",
encapsulation: ViewEncapsulation.None,
styles: [".cal-scheduler-view *{box-sizing:border-box}.cal-scheduler-view .cal-scheduler-headers{display:flex;flex-flow:row wrap;margin-bottom:3px;border:1px solid #e1e1e1}.cal-scheduler-view .cal-scheduler-headers .aside{flex:1 0}.cal-scheduler-view .cal-scheduler-headers .aside.cal-header-clock{max-width:5em}.cal-scheduler-view .cal-scheduler-headers .cal-header{flex:1;text-align:center;padding:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}.cal-scheduler-view .cal-scheduler-headers .cal-header:not(:last-child){border-right:1px solid #e1e1e1}.cal-scheduler-view .cal-scheduler-headers .cal-header:hover{background-color:#ededed}.cal-scheduler-view .cal-scheduler-headers .cal-header.cal-today{background-color:#e8fde7}.cal-scheduler-view .cal-scheduler-headers .cal-header.cal-weekend span{color:#8b0000}.cal-scheduler-view .cal-scheduler-headers .cal-header span{font-weight:400;opacity:.5}.cal-scheduler-view .cal-scheduler,.cal-scheduler-view .cal-scheduler-headers .cal-header-cols{display:flex;flex-flow:row wrap}.cal-scheduler-view .cal-scheduler .aside{flex:1 0}.cal-scheduler-view .cal-scheduler .aside.cal-scheduler-hour-rows{max-width:5em}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows{width:auto!important;border:1px solid #e1e1e1;overflow:hidden;position:relative}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour{display:flex}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour:nth-child(odd){background-color:#fafafa}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour:not(:last-child){border-bottom:1px solid #e1e1e1}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour .cal-scheduler-time{display:flex;flex-flow:column wrap;width:100%;font-weight:700;text-align:center}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour .cal-scheduler-time .cal-scheduler-time-segment{cursor:default}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour .cal-scheduler-time .cal-scheduler-time-segment:hover{background-color:#ededed}.cal-scheduler-view .cal-scheduler .cal-scheduler-hour-rows .cal-scheduler-hour .cal-scheduler-time .cal-scheduler-time-segment:not(:last-child){border-bottom:thin dashed #e1e1e1}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols{display:flex;flex-flow:row wrap;border-top:1px solid #e1e1e1}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols:not(.cal-resize-active) .cal-scheduler-hour-segment:hover{background-color:#ededed}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col{display:flex;flex-flow:column wrap;flex:1 0;position:relative;border-right:1px solid #e1e1e1}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour{display:flex;flex-flow:column wrap;flex:1 0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour.cal-today{background-color:#e8fde7}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour.cal-disabled{background-color:#eee;pointer-events:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour.cal-odd{background:#fff}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour.cal-even{background:#fafafa}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments{display:flex;flex-flow:column wrap;flex:1 0;border-bottom:1px solid #e1e1e1}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments.no-border{border-bottom:0!important}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments.cal-disabled{background-color:#eee;pointer-events:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments.cal-disabled .cal-scheduler-event{filter:opacity(50%);-webkit-filter:opacity(50%)}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments :not(:last-child) .cal-scheduler-hour-segment{border-bottom:thin dashed #e1e1e1}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments .cal-scheduler-hour-segment{flex:1 0;display:flex;flex-flow:column wrap}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments .cal-scheduler-hour-segment.no-border{border-bottom:0!important}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments .cal-scheduler-hour-segment.cal-disabled{background-color:#eee;pointer-events:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments .cal-scheduler-hour-segment.cal-drag-over{background-color:#ededed}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-hour .cal-scheduler-hour-segments .cal-scheduler-hour-segment .cal-scheduler-time{font-weight:700;font-size:.7em;color:#6c757d}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container{flex:1 0;display:-ms-flexbox;flex-flow:column wrap;position:absolute}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event{flex:1 0;display:flex;flex-flow:column wrap;padding:0 10px;font-size:12px;margin:2px;line-height:30px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.3em;border:1px solid #1e90ff;background-color:#d1e8ff;height:calc(100% - 5px);transition:all ease-out .2s;filter:brightness(100%);-webkit-filter:brightness(100%);-webkit-backface-visibility:hidden;backface-visibility:hidden}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event.cal-cancelled,.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event.cal-disabled{background-color:gray!important;filter:grayscale(100%);-webkit-filter:grayscale(100%)}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event.cal-not-clickable{cursor:not-allowed!important}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event:not(.cal-disabled):not(.cal-cancelled):hover{cursor:pointer;filter:brightness(95%);-webkit-filter:brightness(95%)}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event:not(.cal-disabled):not(.cal-cancelled).cal-draggable{cursor:move}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event.cal-starts-before-day{border-top-left-radius:0;border-top-right-radius:0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event.cal-ends-after-day{border-bottom-left-radius:0;border-bottom-right-radius:0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-title-container{width:100%;display:flex;flex-flow:row wrap}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-title-container .cal-scheduler-event-title{flex:1 0;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-title-container .cal-scheduler-event-status{margin:7px 0;width:16px;height:16px;background:grey;border-radius:50px;border:1px solid #000}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-title-container .cal-scheduler-event-status.ok{background:green}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-title-container .cal-scheduler-event-status.warning{background:orange}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-title-container .cal-scheduler-event-status.danger{background:red}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-content-container{flex:1 auto;width:100%;padding-right:1.5em}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-content-container .cal-scheduler-event-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-actions-container{width:100%;position:relative}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-actions-container.no-content-actions{flex:1 0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-actions-container:not(.no-content-actions) .cal-scheduler-event-actions{position:absolute;bottom:5px;right:0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-scheduler-event .cal-scheduler-event-actions-container .cal-scheduler-event-actions .cal-scheduler-event-action{text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-resize-handle{width:100%;height:4px;cursor:row-resize;position:absolute}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container .cal-resize-handle.cal-resize-handle-after-end{bottom:0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.cal-drag-active{pointer-events:none;z-index:999}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.cal-drag-active *{pointer-events:none}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day1{left:5%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day2{left:10%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day3{left:15%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day4{left:20%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day5{left:25%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day6{left:30%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.day7{left:35%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.time0000{top:0}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.time0015{top:1.47%}.cal-scheduler-view .cal-scheduler .cal-scheduler-cols .cal-scheduler-col .cal-scheduler-event-container.time00