UNPKG

angular-calendar-scheduler

Version:

This project provide a scheduler view component for [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar).

1,082 lines (1,065 loc) 126 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('angular-calendar/date-adapters/date-fns'), require('angular-calendar'), require('rxjs'), require('date-fns'), require('angular-calendar/esm2015/modules/common/calendar-drag-helper.provider'), require('angular-calendar/esm2015/modules/common/calendar-resize-helper.provider'), require('moment')) : typeof define === 'function' && define.amd ? define('angular-calendar-scheduler', ['exports', '@angular/core', '@angular/common', 'angular-calendar/date-adapters/date-fns', 'angular-calendar', 'rxjs', 'date-fns', 'angular-calendar/esm2015/modules/common/calendar-drag-helper.provider', 'angular-calendar/esm2015/modules/common/calendar-resize-helper.provider', 'moment'], factory) : (global = global || self, factory(global['angular-calendar-scheduler'] = {}, global.ng.core, global.ng.common, global.dateFns, global.angularCalendar, global.rxjs, global.dateFns$1, global.calendarDragHelper_provider, global.calendarResizeHelper_provider, global.momentImported)); }(this, function (exports, core, common, dateFns, angularCalendar, rxjs, dateFns$1, calendarDragHelper_provider, calendarResizeHelper_provider, momentImported) { 'use strict'; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. ***************************************************************************** */ /* global Reflect, Promise */ 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); }; function __extends(d, b) { extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } var __assign = function() { __assign = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; function __rest(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]]; return t; } function __decorate(decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; } function __param(paramIndex, decorator) { return function (target, key) { decorator(target, key, paramIndex); } } function __metadata(metadataKey, metadataValue) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); } function __read(o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; var i = m.call(o), r, ar = [], e; try { while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); } catch (error) { e = { error: error }; } finally { try { if (r && !r.done && (m = i["return"])) m.call(i); } finally { if (e) throw e.error; } } return ar; } function __spread() { for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i])); return ar; } /** * 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([ core.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([ core.Injectable(), __metadata("design:paramtypes", [angularCalendar.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 core.EventEmitter(); /** * Called when the hour is clicked */ this.hourClicked = new core.EventEmitter(); /** * Called when the segment is clicked */ this.segmentClicked = new core.EventEmitter(); /** * Called when the event is clicked */ this.eventClicked = new core.EventEmitter(); /** * Called when an event is resized or dragged and dropped */ this.eventTimesChanged = new core.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 (dateFns$1.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 (dateFns$1.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_provider.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: angularCalendar.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: angularCalendar.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_provider.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: angularCalendar.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([ core.Input(), __metadata("design:type", Date) ], CalendarSchedulerViewComponent.prototype, "viewDate", void 0); __decorate([ core.Input(), __metadata("design:type", Array) ], CalendarSchedulerViewComponent.prototype, "events", void 0); __decorate([ core.Input(), __metadata("design:type", Number) ], CalendarSchedulerViewComponent.prototype, "hourSegments", void 0); __decorate([ core.Input(), __metadata("design:type", Number) ], CalendarSchedulerViewComponent.prototype, "hourSegmentHeight", void 0); __decorate([ core.Input(), __metadata("design:type", Array) ], CalendarSchedulerViewComponent.prototype, "excludeDays", void 0); __decorate([ core.Input(), __metadata("design:type", Boolean) ], CalendarSchedulerViewComponent.prototype, "startsWithToday", void 0); __decorate([ core.Input(), __metadata("design:type", Boolean) ], CalendarSchedulerViewComponent.prototype, "showEventContent", void 0); __decorate([ core.Input(), __metadata("design:type", Boolean) ], CalendarSchedulerViewComponent.prototype, "showEventActions", void 0); __decorate([ core.Input(), __metadata("design:type", Boolean) ], CalendarSchedulerViewComponent.prototype, "showEventStatus", void 0); __decorate([ core.Input(), __metadata("design:type", Boolean) ], CalendarSchedulerViewComponent.prototype, "showSegmentHour", void 0); __decorate([ core.Input(), __metadata("design:type", Function) ], CalendarSchedulerViewComponent.prototype, "dayModifier", void 0); __decorate([ core.Input(), __metadata("design:type", Function) ], CalendarSchedulerViewComponent.prototype, "hourModifier", void 0); __decorate([ core.Input(), __metadata("design:type", Function) ], CalendarSchedulerViewComponent.prototype, "segmentModifier", void 0); __decorate([ core.Input(), __metadata("design:type", Function) ], CalendarSchedulerViewComponent.prototype, "eventModifier", void 0); __decorate([ core.Input(), __metadata("design:type", rxjs.Subject) ], CalendarSchedulerViewComponent.prototype, "refresh", void 0); __decorate([ core.Input(), __metadata("design:type", String) ], CalendarSchedulerViewComponent.prototype, "locale", void 0); __decorate([ core.Input(), __metadata("design:type", Number) ], CalendarSchedulerViewComponent.prototype, "eventSnapSize", void 0); __decorate([ core.Input(), __metadata("design:type", Boolean) ], CalendarSchedulerViewComponent.prototype, "snapDraggedEvents", void 0); __decorate([ core.Input(), __metadata("design:type", Number) ], CalendarSchedulerViewComponent.prototype, "weekStartsOn", void 0); __decorate([ core.Input(), __metadata("design:type", c