angular-calendar-scheduler
Version:
This project provide a scheduler view component for [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar).
1,064 lines (1,059 loc) • 114 kB
JavaScript
import { __decorate, __metadata, __spread, __assign, __rest, __param, __extends } from 'tslib';
import { Injectable, Input, TemplateRef, Output, EventEmitter, Component, ViewEncapsulation, Inject, LOCALE_ID, ChangeDetectorRef, Pipe, InjectionToken, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { DateAdapter, CalendarEventTimesChangedEventType, CalendarEventTitleFormatter, CalendarDateFormatter, CalendarModule } from 'angular-calendar';
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 * as momentImported from 'moment';
/**
* Auth configuration.
*/
var SchedulerConfig = /** @class */ (function () {
function SchedulerConfig(config) {
if (config === void 0) { config = {}; }
this.locale = 'en';
this.headerDateFormat = 'daysRange';
function use(source, defaultValue) {
return config && source !== undefined ? source : defaultValue;
}
this.locale = use(config.locale, this.locale);
this.headerDateFormat = use(config.headerDateFormat, this.headerDateFormat);
}
SchedulerConfig = __decorate([
Injectable(),
__metadata("design:paramtypes", [SchedulerConfig])
], SchedulerConfig);
return SchedulerConfig;
}());
var DAYS_OF_WEEK;
(function (DAYS_OF_WEEK) {
DAYS_OF_WEEK[DAYS_OF_WEEK["SUNDAY"] = 0] = "SUNDAY";
DAYS_OF_WEEK[DAYS_OF_WEEK["MONDAY"] = 1] = "MONDAY";
DAYS_OF_WEEK[DAYS_OF_WEEK["TUESDAY"] = 2] = "TUESDAY";
DAYS_OF_WEEK[DAYS_OF_WEEK["WEDNESDAY"] = 3] = "WEDNESDAY";
DAYS_OF_WEEK[DAYS_OF_WEEK["THURSDAY"] = 4] = "THURSDAY";
DAYS_OF_WEEK[DAYS_OF_WEEK["FRIDAY"] = 5] = "FRIDAY";
DAYS_OF_WEEK[DAYS_OF_WEEK["SATURDAY"] = 6] = "SATURDAY";
})(DAYS_OF_WEEK || (DAYS_OF_WEEK = {}));
var DEFAULT_WEEKEND_DAYS = [
DAYS_OF_WEEK.SUNDAY,
DAYS_OF_WEEK.SATURDAY
];
var DAYS_IN_WEEK = 7;
var MINUTES_IN_HOUR = 60;
var DEFAULT_HOUR_SEGMENT_HEIGHT_PX = 40;
var DEFAULT_EVENT_WIDTH_PERCENT = 100;
var DEFAULT_HOUR_SEGMENTS = 2;
function getSchedulerViewHourGrid(dateAdapter, args) {
var viewDate = args.viewDate, hourSegments = args.hourSegments, dayStart = args.dayStart, dayEnd = args.dayEnd;
var hours = [];
var startOfView = dateAdapter.setMinutes(dateAdapter.setHours(dateAdapter.startOfDay(viewDate), dayStart.hour), dayStart.minute);
var endOfView = dateAdapter.setMinutes(dateAdapter.setHours(dateAdapter.startOfMinute(dateAdapter.endOfDay(viewDate)), dayEnd.hour), dayEnd.minute);
var segmentDuration = MINUTES_IN_HOUR / hourSegments;
var startOfViewDay = dateAdapter.startOfDay(viewDate);
var range = function (start, end) { return Array.from({ length: ((end + 1) - start) }, function (v, k) { return k + start; }); };
var hoursInView = range(dayStart.hour, dayEnd.hour);
hoursInView.forEach(function (hour, i) {
var segments = [];
for (var j = 0; j < hourSegments; j++) {
var date = dateAdapter.addMinutes(dateAdapter.addHours(startOfViewDay, hour), j * segmentDuration);
if (date >= startOfView && date < endOfView) {
segments.push({
date: date,
isStart: j === 0
});
}
}
if (segments.length > 0) {
hours.push({ segments: segments });
}
});
return hours;
}
function getSchedulerView(dateAdapter, args) {
var events = args.events || [];
if (!events) {
events = [];
}
var viewDate = args.viewDate;
var weekStartsOn = args.weekStartsOn;
var startsWithToday = args.startsWithToday;
var excluded = args.excluded || [];
var hourSegments = args.hourSegments || DEFAULT_HOUR_SEGMENTS;
var hourSegmentHeight = args.hourSegmentHeight || DEFAULT_HOUR_SEGMENT_HEIGHT_PX;
var eventWidth = args.eventWidth || DEFAULT_EVENT_WIDTH_PERCENT;
var dayStart = args.dayStart, dayEnd = args.dayEnd;
var startOfViewWeek = startsWithToday ? dateAdapter.startOfDay(viewDate) : dateAdapter.startOfWeek(viewDate, { weekStartsOn: weekStartsOn });
var endOfViewWeek = startsWithToday ? dateAdapter.addDays(dateAdapter.endOfDay(viewDate), 6) : dateAdapter.endOfWeek(viewDate, { weekStartsOn: weekStartsOn });
var eventsInWeek = getEventsInPeriod(dateAdapter, {
events: events,
periodStart: startOfViewWeek,
periodEnd: endOfViewWeek
});
var days = getSchedulerViewDays(dateAdapter, {
viewDate: viewDate,
weekStartsOn: weekStartsOn,
startsWithToday: startsWithToday,
excluded: excluded
});
days.forEach(function (day) {
var startOfView = dateAdapter.setMinutes(dateAdapter.setHours(dateAdapter.startOfDay(day.date), dayStart.hour), dayStart.minute);
var endOfView = dateAdapter.setMinutes(dateAdapter.setHours(dateAdapter.startOfMinute(dateAdapter.endOfDay(day.date)), dayEnd.hour), dayEnd.minute);
var previousDayEvents = [];
var eventsInDay = getEventsInPeriod(dateAdapter, {
events: eventsInWeek,
periodStart: startOfView,
periodEnd: endOfView
});
day.events = eventsInDay
.sort(function (eventA, eventB) { return eventA.start.valueOf() - eventB.start.valueOf(); })
.map(function (ev) {
var eventStart = ev.start;
var eventEnd = ev.end || eventStart;
var startsBeforeDay = eventStart < startOfView;
var endsAfterDay = dateAdapter.addMinutes(eventEnd, -1) > endOfView;
var hourHeightModifier = ((hourSegments * hourSegmentHeight) + 1) / MINUTES_IN_HOUR; // +1 for the 1px segment bottom border
var top = 0;
if (eventStart > startOfView) {
top += dateAdapter.differenceInMinutes(eventStart, startOfView);
}
top *= hourHeightModifier;
var startDate = startsBeforeDay ? startOfView : eventStart;
var endDate = endsAfterDay ? endOfView : eventEnd;
var height = dateAdapter.differenceInMinutes(endDate, startDate);
if (!ev.end) {
height = hourSegmentHeight;
}
else {
height *= hourHeightModifier;
}
var bottom = top + height;
var overlappingPreviousEvents = getOverLappingDayViewEvents(previousDayEvents, top, bottom);
var left = 0;
while (overlappingPreviousEvents.some(function (previousEvent) { return previousEvent.left === left; })) {
left += eventWidth;
}
var event = {
event: ev,
top: top,
height: height,
width: eventWidth,
left: left,
startsBeforeDay: startsBeforeDay,
endsAfterDay: endsAfterDay,
isProcessed: false
};
previousDayEvents.push(event);
return event;
});
day.hours = getSchedulerViewHourGrid(dateAdapter, {
viewDate: viewDate,
hourSegments: hourSegments,
dayStart: {
hour: dayStart.hour,
minute: dayStart.minute
},
dayEnd: {
hour: dayEnd.hour,
minute: dayEnd.minute
}
}).map(function (hour) {
var date = new Date(day.date.getFullYear(), day.date.getMonth(), day.date.getDate(), hour.segments[0].date.getHours());
var startOfHour = new Date(day.date.getFullYear(), day.date.getMonth(), day.date.getDate(), hour.segments[0].date.getHours());
var endOfHour = dateAdapter.addMinutes(dateAdapter.addHours(startOfHour, 1), -1);
var eventsInHour = getEventsInPeriod(dateAdapter, {
events: eventsInDay,
periodStart: startOfHour,
periodEnd: endOfHour
});
var segments = hour.segments.map(function (segment) {
segment.date = dateAdapter.setDate(dateAdapter.setMonth(dateAdapter.setYear(segment.date, day.date.getFullYear()), day.date.getMonth()), day.date.getDate());
var startOfSegment = segment.date;
var endOfSegment = dateAdapter.addMinutes(segment.date, MINUTES_IN_HOUR / hourSegments);
var eventsInSegment = getEventsInPeriod(dateAdapter, {
events: eventsInHour,
periodStart: startOfSegment,
periodEnd: endOfSegment
});
return {
segment: segment,
date: new Date(segment.date),
events: eventsInSegment
};
});
return {
hour: hour,
date: date,
events: eventsInHour,
segments: segments
};
});
});
return {
days: days,
period: {
events: eventsInWeek,
start: startOfViewWeek,
end: endOfViewWeek
}
};
}
function getSchedulerViewDays(dateAdapter, args) {
var viewDate = args.viewDate;
var weekStartsOn = args.weekStartsOn;
var startsWithToday = args.startsWithToday;
var excluded = args.excluded || [];
var weekendDays = args.weekendDays || DEFAULT_WEEKEND_DAYS;
var start = startsWithToday ? new Date(viewDate) : dateAdapter.startOfWeek(viewDate, { weekStartsOn: weekStartsOn });
var days = [];
var loop = function (i) {
var date = dateAdapter.addDays(start, i);
if (!excluded.some(function (e) { return date.getDay() === e; })) {
days.push(getSchedulerDay(dateAdapter, { date: date, weekendDays: weekendDays }));
}
};
for (var i = 0; i < DAYS_IN_WEEK; i++) {
loop(i);
}
return days;
}
function getSchedulerDay(dateAdapter, args) {
var date = args.date;
var today = dateAdapter.startOfDay(new Date());
return {
date: date,
isPast: date < today,
isToday: dateAdapter.isSameDay(date, today),
isFuture: date >= dateAdapter.addDays(today, 1),
isWeekend: args.weekendDays.indexOf(dateAdapter.getDay(date)) > -1,
inMonth: dateAdapter.isSameMonth(date, today),
hours: []
};
}
function getEventsInPeriod(dateAdapter, args) {
var events = args.events, periodStart = args.periodStart, periodEnd = args.periodEnd;
return events.filter(function (event) { return isEventInPeriod(dateAdapter, { event: event, periodStart: periodStart, periodEnd: periodEnd }); });
}
function isEventInPeriod(dateAdapter, args) {
var isSameSecond = dateAdapter.isSameSecond;
var event = args.event, periodStart = args.periodStart, periodEnd = args.periodEnd;
var eventStart = event.start;
var eventEnd = event.end || event.start;
if (eventStart > periodStart && eventStart < periodEnd) {
return true;
}
if (eventEnd > periodStart && eventEnd < periodEnd) {
return true;
}
if (eventStart < periodStart && eventEnd > periodEnd) {
return true;
}
if (isSameSecond(eventStart, periodStart) || isSameSecond(eventStart, periodEnd)) {
return true;
}
if (isSameSecond(eventEnd, periodStart) || isSameSecond(eventEnd, periodEnd)) {
return true;
}
return false;
}
function getOverLappingDayViewEvents(events, top, bottom) {
return events.filter(function (previousEvent) {
var previousEventTop = previousEvent.top;
var previousEventBottom = previousEvent.top + previousEvent.height;
if (top < previousEventBottom && previousEventBottom < bottom) {
return true;
}
else if (previousEventTop <= top && bottom <= previousEventBottom) {
return true;
}
return false;
});
}
function addPeriod(dateAdapter, period, date, amount) {
return {
day: dateAdapter.addDays,
week: dateAdapter.addWeeks,
month: dateAdapter.addMonths
}[period](date, amount);
}
function subPeriod(dateAdapter, period, date, amount) {
return {
day: dateAdapter.subDays,
week: dateAdapter.subWeeks,
month: dateAdapter.subMonths
}[period](date, amount);
}
function startOfPeriod(dateAdapter, period, date) {
return {
day: dateAdapter.startOfDay,
week: dateAdapter.startOfWeek,
month: dateAdapter.startOfMonth
}[period](date);
}
function endOfPeriod(dateAdapter, period, date) {
return {
day: dateAdapter.endOfDay,
week: dateAdapter.endOfWeek,
month: dateAdapter.endOfMonth
}[period](date);
}
var trackByDayOrEvent = function (index, event) {
return (event.event.id ? event.event.id : event.event);
};
var trackByHourColumn = function (index, day) {
return day.hours[0] ? day.hours[0].segments[0].date.toISOString() : day;
};
var trackByHour = function (index, hour) {
return hour.segments[0].date.toISOString();
};
var trackByHourSegment = function (index, segment) {
return segment.date.toISOString();
};
function getMinimumEventHeightInMinutes(hourSegments, hourSegmentHeight) {
return (MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight)) * hourSegmentHeight;
}
function getDefaultEventEnd(dateAdapter, event, minimumMinutes) {
return event.end ? event.end : dateAdapter.addMinutes(event.start, minimumMinutes);
}
function roundToNearest(amount, precision) {
return Math.round(amount / precision) * precision;
}
function getMinutesMoved(movedY, hourSegments, hourSegmentHeight, eventSnapSize) {
var draggedInPixelsSnapSize = roundToNearest(movedY, eventSnapSize || hourSegmentHeight);
var pixelAmountInMinutes = MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight);
return draggedInPixelsSnapSize * pixelAmountInMinutes;
}
function isDraggedWithinPeriod(newStart, newEnd, period) {
var end = newEnd || newStart;
return ((period.start <= newStart && newStart <= period.end) ||
(period.start <= end && end <= period.end));
}
function shouldFireDroppedEvent(dropEvent, date, calendarId) {
return (dropEvent.dropData &&
dropEvent.dropData.event &&
dropEvent.dropData.calendarId !== calendarId);
}
var CalendarSchedulerUtils = /** @class */ (function () {
function CalendarSchedulerUtils(dateAdapter) {
this.dateAdapter = dateAdapter;
}
CalendarSchedulerUtils.prototype.getSchedulerViewHourGrid = function (args) {
return getSchedulerViewHourGrid(this.dateAdapter, args);
};
CalendarSchedulerUtils.prototype.getSchedulerViewDays = function (args) {
return getSchedulerViewDays(this.dateAdapter, args);
};
CalendarSchedulerUtils.prototype.getSchedulerView = function (args) {
return getSchedulerView(this.dateAdapter, args);
};
CalendarSchedulerUtils = __decorate([
Injectable(),
__metadata("design:paramtypes", [DateAdapter])
], CalendarSchedulerUtils);
return CalendarSchedulerUtils;
}());
/**
* [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) ;
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 = __spread(this.events);
this.resizes.forEach(function (lastResizeEvent, ev) {
var newEventDates = _this.getResizedEventDates(ev, lastResizeEvent);
var adjustedEvent = __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 = __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 = __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();
};
__decorate([
Input(),
__metadata("design:type", Date)
], CalendarSchedulerViewComponent.prototype, "viewDate", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], CalendarSchedulerViewComponent.prototype, "events", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "hourSegments", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "hourSegmentHeight", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], CalendarSchedulerViewComponent.prototype, "excludeDays", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "startsWithToday", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showEventContent", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showEventActions", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showEventStatus", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "showSegmentHour", void 0);
__decorate([
Input(),
__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "dayModifier", void 0);
__decorate([
Input(),
__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "hourModifier", void 0);
__decorate([
Input(),
__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "segmentModifier", void 0);
__decorate([
Input(),
__metadata("design:type", Function)
], CalendarSchedulerViewComponent.prototype, "eventModifier", void 0);
__decorate([
Input(),
__metadata("design:type", Subject)
], CalendarSchedulerViewComponent.prototype, "refresh", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], CalendarSchedulerViewComponent.prototype, "locale", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "eventSnapSize", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean)
], CalendarSchedulerViewComponent.prototype, "snapDraggedEvents", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "weekStartsOn", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "headerTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "cellTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "eventTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "eventTitleTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", TemplateRef)
], CalendarSchedulerViewComponent.prototype, "allDayEventTemplate", void 0);
__decorate([
Input(),
__metadata("design:type", Array)
], CalendarSchedulerViewComponent.prototype, "weekendDays", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayStartHour", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayStartMinute", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayEndHour", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "dayEndMinute", void 0);
__decorate([
Input(),
__metadata("design:type", Number)
], CalendarSchedulerViewComponent.prototype, "eventWidthPercent", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "dayHeaderClicked", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "hourClicked", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "segmentClicked", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "eventClicked", void 0);
__decorate([
Output(),
__metadata("design:type", EventEmitter)
], CalendarSchedulerViewComponent.prototype, "eventTimesChanged", void 0);
CalendarSchedulerViewComponent = __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