{"version":3,"file":"angular-calendar-scheduler.mjs","sources":["../../lib/modules/scheduler/utils/calendar-scheduler-utils.ts","../../lib/modules/common/utils.ts","../../lib/modules/common/temp/util.ts","../../lib/modules/common/temp/calendar-resize-helper.provider.ts","../../lib/modules/common/temp/calendar-drag-helper.provider.ts","../../lib/modules/scheduler/scheduler-config.ts","../../lib/modules/scheduler/utils/calendar-scheduler-utils.provider.ts","../../lib/modules/scheduler/calendar-scheduler-hour-segment.component.ts","../../lib/modules/scheduler/calendar-scheduler-header.component.ts","../../lib/modules/scheduler/calendar-scheduler-event-actions.component.ts","../../lib/modules/scheduler/formatters/scheduler-event-title-formatter.provider.ts","../../lib/modules/scheduler/pipes/scheduler-event-title.pipe.ts","../../lib/modules/scheduler/calendar-scheduler-event-title.component.ts","../../lib/modules/scheduler/calendar-scheduler-event-content.component.ts","../../lib/modules/scheduler/calendar-scheduler-event.component.ts","../../lib/modules/scheduler/calendar-scheduler-view.component.ts","../../lib/modules/scheduler/pipes/calendar-scheduler-date.pipe.ts","../../lib/modules/scheduler/formatters/scheduler-date-formatter.provider.ts","../../lib/modules/scheduler/scheduler.module.ts","../../lib/angular-calendar-scheduler.ts"],"sourcesContent":["import {\n CalendarSchedulerEvent,\n SchedulerViewHour,\n SchedulerViewDay,\n SchedulerViewEvent,\n SchedulerViewHourSegment,\n SchedulerView,\n SchedulerViewPeriod\n} from '../models';\nimport {\n WeekViewHour,\n WeekViewHourSegment\n} from 'calendar-utils';\nimport { DateAdapter } from 'angular-calendar';\n\n// import * as momentNS from 'moment';\n// const moment = momentNS;\n// import moment from 'moment-timezone';\n\nexport enum DAYS_OF_WEEK {\n SUNDAY = 0,\n MONDAY = 1,\n TUESDAY = 2,\n WEDNESDAY = 3,\n THURSDAY = 4,\n FRIDAY = 5,\n SATURDAY = 6\n}\n\nconst DEFAULT_WEEKEND_DAYS: number[] = [\n DAYS_OF_WEEK.SUNDAY,\n DAYS_OF_WEEK.SATURDAY\n];\n\nexport const DAYS_IN_WEEK: number = 7;\nexport const HOURS_IN_DAY: number = 24;\nexport const MINUTES_IN_HOUR: number = 60;\nexport const SECONDS_IN_DAY: number = 60 * 60 * 24;\n\nexport const DEFAULT_HOUR_SEGMENT_HEIGHT_PX = 40;\nexport const DEFAULT_EVENT_WIDTH = 1;\nexport const DEFAULT_HOUR_SEGMENTS = 2;\n\nexport interface Time {\n hour: number;\n minute: number;\n }\n\nexport interface GetSchedulerViewHourGridArgs {\n viewDate: Date;\n hourSegments: number;\n dayStart: Time;\n dayEnd: Time;\n}\n\nexport function getSchedulerViewHourGrid(\n dateAdapter: DateAdapter,\n {\n viewDate,\n hourSegments,\n dayStart,\n dayEnd\n }: GetSchedulerViewHourGridArgs\n): WeekViewHour[] {\n const {\n setMinutes,\n setHours,\n startOfDay,\n startOfMinute,\n endOfDay,\n addMinutes,\n addHours,\n addDays\n } = dateAdapter;\n const hours: WeekViewHour[] = [];\n\n let startOfView: Date = setMinutes(\n setHours(startOfDay(viewDate), sanitiseHours(dayStart.hour)),\n sanitiseMinutes(dayStart.minute)\n );\n let endOfView: Date = setMinutes(\n setHours(startOfMinute(endOfDay(viewDate)), sanitiseHours(dayEnd.hour)),\n sanitiseMinutes(dayEnd.minute)\n );\n const segmentDuration: number = MINUTES_IN_HOUR / hourSegments;\n let startOfViewDay: Date = startOfDay(viewDate);\n const endOfViewDay: Date = endOfDay(viewDate);\n let dateAdjustment: (d: Date) => Date = (d: Date) => d;\n\n // this means that we change from or to DST on this day and that's going to cause problems so we bump the date\n if (startOfViewDay.getTimezoneOffset() !== endOfViewDay.getTimezoneOffset()) {\n startOfViewDay = addDays(startOfViewDay, 1);\n startOfView = addDays(startOfView, 1);\n endOfView = addDays(endOfView, 1);\n dateAdjustment = (d: Date) => addDays(d, -1);\n }\n\n for (let i: number = 0; i < HOURS_IN_DAY; i++) {\n }\n\n for (let i: number = 0; i < HOURS_IN_DAY; i++) {\n const segments: WeekViewHourSegment[] = [];\n for (let j: number = 0; j < hourSegments; j++) {\n const date: Date = addMinutes(\n addHours(startOfViewDay, i),\n j * segmentDuration\n );\n if (date >= startOfView && date < endOfView) {\n segments.push({\n date: dateAdjustment(date),\n displayDate: date,\n isStart: j === 0\n });\n }\n }\n if (segments.length > 0) {\n hours.push({ segments });\n }\n }\n\n return hours;\n}\n\nexport interface GetSchedulerViewArgs {\n events?: CalendarSchedulerEvent[];\n viewDate: Date;\n viewDays: number;\n hourSegments: 1 | 2 | 4 | 6;\n weekStartsOn: number;\n startsWithToday: boolean;\n dayStart: Time;\n dayEnd: Time;\n weekendDays?: number[];\n excluded?: number[];\n eventWidth: number;\n hourSegmentHeight: number;\n logEnabled?: boolean;\n}\n\nexport function getSchedulerView(\n dateAdapter: DateAdapter,\n moment: any,\n {\n events = [],\n viewDate,\n viewDays,\n weekStartsOn,\n startsWithToday,\n excluded = [],\n hourSegments = DEFAULT_HOUR_SEGMENTS,\n dayStart,\n dayEnd,\n weekendDays = DEFAULT_WEEKEND_DAYS,\n hourSegmentHeight = DEFAULT_HOUR_SEGMENT_HEIGHT_PX,\n eventWidth = DEFAULT_EVENT_WIDTH,\n logEnabled,\n }: GetSchedulerViewArgs\n): SchedulerView {\n if (!events) { events = []; }\n\n const { addDays, startOfDay, endOfDay, startOfWeek, endOfWeek } = dateAdapter;\n const startOfViewWeek: Date = startsWithToday || viewDays < DAYS_IN_WEEK ? startOfDay(viewDate) : startOfWeek(viewDate, { weekStartsOn: weekStartsOn });\n const endOfViewWeek: Date = startsWithToday || viewDays < DAYS_IN_WEEK ? addDays(endOfDay(viewDate), viewDays - 1) : endOfWeek(viewDate, { weekStartsOn: weekStartsOn });\n\n const eventsInWeek: CalendarSchedulerEvent[] = getEventsInPeriod(dateAdapter, {\n events: events,\n periodStart: startOfViewWeek,\n periodEnd: endOfViewWeek\n });\n\n const days: SchedulerViewDay[] = getSchedulerViewDays(dateAdapter, {\n viewDate: viewDate,\n viewDays: viewDays,\n weekStartsOn: weekStartsOn,\n startsWithToday: startsWithToday,\n excluded: excluded,\n weekendDays: weekendDays\n });\n days.forEach((day: SchedulerViewDay) => {\n const startOfView: Date = dateAdapter.setMinutes(dateAdapter.setHours(dateAdapter.startOfDay(day.date), dayStart.hour), dayStart.minute);\n const endOfView: Date = dateAdapter.setMinutes(dateAdapter.setHours(dateAdapter.startOfMinute(dateAdapter.endOfDay(day.date)), dayEnd.hour), dayEnd.minute);\n const previousDayEvents: SchedulerViewEvent[] = [];\n\n const eventsInDay: CalendarSchedulerEvent[] = getEventsInPeriod(dateAdapter, {\n events: eventsInWeek,\n periodStart: startOfView,\n periodEnd: endOfView\n });\n\n const dayEvents = eventsInDay\n .sort((eventA: CalendarSchedulerEvent, eventB: CalendarSchedulerEvent) => eventA.start.valueOf() - eventB.start.valueOf())\n .map((ev: CalendarSchedulerEvent) => {\n const eventStart: Date = ev.start;\n const eventEnd: Date = ev.end || eventStart;\n const startsBeforeDay: boolean = eventStart < startOfView;\n const endsAfterDay: boolean = dateAdapter.addMinutes(eventEnd, -1) > endOfView;\n const hourHeightModifier: number = ((hourSegments * hourSegmentHeight) + 1) / MINUTES_IN_HOUR; // +1 for the 1px segment bottom border\n\n let top: number = 0;\n if (eventStart > startOfView) {\n top += dateAdapter.differenceInMinutes(eventStart, startOfView);\n }\n top *= hourHeightModifier;\n\n const startDate: Date = startsBeforeDay ? startOfView : eventStart;\n const endDate: Date = endsAfterDay ? endOfView : eventEnd;\n let height: number = dateAdapter.differenceInMinutes(endDate, startDate);\n if (!ev.end) {\n height = hourSegmentHeight;\n } else {\n height *= hourHeightModifier;\n }\n\n const bottom: number = top + height;\n const overlappingPreviousEvents = getOverLappingEvents(\n ev,\n previousDayEvents,\n top,\n bottom,\n logEnabled\n );\n\n let left: number = 0;\n while (overlappingPreviousEvents.some(previousEvent => previousEvent.left === left)) {\n left += eventWidth;\n }\n\n const event: SchedulerViewEvent =\n {\n event: ev,\n top: top,\n height: height,\n width: eventWidth,\n left: left,\n startsBeforeDay: startsBeforeDay,\n endsAfterDay: endsAfterDay\n };\n\n previousDayEvents.push(event);\n\n return event;\n });\n\n function getColumnCount(\n allEvents: SchedulerViewEvent[],\n prevOverlappingEvents: SchedulerViewEvent[]\n ): number {\n const columnCount = Math.max(\n ...prevOverlappingEvents.map((ev: SchedulerViewEvent) => ev.left + 1)\n );\n\n const nextOverlappingEvents = allEvents\n .filter((ev: SchedulerViewEvent) => ev.left >= columnCount)\n .filter((ev: SchedulerViewEvent) => {\n return (\n getOverLappingEvents(\n ev,\n prevOverlappingEvents,\n ev.top,\n ev.top + ev.height,\n logEnabled\n ).length > 0\n );\n });\n\n if (nextOverlappingEvents.length > 0) {\n return getColumnCount(allEvents, nextOverlappingEvents);\n } else {\n return columnCount;\n }\n }\n\n const mappedEvents = dayEvents.map(event => {\n const columnCount = getColumnCount(\n dayEvents,\n getOverLappingEvents(\n event,\n dayEvents,\n event.top,\n event.top + event.height,\n logEnabled\n )\n );\n\n const width = 100 / columnCount;\n return { ...event, left: event.left * width, width };\n });\n\n day.events = mappedEvents.map(event => {\n const overLappingEvents = getOverLappingEvents(event,\n mappedEvents.filter(otherEvent => otherEvent.left > event.left),\n event.top,\n event.top + event.height,\n logEnabled\n );\n\n if (logEnabled) {\n console.log(\n `DAY [${moment(day.date).format('dddd L')}] ` +\n `- EVENT ${event.event.id} [${moment(event.event.start).format('dddd L, LTS')} ` +\n `- ${moment(event.event.end).format('dddd L, LTS')}] overLappingEvents -> `,\n overLappingEvents\n );\n }\n\n if (overLappingEvents.length > 0) {\n return {\n ...event,\n width:\n Math.min(\n ...overLappingEvents.map(otherEvent => otherEvent.left)\n ) - event.left\n };\n }\n return event;\n });\n\n day.hours = getSchedulerViewHourGrid(dateAdapter, {\n viewDate: viewDate,\n hourSegments: hourSegments,\n dayStart: {\n hour: dayStart.hour,\n minute: dayStart.minute\n },\n dayEnd: {\n hour: dayEnd.hour,\n minute: dayEnd.minute\n }\n }).map((hour: WeekViewHour) => {\n const date: Date = new Date(day.date.getFullYear(), day.date.getMonth(), day.date.getDate(), hour.segments[0].date.getHours());\n\n const startOfHour: Date = new Date(day.date.getFullYear(), day.date.getMonth(), day.date.getDate(), hour.segments[0].date.getHours());\n const endOfHour: Date = dateAdapter.addSeconds(dateAdapter.addHours(startOfHour, 1), -1);\n\n const eventsInHour: SchedulerViewEvent[] = getSchedulerEventsInPeriod(dateAdapter, {\n events: day.events,\n periodStart: startOfHour,\n periodEnd: endOfHour\n });\n\n const segments: SchedulerViewHourSegment[] =\n hour.segments.map((segment: WeekViewHourSegment) => {\n segment.date = dateAdapter.setDate(dateAdapter.setMonth(dateAdapter.setYear(segment.date, day.date.getFullYear()), day.date.getMonth()), day.date.getDate());\n\n const startOfSegment: Date = segment.date;\n const endOfSegment: Date = dateAdapter.addSeconds(dateAdapter.addMinutes(startOfSegment, MINUTES_IN_HOUR / hourSegments), -1);\n\n const eventsInSegment: SchedulerViewEvent[] = getSchedulerEventsInPeriod(dateAdapter, {\n events: eventsInHour,\n periodStart: startOfSegment,\n periodEnd: endOfSegment\n });\n\n if (logEnabled) {\n console.log(\n `SEGMENT [${moment(startOfSegment).format('dddd L, LTS')} - ${moment(endOfSegment).format('dddd L, LTS')}] EVENTS -> `,\n eventsInSegment\n );\n }\n\n return {\n segment: segment,\n date: new Date(segment.date),\n events: eventsInSegment\n };\n });\n\n return {\n hour: hour,\n date: date,\n events: eventsInHour,\n segments: segments\n };\n });\n });\n\n return {\n days: days,\n period: {\n events: eventsInWeek,\n start: startOfViewWeek,\n end: endOfViewWeek\n }\n };\n}\n\nexport interface GetSchedulerViewDaysArgs {\n viewDate: Date;\n viewDays: number;\n weekStartsOn: number;\n startsWithToday: boolean;\n excluded?: number[];\n weekendDays?: number[];\n}\n\nexport function getSchedulerViewDays(\n dateAdapter: DateAdapter,\n {\n viewDate,\n viewDays,\n weekStartsOn,\n startsWithToday,\n excluded = [],\n weekendDays = DEFAULT_WEEKEND_DAYS\n }: GetSchedulerViewDaysArgs\n): SchedulerViewDay[] {\n const start = startsWithToday || viewDays < DAYS_IN_WEEK\n ? new Date(viewDate)\n : dateAdapter.startOfWeek(viewDate, { weekStartsOn: weekStartsOn });\n\n const days: SchedulerViewDay[] = [];\n\n let currentDate = new Date(start);\n\n while (days.length < viewDays) {\n const dayOfWeek = currentDate.getDay();\n \n if (!excluded.includes(dayOfWeek)) {\n days.push(getSchedulerDay(dateAdapter, { date: currentDate, weekendDays }));\n }\n \n currentDate = dateAdapter.addDays(currentDate, 1);\n }\n \n return days;\n}\n\nfunction getSchedulerDay(dateAdapter: DateAdapter, args: { date: Date, weekendDays: number[] }): SchedulerViewDay {\n const date: Date = args.date;\n const today: Date = dateAdapter.startOfDay(new Date());\n\n return {\n date: date,\n isPast: date < today,\n isToday: dateAdapter.isSameDay(date, today),\n isFuture: date >= dateAdapter.addDays(today, 1),\n isWeekend: args.weekendDays.indexOf(dateAdapter.getDay(date)) > -1,\n inMonth: dateAdapter.isSameMonth(date, today),\n hours: []\n };\n}\n\nexport interface GetEventsInPeriodArgs {\n events: CalendarSchedulerEvent[];\n periodStart: Date;\n periodEnd: Date;\n}\n\nfunction getEventsInPeriod(\n dateAdapter: DateAdapter,\n {\n events,\n periodStart,\n periodEnd\n }: GetEventsInPeriodArgs\n): CalendarSchedulerEvent[] {\n return events.filter((event) => isEventInPeriod(dateAdapter, { event: event, periodStart: periodStart, periodEnd: periodEnd }));\n}\n\nexport interface GetSchedulerEventsInPeriodArgs {\n events: SchedulerViewEvent[];\n periodStart: Date;\n periodEnd: Date;\n}\n\nfunction getSchedulerEventsInPeriod(\n dateAdapter: DateAdapter,\n {\n events,\n periodStart,\n periodEnd\n }: GetSchedulerEventsInPeriodArgs\n): SchedulerViewEvent[] {\n return events.filter((event) => isEventInPeriod(dateAdapter, { event: event.event, periodStart: periodStart, periodEnd: periodEnd }));\n}\n\ninterface IsEventInPeriodArgs {\n event: CalendarSchedulerEvent;\n periodStart: Date;\n periodEnd: Date;\n}\n\nfunction isEventInPeriod(dateAdapter: DateAdapter, { event, periodStart, periodEnd}: IsEventInPeriodArgs): boolean {\n const { isSameSecond, addSeconds } = dateAdapter;\n const eventStart: Date = event.start;\n const eventEnd: Date = event.end || event.start;\n\n if (eventStart > periodStart && eventStart < periodEnd) {\n return true;\n }\n\n if (eventEnd > periodStart && eventEnd < periodEnd) {\n return true;\n }\n\n if (eventStart < periodStart && eventEnd > periodEnd) {\n return true;\n }\n\n if (isSameSecond(eventStart, periodStart) || isSameSecond(eventStart, periodEnd)) {\n return true;\n }\n\n if (isSameSecond(addSeconds(eventEnd, -1), periodStart) || isSameSecond(addSeconds(eventEnd, -1), periodEnd)) {\n return true;\n }\n\n return false;\n}\n\n\nfunction getOverLappingEvents(event: any/*SchedulerViewEvent | CalendarSchedulerEvent*/, events: SchedulerViewEvent[], top: number, bottom: number, logEnabled: boolean = false): SchedulerViewEvent[] {\n return events.filter((previousEvent: SchedulerViewEvent) => {\n top = Math.round(top);\n bottom = Math.round(bottom);\n const previousEventTop: number = Math.floor(previousEvent.top);\n const previousEventBottom: number = Math.floor(previousEvent.top + previousEvent.height);\n\n if (top < previousEventBottom && previousEventBottom < bottom) {\n if (logEnabled) {\n console.log('[getOverLappingEvents] - EVENT ' + (event.event?.id || event.id) + ' -> top: ' + top + ' - bottom: ' + bottom + ' | PREVIOUS EVENT ' + previousEvent.event.id\n + ' -> previousEventTop: ' + previousEventTop + ' - previousEventBottom: ' + previousEventBottom + ' -> top < previousEventBottom && previousEventBottom < bottom');\n }\n return true;\n } else if (top < previousEventTop && previousEventTop < bottom) {\n if (logEnabled) {\n console.log('[getOverLappingEvents] - EVENT ' + (event.event?.id || event.id) + ' -> top: ' + top + ' - bottom: ' + bottom + ' | PREVIOUS EVENT ' + previousEvent.event.id\n + ' -> previousEventTop: ' + previousEventTop + ' - previousEventBottom: ' + previousEventBottom + ' -> top < previousEventTop && previousEventTop < bottom');\n }\n return true;\n } else if (previousEventTop <= top && bottom <= previousEventBottom) {\n if (logEnabled) {\n console.log('[getOverLappingEvents] - EVENT ' + (event.event?.id || event.id) + ' -> top: ' + top + ' - bottom: ' + bottom + ' | PREVIOUS EVENT ' + previousEvent.event.id\n + ' -> previousEventTop: ' + previousEventTop + ' - previousEventBottom: ' + previousEventBottom + ' -> previousEventTop <= top && bottom <= previousEventBottom');\n }\n return true;\n }\n\n return false;\n });\n}\n\n\nfunction sanitiseHours(hours: number): number {\n return Math.max(Math.min(23, hours), 0);\n}\n\nfunction sanitiseMinutes(minutes: number): number {\n return Math.max(Math.min(59, minutes), 0);\n}\n","import {\n SchedulerViewPeriod,\n SchedulerViewEvent,\n SchedulerViewDay,\n CalendarSchedulerEvent,\n SchedulerViewHour,\n SchedulerViewHourSegment\n} from '../scheduler/models';\nimport {\n WeekViewHour\n} from 'calendar-utils';\nimport {\n CalendarView,\n DateAdapter\n} from 'angular-calendar';\nimport { MINUTES_IN_HOUR } from '../scheduler/utils/calendar-scheduler-utils';\n\nexport function addPeriod(dateAdapter: DateAdapter, period: CalendarView, date: Date, amount: number): Date {\n return {\n day: dateAdapter.addDays,\n week: dateAdapter.addWeeks,\n month: dateAdapter.addMonths\n }[period](date, amount);\n}\n\nexport function subPeriod(dateAdapter: DateAdapter, period: CalendarView, date: Date, amount: number): Date {\n return {\n day: dateAdapter.subDays,\n week: dateAdapter.subWeeks,\n month: dateAdapter.subMonths\n }[period](date, amount);\n}\n\nexport function startOfPeriod(dateAdapter: DateAdapter, period: CalendarView, date: Date): Date {\n return {\n day: dateAdapter.startOfDay,\n week: dateAdapter.startOfWeek,\n month: dateAdapter.startOfMonth\n }[period](date);\n}\n\nexport function endOfPeriod(dateAdapter: DateAdapter, period: CalendarView, date: Date): Date {\n return {\n day: dateAdapter.endOfDay,\n week: dateAdapter.endOfWeek,\n month: dateAdapter.endOfMonth\n }[period](date);\n}\n\n\nexport const trackByDayOrEvent = (index: number, event: SchedulerViewEvent ) =>\n (event.event.id ? event.event.id : event.event);\n\nexport const trackByHourColumn = (index: number, day: SchedulerViewDay) =>\n day.hours[0] ? day.hours[0].segments[0].date.toISOString() : day;\n\nexport const trackByHour = (index: number, hour: WeekViewHour | SchedulerViewHour) =>\n hour.segments[0].date.toISOString();\n\nexport const trackByHourSegment = (index: number, segment: SchedulerViewHourSegment) =>\n segment.date.toISOString();\n\n\nexport function getMinimumEventHeightInMinutes(hourSegments: number, hourSegmentHeight: number) {\n return (MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight)) * hourSegmentHeight;\n}\n\nexport function getDefaultEventEnd(dateAdapter: DateAdapter, event: CalendarSchedulerEvent, minimumMinutes: number): Date {\n return event.end ? event.end : dateAdapter.addMinutes(event.start, minimumMinutes);\n}\n\nexport function roundToNearest(amount: number, precision: number): number {\n return Math.round(amount / precision) * precision;\n}\n\nexport function getMinutesMoved(movedY: number, hourSegments: number, hourSegmentHeight: number, eventSnapSize: number): number {\n const draggedInPixelsSnapSize = roundToNearest(movedY, eventSnapSize || hourSegmentHeight);\n const pixelAmountInMinutes = MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight);\n return draggedInPixelsSnapSize * pixelAmountInMinutes;\n}\n\nexport function isDraggedWithinPeriod(newStart: Date, newEnd: Date, period: SchedulerViewPeriod): boolean {\n const end = newEnd || newStart;\n return (\n (period.start <= newStart && newStart <= period.end) ||\n (period.start <= end && end <= period.end)\n );\n}\n\nexport function shouldFireDroppedEvent(dropEvent: { dropData?: { event?: CalendarSchedulerEvent; calendarId?: symbol } }, date: Date, calendarId: symbol): boolean {\n return (\n dropEvent.dropData &&\n dropEvent.dropData.event &&\n dropEvent.dropData.calendarId !== calendarId\n );\n}\n","import { DateAdapter } from 'angular-calendar';\nimport {\n CalendarEvent,\n WeekViewTimeEvent,\n WeekViewHour,\n WeekViewHourSegment,\n validateEvents as validateEventsWithoutLog,\n ViewPeriod,\n WeekDay,\n WeekViewAllDayEvent,\n } from 'calendar-utils';\n \n export const validateEvents = (events: CalendarEvent[]) => {\n const warn = (...args) => console.warn('angular-calendar', ...args);\n return validateEventsWithoutLog(events, warn);\n };\n \n export function isInsideLeftAndRight(\n outer: ClientRect,\n inner: ClientRect\n ): boolean {\n return (\n Math.floor(outer.left) <= Math.ceil(inner.left) &&\n Math.floor(inner.left) <= Math.ceil(outer.right) &&\n Math.floor(outer.left) <= Math.ceil(inner.right) &&\n Math.floor(inner.right) <= Math.ceil(outer.right)\n );\n }\n \n function isInsideTopAndBottom(outer: ClientRect, inner: ClientRect): boolean {\n return (\n Math.floor(outer.top) <= Math.ceil(inner.top) &&\n Math.floor(inner.top) <= Math.ceil(outer.bottom) &&\n Math.floor(outer.top) <= Math.ceil(inner.bottom) &&\n Math.floor(inner.bottom) <= Math.ceil(outer.bottom)\n );\n }\n \n export function isInside(outer: ClientRect, inner: ClientRect): boolean {\n return (\n isInsideLeftAndRight(outer, inner) && isInsideTopAndBottom(outer, inner)\n );\n }\n \n export function roundToNearest(amount: number, precision: number) {\n return Math.round(amount / precision) * precision;\n }\n \n export const trackByEventId = (index: number, event: CalendarEvent) =>\n event.id ? event.id : event;\n \n export const trackByWeekDayHeaderDate = (index: number, day: WeekDay) =>\n day.date.toISOString();\n \n export const trackByHourSegment = (\n index: number,\n segment: WeekViewHourSegment\n ) => segment.date.toISOString();\n \n export const trackByHour = (index: number, hour: WeekViewHour) =>\n hour.segments[0].date.toISOString();\n \n export const trackByWeekAllDayEvent = (\n index: number,\n weekEvent: WeekViewAllDayEvent\n ) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);\n \n export const trackByWeekTimeEvent = (\n index: number,\n weekEvent: WeekViewTimeEvent\n ) => (weekEvent.event.id ? weekEvent.event.id : weekEvent.event);\n \n const MINUTES_IN_HOUR = 60;\n \n function getPixelAmountInMinutes(\n hourSegments: number,\n hourSegmentHeight: number,\n hourDuration?: number\n ) {\n return (hourDuration || MINUTES_IN_HOUR) / (hourSegments * hourSegmentHeight);\n }\n \n export function getMinutesMoved(\n movedY: number,\n hourSegments: number,\n hourSegmentHeight: number,\n eventSnapSize: number,\n hourDuration?: number\n ): number {\n const draggedInPixelsSnapSize = roundToNearest(\n movedY,\n eventSnapSize || hourSegmentHeight\n );\n const pixelAmountInMinutes = getPixelAmountInMinutes(\n hourSegments,\n hourSegmentHeight,\n hourDuration\n );\n return draggedInPixelsSnapSize * pixelAmountInMinutes;\n }\n \n export function getDefaultEventEnd(\n dateAdapter: DateAdapter,\n event: CalendarEvent,\n minimumMinutes: number\n ): Date {\n if (event.end) {\n return event.end;\n } else {\n return dateAdapter.addMinutes(event.start, minimumMinutes);\n }\n }\n \n export function addDaysWithExclusions(\n dateAdapter: DateAdapter,\n date: Date,\n days: number,\n excluded: number[]\n ): Date {\n let daysCounter = 0;\n let daysToAdd = 0;\n const changeDays = days < 0 ? dateAdapter.subDays : dateAdapter.addDays;\n let result = date;\n while (daysToAdd <= Math.abs(days)) {\n result = changeDays(date, daysCounter);\n const day = dateAdapter.getDay(result);\n if (excluded.indexOf(day) === -1) {\n daysToAdd++;\n }\n daysCounter++;\n }\n return result;\n }\n \n export function isDraggedWithinPeriod(\n newStart: Date,\n newEnd: Date,\n period: ViewPeriod\n ): boolean {\n const end = newEnd || newStart;\n return (\n (period.start <= newStart && newStart <= period.end) ||\n (period.start <= end && end <= period.end)\n );\n }\n \n export function shouldFireDroppedEvent(\n dropEvent: { dropData?: { event?: CalendarEvent; calendarId?: symbol } },\n date: Date,\n allDay: boolean,\n calendarId: symbol\n ) {\n return (\n dropEvent.dropData &&\n dropEvent.dropData.event &&\n (dropEvent.dropData.calendarId !== calendarId ||\n (dropEvent.dropData.event.allDay && !allDay) ||\n (!dropEvent.dropData.event.allDay && allDay))\n );\n }\n \n export function getWeekViewPeriod(\n dateAdapter: DateAdapter,\n viewDate: Date,\n weekStartsOn: number,\n excluded: number[] = [],\n daysInWeek?: number\n ): { viewStart: Date; viewEnd: Date } {\n let viewStart = daysInWeek\n ? dateAdapter.startOfDay(viewDate)\n : dateAdapter.startOfWeek(viewDate, { weekStartsOn });\n const endOfWeek = dateAdapter.endOfWeek(viewDate, { weekStartsOn });\n while (\n excluded.indexOf(dateAdapter.getDay(viewStart)) > -1 &&\n viewStart < endOfWeek\n ) {\n viewStart = dateAdapter.addDays(viewStart, 1);\n }\n if (daysInWeek) {\n const viewEnd = dateAdapter.endOfDay(\n addDaysWithExclusions(dateAdapter, viewStart, daysInWeek - 1, excluded)\n );\n return { viewStart, viewEnd };\n } else {\n let viewEnd = endOfWeek;\n while (\n excluded.indexOf(dateAdapter.getDay(viewEnd)) > -1 &&\n viewEnd > viewStart\n ) {\n viewEnd = dateAdapter.subDays(viewEnd, 1);\n }\n return { viewStart, viewEnd };\n }\n }\n \n export function isWithinThreshold({ x, y }: { x: number; y: number }) {\n const DRAG_THRESHOLD = 1;\n return Math.abs(x) > DRAG_THRESHOLD || Math.abs(y) > DRAG_THRESHOLD;\n }","import { isInside } from './util';\n\nexport class CalendarResizeHelper {\n constructor(\n private resizeContainerElement: HTMLElement,\n private minWidth: number,\n private rtl: boolean\n ) {}\n\n validateResize({ rectangle, edges }): boolean {\n if (this.rtl) {\n // TODO - find a way of testing this, for some reason the tests always fail but it does actually work\n /* istanbul ignore next */\n if (typeof edges.left !== 'undefined') {\n rectangle.left -= edges.left;\n rectangle.right += edges.left;\n } else if (typeof edges.right !== 'undefined') {\n rectangle.left += edges.right;\n rectangle.right -= edges.right;\n }\n rectangle.width = rectangle.right - rectangle.left;\n }\n\n if (\n this.minWidth &&\n Math.ceil(rectangle.width) < Math.ceil(this.minWidth)\n ) {\n return false;\n }\n\n return isInside(\n this.resizeContainerElement.getBoundingClientRect(),\n rectangle\n );\n }\n}","\nimport { isInsideLeftAndRight, isWithinThreshold } from './util';\nimport { ValidateDragParams } from 'angular-draggable-droppable';\n\nexport class CalendarDragHelper {\n private readonly startPosition: ClientRect;\n\n constructor(\n private dragContainerElement: HTMLElement,\n draggableElement: HTMLElement\n ) {\n this.startPosition = draggableElement.getBoundingClientRect();\n }\n\n validateDrag({\n x,\n y,\n snapDraggedEvents,\n dragAlreadyMoved,\n transform,\n }: {\n x: number;\n y: number;\n snapDraggedEvents: boolean;\n dragAlreadyMoved: boolean;\n transform: ValidateDragParams['transform'];\n }): boolean {\n const isDraggedWithinThreshold =\n isWithinThreshold({ x, y }) || dragAlreadyMoved;\n\n if (snapDraggedEvents) {\n const inner: ClientRect = Object.assign({}, this.startPosition, {\n left: this.startPosition.left + transform.x,\n right: this.startPosition.right + transform.x,\n top: this.startPosition.top + transform.y,\n bottom: this.startPosition.bottom + transform.y,\n });\n\n if (isDraggedWithinThreshold) {\n const outer = this.dragContainerElement.getBoundingClientRect();\n\n const isTopInside = outer.top < inner.top && inner.top < outer.bottom;\n\n const isBottomInside =\n outer.top < inner.bottom && inner.bottom < outer.bottom;\n\n return (\n /*isInsideLeftAndRight(outer, inner) &&*/ (isTopInside || isBottomInside)\n );\n }\n\n /* istanbul ignore next */\n return false;\n } else {\n return isDraggedWithinThreshold;\n }\n }\n}","import { Injectable } from '@angular/core';\n\n/**\n * Auth configuration.\n */\n@Injectable()\nexport class SchedulerConfig {\n locale?: string = 'en';\n headerDateFormat?: 'weekNumber' | 'daysRange' = 'daysRange';\n logEnabled?: boolean = false;\n\n constructor(config: SchedulerConfig = {}) {\n function use(source: T, defaultValue: T): T {\n return config && source !== undefined ? source : defaultValue;\n }\n\n this.locale = use(config.locale, this.locale);\n this.headerDateFormat = use(config.headerDateFormat, this.headerDateFormat);\n this.logEnabled = use(config.logEnabled, this.logEnabled);\n }\n}\n","import { Inject, Injectable } from '@angular/core';\nimport {\n getSchedulerViewHourGrid,\n GetSchedulerViewHourGridArgs,\n getSchedulerViewDays,\n GetSchedulerViewDaysArgs,\n getSchedulerView,\n GetSchedulerViewArgs\n} from './calendar-scheduler-utils';\nimport { WeekViewHour } from 'calendar-utils';\nimport { SchedulerView, SchedulerViewDay } from '../models';\nimport { DateAdapter, MOMENT } from 'angular-calendar';\n\n@Injectable()\nexport class CalendarSchedulerUtils {\n constructor(private dateAdapter: DateAdapter, @Inject(MOMENT) protected moment: any) { }\n\n getSchedulerViewHourGrid(args: GetSchedulerViewHourGridArgs): WeekViewHour[] {\n return getSchedulerViewHourGrid(this.dateAdapter, args);\n }\n\n getSchedulerViewDays(args: GetSchedulerViewDaysArgs): SchedulerViewDay[] {\n return getSchedulerViewDays(this.dateAdapter, args);\n }\n\n getSchedulerView(args: GetSchedulerViewArgs): SchedulerView {\n return getSchedulerView(this.dateAdapter, this.moment, args);\n }\n}\n","import { Component, OnInit, Input, Output, EventEmitter, TemplateRef, Inject } from '@angular/core';\nimport { MOMENT } from 'angular-calendar';\nimport {\n SchedulerViewDay,\n SchedulerViewHourSegment,\n CalendarSchedulerEvent\n} from './models';\n\n// import * as momentNS from 'moment';\n// const moment = momentNS;\n// import moment from 'moment-timezone';\n\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-hour-segment',\n template: `\n \n
0\"\n [class.cal-cancelled]=\"segment.isCancelled\"\n [class.cal-disabled]=\"segment.isDisabled\"\n [style.backgroundColor]=\"segment.backgroundColor\"\n [style.height.px]=\"hourSegmentHeight\"\n (mwlClick)=\"onSegmentClick($event, segment)\">\n @if (showHour && segment.events.length === 0) {\n
\n {{ segment.date | calendarDate:'dayViewHour':locale }}\n
\n }\n
\n \n \n \n `\n})\nexport class CalendarSchedulerHourSegmentComponent implements OnInit {\n @Input() title: string;\n\n @Input() day: SchedulerViewDay;\n\n @Input() segment: SchedulerViewHourSegment;\n\n @Input() locale: string;\n\n @Input() customTemplate: TemplateRef;\n\n @Input() hourSegmentHeight: number = 58;\n\n @Input() showHour: boolean = false;\n\n @Output() segmentClicked: EventEmitter<{ segment: SchedulerViewHourSegment }> = new EventEmitter<{ segment: SchedulerViewHourSegment }>();\n\n constructor(@Inject(MOMENT) protected moment: any) {}\n\n ngOnInit(): void {\n this.title = this.title || this.moment(this.segment.date).format('dddd L, LT');\n }\n\n /**\n * @hidden\n */\n onMouseEnter(mouseEvent: MouseEvent, segment: SchedulerViewHourSegment, event: CalendarSchedulerEvent): void {\n if (!event.isDisabled && !segment.isDisabled) {\n // Maybe do something\n }\n }\n\n /**\n * @hidden\n */\n onMouseLeave(mouseEvent: MouseEvent, segment: SchedulerViewHourSegment, event: CalendarSchedulerEvent): void {\n if (!event.isDisabled && !segment.isDisabled) {\n // Maybe do something\n }\n }\n\n /**\n * @hidden\n */\n onSegmentClick(mouseEvent: MouseEvent, segment: SchedulerViewHourSegment): void {\n if (mouseEvent.stopPropagation) {\n mouseEvent.stopPropagation();\n }\n\n if (segment.events.length === 0 && !segment.isDisabled && !segment.isCancelled) {\n this.segmentClicked.emit({ segment: segment });\n }\n }\n}\n","import { Component, Input, Output, EventEmitter, TemplateRef } from '@angular/core';\nimport { SchedulerViewDay } from './models';\n\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-header',\n template: `\n \n
\n
\n schedule\n
\n \n
\n @for (day of days; track day) {\n \n {{ day.date | calendarDate:'weekViewColumnHeader':locale }}
\n {{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}\n
\n }\n
\n \n \n \n \n `\n})\nexport class CalendarSchedulerHeaderComponent {\n\n @Input() days: SchedulerViewDay[];\n\n @Input() locale: string;\n\n @Input() customTemplate: TemplateRef;\n\n @Output() dayHeaderClicked: EventEmitter<{ day: SchedulerViewDay }> = new EventEmitter<{ day: SchedulerViewDay }>();\n\n /**\n * @hidden\n */\n onDayHeaderClick(mouseEvent: MouseEvent, day: SchedulerViewDay): void {\n if (mouseEvent.stopPropagation) {\n mouseEvent.stopPropagation();\n }\n\n this.dayHeaderClicked.emit({ day: day });\n }\n}\n","import { Component, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core';\nimport {\n CalendarSchedulerEvent,\n CalendarSchedulerEventAction\n} from './models';\n\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-event-actions',\n template: `\n @if (event.actions) {\n \n @for (action of actions; track action) {\n \n \n }\n \n }\n `,\n host: {\n 'class': 'cal-scheduler-event-actions-container'\n }\n})\nexport class CalendarSchedulerEventActionsComponent implements OnInit, OnChanges {\n\n @Input() event: CalendarSchedulerEvent;\n\n public actions: CalendarSchedulerEventAction[] = [];\n\n public ngOnInit(): void {\n this.setupActions();\n }\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes.event) {\n this.setupActions();\n }\n }\n\n private setupActions(): void {\n if (this.event.actions) {\n this.actions = this.event.isCancelled\n ? this.event.actions.filter((a: CalendarSchedulerEventAction) => !a.when || a.when === 'cancelled')\n : this.event.isDisabled\n ? this.event.actions.filter((a: CalendarSchedulerEventAction) => !a.when || a.when === 'disabled')\n : this.event.actions.filter((a: CalendarSchedulerEventAction) => !a.when || a.when === 'enabled');\n }\n }\n\n /**\n * @hidden\n */\n onActionClick(mouseEvent: MouseEvent, action: CalendarSchedulerEventAction, event: CalendarSchedulerEvent): void {\n if (mouseEvent.stopPropagation) {\n mouseEvent.stopPropagation();\n }\n\n action.onClick(event);\n }\n}\n","import { CalendarEventTitleFormatter } from 'angular-calendar';\nimport { Injectable } from '@angular/core';\n\n@Injectable()\nexport class SchedulerEventTitleFormatter extends CalendarEventTitleFormatter {\n\n}\n","import { Pipe, PipeTransform } from '@angular/core';\nimport { CalendarSchedulerEvent } from '../models';\nimport { SchedulerEventTitleFormatter } from '../formatters/scheduler-event-title-formatter.provider';\n\n@Pipe({\n standalone: false,\n name: 'schedulerEventTitle'\n})\nexport class SchedulerEventTitlePipe implements PipeTransform {\n constructor(private schedulerEventTitle: SchedulerEventTitleFormatter) {}\n\n transform(title: string, titleType: string, event: CalendarSchedulerEvent): string {\n return this.schedulerEventTitle[titleType](event);\n }\n}\n","import { Component, Input, TemplateRef } from '@angular/core';\nimport {\n CalendarSchedulerEvent\n} from './models';\n\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-event-title',\n template: `\n \n \n \n @if (showActions && !showContent && (event.isClickable || event.isDisabled)) {\n \n \n }\n @if (event.status && showStatus) {\n \n \n }\n \n \n \n `,\n host: {\n 'class': 'cal-scheduler-event-title-container'\n }\n})\nexport class CalendarSchedulerEventTitleComponent {\n\n @Input() view: string;\n\n @Input() event: CalendarSchedulerEvent;\n\n @Input() showStatus: boolean = true;\n\n @Input() showContent: boolean = true;\n\n @Input() showActions: boolean = true;\n\n @Input() customTemplate: TemplateRef;\n}\n","import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';\nimport {\n CalendarSchedulerEvent\n} from './models';\n\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-event-content',\n template: `\n @if (event.content) {\n 30 ? 'normal' : 'nowrap'\"\n [innerHTML]=\"event.content\">\n \n }\n `,\n host: {\n 'class': 'cal-scheduler-event-content-container'\n }\n})\nexport class CalendarSchedulerEventContentComponent implements AfterViewInit {\n\n @Input() event: CalendarSchedulerEvent;\n\n @Input() eventContainer: HTMLElement;\n\n maxHeight: number;\n\n constructor(private hostElement: ElementRef) { }\n\n public ngAfterViewInit(): void {\n setTimeout(() => { this.maxHeight = Math.max(30, this.eventContainer.clientHeight - 70); }, 0);\n }\n}\n","import { Component, Input, Output, EventEmitter, TemplateRef, OnInit, ElementRef, ChangeDetectorRef, AfterContentChecked, Inject } from '@angular/core';\nimport { MOMENT } from 'angular-calendar';\nimport {\n SchedulerViewDay,\n CalendarSchedulerEvent,\n SchedulerViewEvent\n} from './models';\n\n// import * as momentNS from 'moment';\n// const moment = momentNS;\n// import moment from 'moment-timezone';\n\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-event',\n template: `\n \n
\n \n \n @if (showContent) {\n \n \n }\n @if (showActions && showContent && (event.event.isClickable || event.event.isDisabled)) {\n \n \n }\n
\n \n \n \n `,\n host: {\n '[style.height.%]': '100',\n '[style.width.%]': '100',\n '[style.display]': '\\'flex\\'',\n }\n})\nexport class CalendarSchedulerEventComponent implements OnInit, AfterContentChecked {\n @Input() title: string;\n\n @Input() day: SchedulerViewDay;\n\n @Input() event: SchedulerViewEvent;\n\n @Input() container: HTMLElement;\n\n @Input() showContent: boolean = true;\n\n @Input() showActions: boolean = true;\n\n @Input() showStatus: boolean = true;\n\n @Input() customTemplate: TemplateRef;\n\n @Input() eventTitleTemplate: TemplateRef;\n\n @Output() eventClicked: EventEmitter<{ event: CalendarSchedulerEvent }> = new EventEmitter<{ event: CalendarSchedulerEvent }>();\n\n constructor(private hostElement: ElementRef, protected changeDetectorRef: ChangeDetectorRef, @Inject(MOMENT) protected moment: any) { }\n\n public ngOnInit(): void {\n this.title = this.title || `${this.event.event.title}, ${this.event.event.content ? `${this.event.event.content},` : null} ${this.moment(this.event.event.start).format('dddd L, LT')}`;\n }\n\n public ngAfterContentChecked(): void {\n this.changeDetectorRef.detectChanges();\n }\n\n onMouseEnter(): void {\n // Maybe do something\n }\n\n onMouseLeave(): void {\n // Maybe do something\n }\n\n /**\n * @hidden\n */\n onEventClick(mouseEvent: MouseEvent, event: CalendarSchedulerEvent): void {\n if (mouseEvent.stopPropagation) {\n mouseEvent.stopPropagation();\n }\n if (event.isClickable) {\n this.eventClicked.emit({ event: event });\n }\n }\n}\n","import {\n Component,\n Input,\n Output,\n EventEmitter,\n ChangeDetectorRef,\n OnChanges,\n OnInit,\n OnDestroy,\n LOCALE_ID,\n Inject,\n TemplateRef,\n ViewEncapsulation,\n HostListener\n} from '@angular/core';\nimport { MediaMatcher } from '@angular/cdk/layout';\nimport { Subject, Subscription } from 'rxjs';\nimport {\n WeekViewHour\n} from 'calendar-utils';\nimport {\n isBefore\n} from 'date-fns';\nimport { ResizeEvent } from 'angular-resizable-element';\n// import { CalendarDragHelper } from 'angular-calendar/modules/common/calendar-drag-helper.provider';\n// import { CalendarResizeHelper } from 'angular-calendar/modules/common/calendar-resize-helper.provider';\nimport { SchedulerConfig } from './scheduler-config';\nimport { CalendarEventTimesChangedEventType, DateAdapter } from 'angular-calendar';\nimport { DragMoveEvent, DragEndEvent, DropEvent } from 'angular-draggable-droppable';\n\nimport {\n CalendarSchedulerEvent,\n SchedulerViewDay,\n SchedulerViewHour,\n SchedulerViewHourSegment,\n SchedulerEventTimesChangedEvent,\n SchedulerViewEvent,\n SchedulerView\n} from './models';\nimport {\n shouldFireDroppedEvent,\n isDraggedWithinPeriod,\n roundToNearest,\n getMinutesMoved,\n trackByHourColumn,\n trackByDayOrEvent,\n trackByHour,\n trackByHourSegment,\n getMinimumEventHeightInMinutes,\n getDefaultEventEnd\n} from '../common/utils';\nimport {\n DEFAULT_HOUR_SEGMENTS,\n DEFAULT_HOUR_SEGMENT_HEIGHT_PX,\n MINUTES_IN_HOUR,\n Time,\n DAYS_IN_WEEK\n} from './utils/calendar-scheduler-utils';\nimport { CalendarSchedulerUtils } from './utils/calendar-scheduler-utils.provider';\nimport { CalendarResizeHelper } from '../common/temp/calendar-resize-helper.provider';\nimport { CalendarDragHelper } from '../common/temp/calendar-drag-helper.provider';\n\n/**\n * [ngClass]=\"getPositioningClasses(event)\"\n *\n * [style.top.px]=\"event.top\"\n * [style.height.px]=\"event.height\"\n * [style.left.%]=\"event.left\"\n * [style.width.%]=\"event.width\"\n *\n * DRAG & DROP & RESIZE -> https://github.com/mattlewis92/angular-calendar/blob/main/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts\n * FLEXBOX -> https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n */\n@Component({\n standalone: false,\n selector: 'calendar-scheduler-view',\n template: `\n
\n \n \n \n
\n
\n @for (hour of hours; track trackByHour($index, hour)) {\n
\n
\n @for (segment of hour.segments; track segment) {\n
\n {{ segment.date | calendarDate:'dayViewHour':locale }}\n
\n }\n
\n
\n }\n
\n \n
0\"\n mwlDroppable\n (dragEnter)=\"eventDragEnter = eventDragEnter + 1\"\n (dragLeave)=\"eventDragEnter = eventDragEnter - 1\">\n @for (day of view.days; track trackByHourColumn($index, day)) {\n
\n @for (event of day.events; track trackByDayOrEvent($index, event)) {\n
\n @if (event.event?.resizable?.beforeStart && !event.startsBeforeDay) {\n \n
\n }\n = 75\"\n [showActions]=\"showEventActions\"\n [showStatus]=\"showEventStatus\"\n [customTemplate]=\"eventTemplate\"\n [eventTitleTemplate]=\"eventTitleTemplate\"\n (eventClicked)=\"eventClicked.emit($event)\">\n \n @if (event.event?.resizable?.afterEnd && !event.endsAfterDay) {\n \n
\n }\n
\n }\n @for (hour of day.hours; track trackByHour(i, hour); let i = $index) {\n
\n
\n @for (segment of hour.segments; track trackByHourSegment($index, segment)) {\n \n \n }\n
\n
\n }\n
\n }\n
\n \n \n `,\n styleUrls: ['./calendar-scheduler-view.component.scss'],\n encapsulation: ViewEncapsulation.None\n})\nexport class CalendarSchedulerViewComponent implements OnInit, OnChanges, OnDestroy {\n\n /**\n * Number of days shown. This value will be always normalized to DAYS_IN_WEEK (7)\n */\n _viewDays: number = DAYS_IN_WEEK;\n get viewDays(): number {\n return this._viewDays;\n }\n @Input() set viewDays(value: number) {\n this._viewDays = Math.min(value, DAYS_IN_WEEK);\n }\n\n /**\n * The current view date\n */\n @Input() viewDate: Date;\n\n /**\n * Specify if the calendar must be resposive on window resize, changing the days showed automatically\n */\n @Input() responsive: boolean = false;\n\n /**\n * An array of events to display on view\n */\n @Input() events: CalendarSchedulerEvent[] = [];\n\n /**\n * The number of segments in an hour. Must be one of 1, 2, 4, 6\n */\n @Input() hourSegments: 1 | 2 | 4 | 6 = DEFAULT_HOUR_SEGMENTS;\n\n /**\n * The height in pixels of each hour segment\n */\n @Input() hourSegmentHeight: number = DEFAULT_HOUR_SEGMENT_HEIGHT_PX;\n\n /**\n * An array of day indexes (0 = sunday, 1 = monday etc) that will be hidden on the view\n */\n @Input() excludeDays: number[] = [];\n\n /**\n * Specify if the first day of current scheduler view has to be today or the first day of the week\n */\n @Input() startsWithToday: boolean = false;\n\n /**\n * Specify if content must be shown or not\n */\n @Input() showEventContent: boolean = true;\n\n /**\n * Specify if actions must be shown or not\n */\n @Input() showEventActions: boolean = true;\n\n /**\n * Specify if status must be shown or not\n */\n @Input() showEventStatus: boolean = true;\n\n /**\n * Specify if hour must be shown on segment or not\n */\n @Input() showSegmentHour: boolean = false;\n\n /**\n * Specify if event must zoom on mouse hover or not\n */\n @Input() zoomEventOnHover: boolean = false;\n\n /**\n * A function that will be called before each cell is rendered. The first argument will contain the calendar (day, hour or segment) cell.\n * If you add the `cssClass` property to the cell it will add that class to the cell in the template\n */\n @Input() dayModifier: Function;\n @Input() hourModifier: Function;\n @Input() segmentModifier: Function;\n @Input() eventModifier: Function;\n\n /**\n * An observable that when emitted on will re-render the current view\n */\n @Input() refresh: Subject;\n\n /**\n * The locale used to format dates\n */\n @Input() locale: string;\n\n /**\n * The grid size to snap resizing and dragging of events to\n */\n @Input() eventSnapSize: number = this.hourSegmentHeight;\n\n /**\n * Whether to snap events to a grid when dragging\n */\n @Input() snapDraggedEvents: boolean = true;\n\n /**\n * The start number of the week\n */\n @Input() weekStartsOn: number;\n\n /**\n * A custom template to use to replace the header\n */\n @Input() headerTemplate: TemplateRef;\n\n /**\n * A custom template to use to replace the day cell\n */\n @Input() cellTemplate: TemplateRef;\n\n /**\n * A custom template to use for week view events\n */\n @Input() eventTemplate: TemplateRef;\n\n /**\n * A custom template to use for event titles\n */\n @Input() eventTitleTemplate: TemplateRef;\n\n /**\n * A custom template to use for all day events\n */\n @Input() allDayEventTemplate: TemplateRef;\n\n /**\n * An array of day indexes (0 = sunday, 1 = monday etc) that indicate which days are weekends\n */\n @Input() weekendDays: number[];\n\n /**\n * The day start hours in 24 hour time. Must be 0-23\n */\n @Input() dayStartHour: number = 0;\n\n /**\n * The day start minutes. Must be 0-59\n */\n @Input() dayStartMinute: number = 0;\n\n /**\n * The day end hours in 24 hour time. Must be 0-23\n */\n @Input() dayEndHour: number = 23;\n\n /**\n * The day end minutes. Must be 0-59\n */\n @Input() dayEndMinute: number = 59;\n\n /**\n * Called when view days value changes\n */\n @Output() viewDaysChanged: EventEmitter = new EventEmitter();\n\n /**\n * Called when a header week day is clicked\n */\n @Output() dayHeaderClicked: EventEmitter<{ day: SchedulerViewDay }> = new EventEmitter<{ day: SchedulerViewDay }>();\n\n /**\n * Called when the hour is clicked\n */\n @Output() hourClicked: EventEmitter<{ hour: SchedulerViewHour }> = new EventEmitter<{ hour: SchedulerViewHour }>();\n\n /**\n * Called when the segment is clicked\n */\n @Output() segmentClicked: EventEmitter<{ segment: SchedulerViewHourSegment }> = new EventEmitter<{ segment: SchedulerViewHourSegment }>();\n\n /**\n * Called when the event is clicked\n */\n @Output() eventClicked: EventEmitter<{ event: CalendarSchedulerEvent }> = new EventEmitter<{ event: CalendarSchedulerEvent }>();\n\n /**\n * Called when an event is resized or dragged and dropped\n */\n @Output() eventTimesChanged: EventEmitter = new EventEmitter();\n\n /**\n * @hidden\n */\n view: SchedulerView;\n\n /**\n * @hidden\n */\n refreshSubscription: Subscription;\n\n /**\n * @hidden\n */\n days: SchedulerViewDay[];\n\n /**\n * @hidden\n */\n hours: WeekViewHour[] = [];\n\n /**\n * @hidden\n */\n // resizes: Map = new Map();\n resizes: Map = new Map();\n\n /**\n * @hidden\n */\n eventDragEnter: number = 0;\n\n /**\n * @hidden\n */\n dragActive: boolean = false;\n\n /**\n * @hidden\n */\n dragAlreadyMoved = false;\n\n /**\n * @hidden\n */\n validateResize: (args: any) => boolean;\n\n /**\n * @hidden\n */\n validateDrag: (args: any) => boolean;\n\n /**\n * @hidden\n */\n dayColumnWidth: number;\n\n /**\n * @hidden\n */\n calendarId: symbol = Symbol('angular calendar scheduler view id');\n\n /**\n * @hidden\n */\n rtl = false;\n\n /**\n * @hidden\n */\n trackByHourColumn = trackByHourColumn;\n\n /**\n * @hidden\n */\n trackByDayOrEvent = trackByDayOrEvent;\n\n /**\n * @hidden\n */\n trackByHour = trackByHour;\n\n /**\n * @hidden\n */\n trackByHourSegment = trackByHourSegment;\n\n mobileQueryXs: MediaQueryList;\n mobileQuerySm: MediaQueryList;\n mobileQueryListener: (this: MediaQueryList, ev: MediaQueryListEvent) => any;\n @HostListener('window:resize', ['$event'])\n onResize(event: any) {\n this.adjustViewDays();\n }\n\n /**\n * @hidden\n */\n constructor(private cdr: ChangeDetectorRef, @Inject(LOCALE_ID) locale: string, private config: SchedulerConfig,\n private utils: CalendarSchedulerUtils, private dateAdapter: DateAdapter, private media: MediaMatcher,\n private changeDetectorRef: ChangeDetectorRef) {\n\n this.locale = this.config.locale || locale;\n\n // See 'Responsive breakpoints' at https://getbootstrap.com/docs/4.1/layout/overview/\n this.mobileQueryXs = this.media.matchMedia('(max-width: 576px)'); // Extra small devices (portrait phones, less than 576px)\n this.mobileQuerySm = this.media.matchMedia('(max-width: 768px)'); // Small devices (landscape phones, less than 768px)\n\n this.mobileQueryListener = () => this.changeDetectorRef.detectChanges();\n\n // this.mobileQueryXs.addEventListener('change', this.mobileQueryListener);\n this.mobileQueryXs.addListener(this.mobileQueryListener);\n // this.mobileQuerySm.addEventListener('change', this.mobileQueryListener);\n this.mobileQuerySm.addListener(this.mobileQueryListener);\n }\n\n /**\n * @hidden\n */\n ngOnInit(): void {\n this.adjustViewDays();\n\n if (this.refresh) {\n this.refreshSubscription = this.refresh\n // tslint:disable-next-line: deprecation\n .subscribe({\n next: () => {\n this.refreshAll();\n this.cdr.markForCheck();\n },\n error: () => {},\n complete: () => {}\n });\n }\n }\n\n /**\n * @hidden\n */\n ngOnChanges(changes: any): void {\n if (changes.viewDays || changes.viewDate || changes.excludeDays || changes.weekendDays) {\n this.refreshHeader();\n }\n\n if (changes.viewDays ||\n changes.viewDate ||\n changes.events ||\n changes.dayStartHour ||\n changes.dayEndHour ||\n changes.dayStartMinute ||\n changes.dayEndMinute ||\n changes.excludeDays ||\n changes.eventWidth\n ) {\n this.refreshHourGrid();\n this.refreshBody();\n }\n }\n\n /**\n * @hidden\n */\n ngOnDestroy(): void {\n if (this.refreshSubscription) {\n this.refreshSubscription.unsubscribe();\n }\n\n // this.mobileQueryXs.removeEventListener('change', this.mobileQueryListener);\n this.mobileQueryXs.removeListener(this.mobileQueryListener);\n // this.mobileQuerySm.removeEventListener('change', this.mobileQueryListener);\n this.mobileQuerySm.removeListener(this.mobileQueryListener);\n }\n\n setViewDays(viewDays: number) {\n const oldViewDays: number = this._viewDays;\n\n this.viewDays = viewDays;\n\n if (this._viewDays !== oldViewDays) {\n this.viewDaysChanged.emit(this._viewDays);\n this.refreshAll();\n }\n }\n\n protected adjustViewDays(): void {\n const oldViewDays: number = this._viewDays;\n\n if (this.responsive) {\n // https://www.digitalocean.com/community/tutorials/angular-breakpoints-angular-cdk\n // With a Component: https://www.digitalocean.com/community/tutorials/detect-responsive-screen-sizes-in-angular\n // check/set the size\n if (this.mobileQueryXs.matches) {\n this.viewDays = 1;\n } else if (this.mobileQuerySm.matches) {\n this.viewDays = 3;\n } else {\n this.viewDays = DAYS_IN_WEEK;\n }\n }\n\n if (this._viewDays !== oldViewDays) {\n this.viewDaysChanged.emit(this._viewDays);\n this.refreshAll();\n }\n }\n\n protected getPositioningClasses(day: SchedulerViewDay, event: CalendarSchedulerEvent): string {\n const classes: string[] = [\n this.getDayClass(event.start),\n this.getTimeClass(day.date, event),\n this.getLengthClass(day.date, event)\n ];\n return classes.join(' ');\n }\n\n private getDayClass(date: Date): string {\n return '';\n }\n\n private getTimeClass(date: Date, event: CalendarSchedulerEvent): string {\n if (this.dateAdapter.isSameDay(date, event.start)) {\n let hours: number = event.start.getHours();\n if (this.dayStartHour > 0) { hours = event.start.getHours() - this.dayStartHour; }\n const hoursString: string = hours < 10 ? `0${hours}` : `${hours}`;\n const minutesString: string = event.start.getMinutes() < 10 ? `0${event.start.getMinutes()}` : `${event.start.getMinutes()}`;\n return `time${hoursString}${minutesString}`;\n } else if (isBefore(event.start, this.dateAdapter.startOfDay(date))) {\n return `time0000`;\n }\n }\n\n private getLengthClass(date: Date, event: CalendarSchedulerEvent): string {\n if (this.dateAdapter.isSameDay(date, event.start)) {\n const durationInMinutes: number = this.dateAdapter.differenceInMinutes(event.end, event.start);\n const leftToEndOfDay: number = this.dateAdapter.differenceInMinutes(this.dateAdapter.setMinutes(this.dateAdapter.setHours(event.start, this.dayEndHour + 1), 0), event.start);\n return leftToEndOfDay > durationInMinutes ? `length${durationInMinutes}` : `length${leftToEndOfDay}`;\n } else if (isBefore(event.start, this.dateAdapter.startOfDay(date))) {\n let leftDurationInMinutes: number = 0;\n if (this.dateAdapter.isSameDay(date, event.end)) {\n leftDurationInMinutes = this.dateAdapter.differenceInMinutes(event.end, this.dateAdapter.startOfDay(date));\n if (this.dayStartHour > 0) { leftDurationInMinutes = (event.end.getHours() - this.dayStartHour) * MINUTES_IN_HOUR; }\n } else {\n leftDurationInMinutes = ((this.dayEndHour + 1) - this.dayStartHour) * MINUTES_IN_HOUR;\n }\n return `length${leftDurationInMinutes}`;\n }\n }\n\n\n private refreshHourGrid(): void {\n this.hours = this.utils.getSchedulerViewHourGrid({\n viewDate: this.viewDate,\n hourSegments: this.hourSegments,\n dayStart: {\n hour: this.dayStartHour,\n minute: this.dayStartMinute\n },\n dayEnd: {\n hour: this.dayEndHour,\n minute: this.dayEndMinute\n }\n });\n }\n\n private refreshHeader(): void {\n this.days = this.utils.getSchedulerViewDays({\n viewDate: this.viewDate,\n viewDays: this.viewDays,\n weekStartsOn: this.weekStartsOn,\n startsWithToday: this.startsWithToday,\n excluded: this.excludeDays,\n weekendDays: this.weekendDays\n });\n }\n\n private refreshBody(events?: CalendarSchedulerEvent[]): void {\n this.view = this.getSchedulerView(events || this.events);\n\n if (this.dayModifier) {\n this.days.forEach(day => this.dayModifier(day));\n }\n\n if (this.dayModifier || this.hourModifier || this.segmentModifier) {\n this.view.days.forEach(day => {\n if (this.dayModifier) {\n this.dayModifier(day);\n }\n day.hours.forEach((hour: SchedulerViewHour) => {\n if (this.hourModifier) {\n this.hourModifier(hour);\n }\n hour.segments.forEach((segment: SchedulerViewHourSegment) => {\n if (this.segmentModifier) {\n this.segmentModifier(segment);\n }\n });\n });\n });\n }\n\n if (this.eventModifier) {\n this.events.forEach(event => this.eventModifier(event));\n }\n }\n\n private refreshAll(): void {\n this.refreshHeader();\n this.refreshHourGrid();\n this.refreshBody();\n }\n\n\n private getSchedulerView(events: CalendarSchedulerEvent[]): SchedulerView {\n return this.utils.getSchedulerView({\n events: events,\n viewDate: this.viewDate,\n viewDays: this.viewDays,\n hourSegments: this.hourSegments,\n weekStartsOn: this.weekStartsOn,\n startsWithToday: this.startsWithToday,\n dayStart: