From 030e90c8f1b84f9addd0a035d8d766a75e440960 Mon Sep 17 00:00:00 2001 From: razmans Date: Fri, 26 Jan 2024 15:14:20 +0800 Subject: [PATCH] Added access modifier and return type to each function that does not have any access modifier and return types. --- src/calendar.service.ts | 127 +++++++--- src/calendar.ts | 202 ++++++++++------ src/dayview.ts | 360 +++++++++++++++++---------- src/init-position-scroll.ts | 66 ++--- src/monthview.ts | 325 ++++++++++++++++--------- src/weekview.ts | 471 +++++++++++++++++++++++++----------- 6 files changed, 1020 insertions(+), 531 deletions(-) diff --git a/src/calendar.service.ts b/src/calendar.service.ts index 434fc2dd..2f2e187e 100644 --- a/src/calendar.service.ts +++ b/src/calendar.service.ts @@ -1,7 +1,12 @@ -import {Injectable} from '@angular/core'; -import {Observable, Subject} from 'rxjs'; +import { Injectable } from "@angular/core"; +import { Observable, Subject } from "rxjs"; -import {ICalendarComponent, IView, CalendarMode, QueryMode} from './calendar.interface'; +import { + ICalendarComponent, + IView, + CalendarMode, + QueryMode, +} from "./calendar.interface"; @Injectable() export class CalendarService { @@ -20,14 +25,16 @@ export class CalendarService { private slideUpdated = new Subject(); constructor() { - this.currentDateChangedFromParent$ = this.currentDateChangedFromParent.asObservable(); - this.currentDateChangedFromChildren$ = this.currentDateChangedFromChildren.asObservable(); + this.currentDateChangedFromParent$ = + this.currentDateChangedFromParent.asObservable(); + this.currentDateChangedFromChildren$ = + this.currentDateChangedFromChildren.asObservable(); this.eventSourceChanged$ = this.eventSourceChanged.asObservable(); this.slideChanged$ = this.slideChanged.asObservable(); this.slideUpdated$ = this.slideUpdated.asObservable(); } - setCurrentDate(val: Date, fromParent: boolean = false) { + public setCurrentDate(val: Date, fromParent: boolean = false): void { this._currentDate = new Date(val); if (fromParent) { this.currentDateChangedFromParent.next(val); @@ -36,16 +43,16 @@ export class CalendarService { } } - get currentDate(): Date { + public get currentDate(): Date { return this._currentDate; } - rangeChanged(component: ICalendarComponent) { - if (this.queryMode === 'local') { + public rangeChanged(component: ICalendarComponent): void { + if (this.queryMode === "local") { if (component.eventSource && component.onDataLoaded) { component.onDataLoaded(); } - } else if (this.queryMode === 'remote') { + } else if (this.queryMode === "remote") { let rangeStart = new Date(component.range.startTime.getTime()), rangeEnd = new Date(component.range.endTime.getTime()); @@ -60,35 +67,42 @@ export class CalendarService { } component.onRangeChanged.emit({ startTime: rangeStart, - endTime: rangeEnd + endTime: rangeEnd, }); } } - private getStep(mode: CalendarMode): { years: number; months: number; days: number; } { + private getStep(mode: CalendarMode): { + years: number; + months: number; + days: number; + } { switch (mode) { - case 'month': + case "month": return { years: 0, months: 1, - days: 0 + days: 0, }; - case 'week': + case "week": return { years: 0, months: 0, - days: 7 + days: 7, }; - case 'day': + case "day": return { years: 0, months: 0, - days: 1 + days: 1, }; } } - getAdjacentCalendarDate(mode: CalendarMode, direction: number): Date { + public getAdjacentCalendarDate( + mode: CalendarMode, + direction: number + ): Date { let calculateCalendarDate = this.currentDate; const step = this.getStep(mode), year = calculateCalendarDate.getFullYear() + direction * step.years, @@ -97,21 +111,31 @@ export class CalendarService { calculateCalendarDate = new Date(year, month, date, 12, 0, 0); - if (mode === 'month') { + if (mode === "month") { const firstDayInNextMonth = new Date(year, month + 1, 1, 12, 0, 0); - if (firstDayInNextMonth.getTime() <= calculateCalendarDate.getTime()) { - calculateCalendarDate = new Date(firstDayInNextMonth.getTime() - 24 * 60 * 60 * 1000); + if ( + firstDayInNextMonth.getTime() <= calculateCalendarDate.getTime() + ) { + calculateCalendarDate = new Date( + firstDayInNextMonth.getTime() - 24 * 60 * 60 * 1000 + ); } } return calculateCalendarDate; } - getAdjacentViewStartTime(component: ICalendarComponent, direction: number): Date { - let adjacentCalendarDate = this.getAdjacentCalendarDate(component.mode, direction); + private getAdjacentViewStartTime( + component: ICalendarComponent, + direction: number + ): Date { + let adjacentCalendarDate = this.getAdjacentCalendarDate( + component.mode, + direction + ); return component.getRange(adjacentCalendarDate).startTime; } - populateAdjacentViews(component: ICalendarComponent) { + public populateAdjacentViews(component: ICalendarComponent): void { let currentViewStartDate: Date, currentViewData: IView[], toUpdateViewIndex: number, @@ -120,43 +144,66 @@ export class CalendarService { if (component.direction === 1) { currentViewStartDate = this.getAdjacentViewStartTime(component, 1); toUpdateViewIndex = (currentViewIndex + 1) % 3; - component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate); + component.views[toUpdateViewIndex] = + component.getViewData(currentViewStartDate); } else if (component.direction === -1) { currentViewStartDate = this.getAdjacentViewStartTime(component, -1); toUpdateViewIndex = (currentViewIndex + 2) % 3; - component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate); + component.views[toUpdateViewIndex] = + component.getViewData(currentViewStartDate); } else { if (!component.views) { currentViewData = []; currentViewStartDate = component.range.startTime; - currentViewData.push(component.getViewData(currentViewStartDate)); - currentViewStartDate = this.getAdjacentViewStartTime(component, 1); - currentViewData.push(component.getViewData(currentViewStartDate)); - currentViewStartDate = this.getAdjacentViewStartTime(component, -1); - currentViewData.push(component.getViewData(currentViewStartDate)); + currentViewData.push( + component.getViewData(currentViewStartDate) + ); + currentViewStartDate = this.getAdjacentViewStartTime( + component, + 1 + ); + currentViewData.push( + component.getViewData(currentViewStartDate) + ); + currentViewStartDate = this.getAdjacentViewStartTime( + component, + -1 + ); + currentViewData.push( + component.getViewData(currentViewStartDate) + ); component.views = currentViewData; } else { currentViewStartDate = component.range.startTime; - component.views[currentViewIndex] = component.getViewData(currentViewStartDate); - currentViewStartDate = this.getAdjacentViewStartTime(component, -1); + component.views[currentViewIndex] = + component.getViewData(currentViewStartDate); + currentViewStartDate = this.getAdjacentViewStartTime( + component, + -1 + ); toUpdateViewIndex = (currentViewIndex + 2) % 3; - component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate); - currentViewStartDate = this.getAdjacentViewStartTime(component, 1); + component.views[toUpdateViewIndex] = + component.getViewData(currentViewStartDate); + currentViewStartDate = this.getAdjacentViewStartTime( + component, + 1 + ); toUpdateViewIndex = (currentViewIndex + 1) % 3; - component.views[toUpdateViewIndex] = component.getViewData(currentViewStartDate); + component.views[toUpdateViewIndex] = + component.getViewData(currentViewStartDate); } } } - loadEvents() { + public loadEvents(): void { this.eventSourceChanged.next(); } - slide(direction: number) { + public slide(direction: number): void { this.slideChanged.next(direction); } - update() { + public update(): void { this.slideUpdated.next(); } } diff --git a/src/calendar.ts b/src/calendar.ts index f36b5efb..7c90c970 100644 --- a/src/calendar.ts +++ b/src/calendar.ts @@ -1,26 +1,52 @@ -import { Component, EventEmitter, Input, OnInit, Output, TemplateRef, Inject, LOCALE_ID, NgZone } from '@angular/core'; -import { Subscription } from 'rxjs'; -import { CalendarService } from './calendar.service'; -import SwiperCore from 'swiper'; -import { IonicSlides } from '@ionic/angular'; -import { IEvent, CalendarMode, QueryMode, Step, IMonthViewDisplayEventTemplateContext, IMonthViewEventDetailTemplateContext, IDisplayWeekViewHeader, IDisplayAllDayEvent, IDisplayEvent, IWeekViewAllDayEventSectionTemplateContext, IDayViewAllDayEventSectionTemplateContext, IWeekViewNormalEventSectionTemplateContext, IDayViewNormalEventSectionTemplateContext, IDateFormatter, IRange, ITimeSelected } from './calendar.interface'; +import { + Component, + EventEmitter, + Input, + OnInit, + Output, + TemplateRef, + Inject, + LOCALE_ID, + NgZone, +} from "@angular/core"; +import { Subscription } from "rxjs"; +import { CalendarService } from "./calendar.service"; +import SwiperCore from "swiper"; +import { IonicSlides } from "@ionic/angular"; +import { + IEvent, + CalendarMode, + QueryMode, + Step, + IMonthViewDisplayEventTemplateContext, + IMonthViewEventDetailTemplateContext, + IDisplayWeekViewHeader, + IDisplayAllDayEvent, + IDisplayEvent, + IWeekViewAllDayEventSectionTemplateContext, + IDayViewAllDayEventSectionTemplateContext, + IWeekViewNormalEventSectionTemplateContext, + IDayViewNormalEventSectionTemplateContext, + IDateFormatter, + IRange, + ITimeSelected, +} from "./calendar.interface"; SwiperCore.use([IonicSlides]); - @Component({ - selector: 'calendar', - templateUrl: './calendar.html', - styleUrls: ['./calendar.css'], - providers: [CalendarService] + selector: "calendar", + templateUrl: "./calendar.html", + styleUrls: ["./calendar.css"], + providers: [CalendarService], }) export class CalendarComponent implements OnInit { @Input() - get currentDate():Date { + get currentDate(): Date { return this._currentDate; } - set currentDate(val:Date) { + set currentDate(val: Date) { if (!val) { val = new Date(); } @@ -30,52 +56,63 @@ export class CalendarComponent implements OnInit { this.onCurrentDateChanged.emit(this._currentDate); } - @Input() eventSource:IEvent[] = []; - @Input() calendarMode:CalendarMode = 'month'; - @Input() formatDay:string = 'd'; - @Input() formatDayHeader:string = 'EEE'; - @Input() formatDayTitle:string = 'MMMM dd, yyyy'; - @Input() formatWeekTitle:string = 'MMMM yyyy, \'Week\' w'; - @Input() formatMonthTitle:string = 'MMMM yyyy'; - @Input() formatWeekViewDayHeader:string = 'EEE d'; - @Input() formatHourColumn:string = 'ha'; - @Input() showEventDetail:boolean = true; - @Input() startingDayMonth:number = 0; - @Input() startingDayWeek:number = 0; - @Input() allDayLabel:string = 'all day'; - @Input() noEventsLabel:string = 'No Events'; - @Input() queryMode:QueryMode = 'local'; - @Input() step:Step = Step.Hour; - @Input() timeInterval:number = 60; - @Input() autoSelect:boolean = true; - @Input() markDisabled?:(date:Date) => boolean; - @Input() monthviewDisplayEventTemplate?:TemplateRef; - @Input() monthviewInactiveDisplayEventTemplate?:TemplateRef; - @Input() monthviewEventDetailTemplate?:TemplateRef; - @Input() weekviewHeaderTemplate?:TemplateRef; - @Input() weekviewAllDayEventTemplate?:TemplateRef; - @Input() weekviewNormalEventTemplate?:TemplateRef; - @Input() dayviewAllDayEventTemplate?:TemplateRef; - @Input() dayviewNormalEventTemplate?:TemplateRef; - @Input() weekviewAllDayEventSectionTemplate?:TemplateRef; - @Input() weekviewNormalEventSectionTemplate?:TemplateRef; - @Input() dayviewAllDayEventSectionTemplate?:TemplateRef; - @Input() dayviewNormalEventSectionTemplate?:TemplateRef; - @Input() weekviewInactiveAllDayEventSectionTemplate?:TemplateRef; - @Input() weekviewInactiveNormalEventSectionTemplate?:TemplateRef; - @Input() dayviewInactiveAllDayEventSectionTemplate?:TemplateRef; - @Input() dayviewInactiveNormalEventSectionTemplate?:TemplateRef; - @Input() dateFormatter?:IDateFormatter; - @Input() dir:string = ""; - @Input() scrollToHour:number = 0; - @Input() preserveScrollPosition:boolean = false; - @Input() lockSwipeToPrev:boolean = false; - @Input() lockSwipeToNext:boolean = false; - @Input() lockSwipes:boolean = false; - @Input() locale:string = ""; - @Input() startHour:number = 0; - @Input() endHour:number = 24; - @Input() sliderOptions:any; + @Input() eventSource: IEvent[] = []; + @Input() calendarMode: CalendarMode = "month"; + @Input() formatDay: string = "d"; + @Input() formatDayHeader: string = "EEE"; + @Input() formatDayTitle: string = "MMMM dd, yyyy"; + @Input() formatWeekTitle: string = "MMMM yyyy, 'Week' w"; + @Input() formatMonthTitle: string = "MMMM yyyy"; + @Input() formatWeekViewDayHeader: string = "EEE d"; + @Input() formatHourColumn: string = "ha"; + @Input() showEventDetail: boolean = true; + @Input() startingDayMonth: number = 0; + @Input() startingDayWeek: number = 0; + @Input() allDayLabel: string = "all day"; + @Input() noEventsLabel: string = "No Events"; + @Input() queryMode: QueryMode = "local"; + @Input() step: Step = Step.Hour; + @Input() timeInterval: number = 60; + @Input() autoSelect: boolean = true; + @Input() markDisabled?: (date: Date) => boolean; + @Input() + monthviewDisplayEventTemplate?: TemplateRef; + @Input() + monthviewInactiveDisplayEventTemplate?: TemplateRef; + @Input() + monthviewEventDetailTemplate?: TemplateRef; + @Input() weekviewHeaderTemplate?: TemplateRef; + @Input() weekviewAllDayEventTemplate?: TemplateRef; + @Input() weekviewNormalEventTemplate?: TemplateRef; + @Input() dayviewAllDayEventTemplate?: TemplateRef; + @Input() dayviewNormalEventTemplate?: TemplateRef; + @Input() + weekviewAllDayEventSectionTemplate?: TemplateRef; + @Input() + weekviewNormalEventSectionTemplate?: TemplateRef; + @Input() + dayviewAllDayEventSectionTemplate?: TemplateRef; + @Input() + dayviewNormalEventSectionTemplate?: TemplateRef; + @Input() + weekviewInactiveAllDayEventSectionTemplate?: TemplateRef; + @Input() + weekviewInactiveNormalEventSectionTemplate?: TemplateRef; + @Input() + dayviewInactiveAllDayEventSectionTemplate?: TemplateRef; + @Input() + dayviewInactiveNormalEventSectionTemplate?: TemplateRef; + @Input() dateFormatter?: IDateFormatter; + @Input() dir: string = ""; + @Input() scrollToHour: number = 0; + @Input() preserveScrollPosition: boolean = false; + @Input() lockSwipeToPrev: boolean = false; + @Input() lockSwipeToNext: boolean = false; + @Input() lockSwipes: boolean = false; + @Input() locale: string = ""; + @Input() startHour: number = 0; + @Input() endHour: number = 24; + @Input() sliderOptions: any; @Output() onCurrentDateChanged = new EventEmitter(); @Output() onRangeChanged = new EventEmitter(); @@ -84,18 +121,22 @@ export class CalendarComponent implements OnInit { @Output() onDayHeaderSelected = new EventEmitter(); @Output() onTitleChanged = new EventEmitter(true); - private _currentDate:Date = new Date(); + private _currentDate: Date = new Date(); public hourParts = 1; public hourSegments = 1; - private currentDateChangedFromChildrenSubscription?:Subscription; + private currentDateChangedFromChildrenSubscription?: Subscription; - constructor(private calendarService:CalendarService, @Inject(LOCALE_ID) private appLocale:string, private ngZone: NgZone) { + constructor( + private calendarService: CalendarService, + @Inject(LOCALE_ID) private appLocale: string, + private ngZone: NgZone + ) { this.locale = appLocale; } - ngOnInit() { + ngOnInit(): void { if (this.autoSelect) { - if (this.autoSelect.toString() === 'false') { + if (this.autoSelect.toString() === "false") { this.autoSelect = false; } else { this.autoSelect = true; @@ -103,7 +144,7 @@ export class CalendarComponent implements OnInit { } this.hourSegments = 60 / this.timeInterval; this.hourParts = 60 / this.step; - if(this.hourParts <= this.hourSegments) { + if (this.hourParts <= this.hourSegments) { this.hourParts = 1; } else { this.hourParts = this.hourParts / this.hourSegments; @@ -112,52 +153,55 @@ export class CalendarComponent implements OnInit { this.endHour = parseInt(this.endHour.toString()); this.calendarService.queryMode = this.queryMode; - this.currentDateChangedFromChildrenSubscription = this.calendarService.currentDateChangedFromChildren$.subscribe(currentDate => { - this._currentDate = currentDate; - this.onCurrentDateChanged.emit(currentDate); - }); + this.currentDateChangedFromChildrenSubscription = + this.calendarService.currentDateChangedFromChildren$.subscribe( + (currentDate: Date) => { + this._currentDate = currentDate; + this.onCurrentDateChanged.emit(currentDate); + } + ); } - ngOnDestroy() { + ngOnDestroy(): void { if (this.currentDateChangedFromChildrenSubscription) { this.currentDateChangedFromChildrenSubscription.unsubscribe(); this.currentDateChangedFromChildrenSubscription = undefined; } } - rangeChanged(range:IRange) { + public rangeChanged(range: IRange): void { this.onRangeChanged.emit(range); } - eventSelected(event:IEvent) { + public eventSelected(event: IEvent): void { this.onEventSelected.emit(event); } - timeSelected(timeSelected:ITimeSelected) { + public timeSelected(timeSelected: ITimeSelected): void { this.onTimeSelected.emit(timeSelected); } - daySelected(daySelected:ITimeSelected) { + public daySelected(daySelected: ITimeSelected): void { this.onDayHeaderSelected.emit(daySelected); } - titleChanged(title:string) { + public titleChanged(title: string): void { this.onTitleChanged.emit(title); } - loadEvents() { + public loadEvents(): void { this.calendarService.loadEvents(); } - slideNext() { + public slideNext(): void { this.calendarService.slide(1); } - slidePrev() { + public slidePrev(): void { this.calendarService.slide(-1); } - update() { + public update(): void { this.calendarService.update(); } } diff --git a/src/dayview.ts b/src/dayview.ts index 6e0a4c33..08b6161d 100644 --- a/src/dayview.ts +++ b/src/dayview.ts @@ -1,4 +1,4 @@ -import {DatePipe} from '@angular/common'; +import { DatePipe } from "@angular/common"; import { Component, OnInit, @@ -11,14 +11,14 @@ import { ViewEncapsulation, TemplateRef, ElementRef, - AfterViewInit, + AfterViewInit, OnDestroy, NgZone, - ViewChild -} from '@angular/core'; -import {Subscription} from 'rxjs'; -import {Swiper} from 'swiper'; -import {SwiperOptions} from 'swiper/types'; + ViewChild, +} from "@angular/core"; +import { Subscription } from "rxjs"; +import { Swiper } from "swiper"; +import { SwiperOptions } from "swiper/types"; import { ICalendarComponent, @@ -32,32 +32,40 @@ import { IDateFormatter, IDisplayAllDayEvent, IDayViewAllDayEventSectionTemplateContext, - IDayViewNormalEventSectionTemplateContext -} from './calendar.interface'; -import {CalendarService} from './calendar.service'; + IDayViewNormalEventSectionTemplateContext, +} from "./calendar.interface"; +import { CalendarService } from "./calendar.service"; @Component({ - selector: 'dayview', - templateUrl: './dayview.html', - styleUrls: ['./dayview.css'], - encapsulation: ViewEncapsulation.None + selector: "dayview", + templateUrl: "./dayview.html", + styleUrls: ["./dayview.css"], + encapsulation: ViewEncapsulation.None, }) -export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, OnDestroy, AfterViewInit { - - constructor(private calendarService: CalendarService, private elm: ElementRef, private zone: NgZone) { - } +export class DayViewComponent + implements ICalendarComponent, OnInit, OnChanges, OnDestroy, AfterViewInit +{ + constructor( + private calendarService: CalendarService, + private elm: ElementRef, + private zone: NgZone + ) {} private slider!: Swiper; - @ViewChild('dayViewSwiper') swiperElement?: ElementRef; + @ViewChild("dayViewSwiper") swiperElement?: ElementRef; - @HostBinding('class.dayview') class = true; + @HostBinding("class.dayview") class = true; @Input() dayviewAllDayEventTemplate!: TemplateRef; @Input() dayviewNormalEventTemplate!: TemplateRef; - @Input() dayviewAllDayEventSectionTemplate!: TemplateRef; - @Input() dayviewNormalEventSectionTemplate!: TemplateRef; - @Input() dayviewInactiveAllDayEventSectionTemplate!: TemplateRef; - @Input() dayviewInactiveNormalEventSectionTemplate!: TemplateRef; + @Input() + dayviewAllDayEventSectionTemplate!: TemplateRef; + @Input() + dayviewNormalEventSectionTemplate!: TemplateRef; + @Input() + dayviewInactiveAllDayEventSectionTemplate!: TemplateRef; + @Input() + dayviewInactiveNormalEventSectionTemplate!: TemplateRef; @Input() formatHourColumn?: string; @Input() formatDayTitle?: string; @@ -67,7 +75,7 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, @Input() markDisabled?: (date: Date) => boolean; @Input() locale!: string; @Input() dateFormatter?: IDateFormatter; - @Input() dir = ''; + @Input() dir = ""; @Input() scrollToHour = 0; @Input() preserveScrollPosition?: boolean; @Input() lockSwipeToPrev?: boolean = false; @@ -87,7 +95,7 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, public views: IDayView[] = []; public currentViewIndex = 0; public direction = 0; - public mode: CalendarMode = 'day'; + public mode: CalendarMode = "day"; public range!: IRange; private inited = false; @@ -103,13 +111,16 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, private formatHourColumnLabel!: (date: Date) => string; private hourRange!: number; - static createDateObjects(startTime: Date, startHour: number, endHour: number, timeInterval: number): IDayViewRow[] { + static createDateObjects( + startTime: Date, + startHour: number, + endHour: number, + timeInterval: number + ): IDayViewRow[] { const rows: IDayViewRow[] = [], currentHour = 0, currentDate = startTime.getDate(); - let time: Date, - hourStep, - minStep; + let time: Date, hourStep, minStep; if (timeInterval < 1) { hourStep = Math.floor(1 / timeInterval); @@ -126,20 +137,28 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, time.setDate(currentDate); rows.push({ time, - events: [] + events: [], }); } } return rows; } - private static compareEventByStartOffset(eventA: IDisplayEvent, eventB: IDisplayEvent) { + private static compareEventByStartOffset( + eventA: IDisplayEvent, + eventB: IDisplayEvent + ) { return eventA.startOffset - eventB.startOffset; } - private static calculateWidth(orderedEvents: IDisplayEvent[], size: number, hourParts: number) { + private static calculateWidth( + orderedEvents: IDisplayEvent[], + size: number, + hourParts: number + ) { const totalSize = size * hourParts, - cells: { calculated: boolean; events: IDisplayEvent[]; }[] = new Array(totalSize); + cells: { calculated: boolean; events: IDisplayEvent[] }[] = + new Array(totalSize); // sort by position in descending order, the right most columns should be calculated first orderedEvents.sort((eventA, eventB) => { @@ -148,7 +167,7 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, for (let i = 0; i < totalSize; i += 1) { cells[i] = { calculated: false, - events: [] + events: [], }; } const len = orderedEvents.length; @@ -163,22 +182,29 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, let i = 0; while (i < len) { - let event:IDisplayEvent|undefined = orderedEvents[i]; + let event: IDisplayEvent | undefined = orderedEvents[i]; if (!event.overlapNumber) { const overlapNumber = event.position + 1; event.overlapNumber = overlapNumber; const eventQueue = [event]; - while (event = eventQueue.shift()) { - let index = event.startIndex * hourParts + event.startOffset; - while (index < event.endIndex * hourParts - event.endOffset) { + while ((event = eventQueue.shift())) { + let index = + event.startIndex * hourParts + event.startOffset; + while ( + index < + event.endIndex * hourParts - event.endOffset + ) { if (!cells[index].calculated) { cells[index].calculated = true; if (cells[index].events) { - const eventCountInCell = cells[index].events.length; + const eventCountInCell = + cells[index].events.length; for (let j = 0; j < eventCountInCell; j += 1) { - const currentEventInCell = cells[index].events[j]; + const currentEventInCell = + cells[index].events[j]; if (!currentEventInCell.overlapNumber) { - currentEventInCell.overlapNumber = overlapNumber; + currentEventInCell.overlapNumber = + overlapNumber; eventQueue.push(currentEventInCell); } } @@ -192,7 +218,7 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - ngOnInit() { + ngOnInit(): void { if (!this.sliderOptions) { this.sliderOptions = {}; } @@ -206,17 +232,18 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, this.formatTitle = this.dateFormatter.formatDayViewTitle; } else { const datePipe = new DatePipe(this.locale); - this.formatTitle = function(date: Date) { - return datePipe.transform(date, this.formatDayTitle)||''; + this.formatTitle = function (date: Date) { + return datePipe.transform(date, this.formatDayTitle) || ""; }; } if (this.dateFormatter && this.dateFormatter.formatDayViewHourColumn) { - this.formatHourColumnLabel = this.dateFormatter.formatDayViewHourColumn; + this.formatHourColumnLabel = + this.dateFormatter.formatDayViewHourColumn; } else { const datePipe = new DatePipe(this.locale); - this.formatHourColumnLabel = function(date: Date) { - return datePipe.transform(date, this.formatHourColumn)||''; + this.formatHourColumnLabel = function (date: Date) { + return datePipe.transform(date, this.formatHourColumn) || ""; }; } @@ -225,88 +252,105 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, this.inited = true; - this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => { - this.refreshView(); - }); - - this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => { - this.onDataLoaded(); - }); - - this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => { - if (direction === 1) { - this.slider.slideNext(); - } else if (direction === -1) { - this.slider.slidePrev(); - } - }); + this.currentDateChangedFromParentSubscription = + this.calendarService.currentDateChangedFromParent$.subscribe(() => { + this.refreshView(); + }); + + this.eventSourceChangedSubscription = + this.calendarService.eventSourceChanged$.subscribe(() => { + this.onDataLoaded(); + }); + + this.slideChangedSubscription = + this.calendarService.slideChanged$.subscribe( + (direction: number) => { + if (direction === 1) { + this.slider.slideNext(); + } else if (direction === -1) { + this.slider.slidePrev(); + } + } + ); - this.slideUpdatedSubscription = this.calendarService.slideUpdated$.subscribe(() => { - this.slider.update(); - }); + this.slideUpdatedSubscription = + this.calendarService.slideUpdated$.subscribe(() => { + this.slider.update(); + }); } - ngAfterViewInit() { - this.slider = new Swiper(this.swiperElement?.nativeElement, this.sliderOptions); + ngAfterViewInit(): void { + this.slider = new Swiper( + this.swiperElement?.nativeElement, + this.sliderOptions + ); let me = this; - this.slider.on('slideNextTransitionEnd', function() { + this.slider.on("slideNextTransitionEnd", function () { me.onSlideChanged(1); }); - this.slider.on('slidePrevTransitionEnd', function() { + this.slider.on("slidePrevTransitionEnd", function () { me.onSlideChanged(-1); }); - if(this.dir === 'rtl') { - this.slider.changeLanguageDirection('rtl'); + if (this.dir === "rtl") { + this.slider.changeLanguageDirection("rtl"); } - + const title = this.getTitle(); this.onTitleChanged.emit(title); if (this.scrollToHour > 0) { - const hourColumns = this.elm.nativeElement.querySelector('.dayview-normal-event-container').querySelectorAll('.calendar-hour-column'); + const hourColumns = this.elm.nativeElement + .querySelector(".dayview-normal-event-container") + .querySelectorAll(".calendar-hour-column"); const me = this; setTimeout(() => { - me.initScrollPosition = hourColumns[me.scrollToHour - me.startHour].offsetTop; + me.initScrollPosition = + hourColumns[me.scrollToHour - me.startHour].offsetTop; }, 50); } } - ngOnChanges(changes: SimpleChanges) { + ngOnChanges(changes: SimpleChanges): void { if (!this.inited) { return; } - if ((changes['startHour'] || changes['endHour']) && (!changes['startHour'].isFirstChange() || !changes['endHour'].isFirstChange())) { + if ( + (changes["startHour"] || changes["endHour"]) && + (!changes["startHour"].isFirstChange() || + !changes["endHour"].isFirstChange()) + ) { this.views = []; - this.hourRange = (this.endHour - this.startHour) * this.hourSegments; + this.hourRange = + (this.endHour - this.startHour) * this.hourSegments; this.direction = 0; this.refreshView(); this.hourColumnLabels = this.getHourColumnLabels(); } - const eventSourceChange = changes['eventSource']; + const eventSourceChange = changes["eventSource"]; if (eventSourceChange && eventSourceChange.currentValue) { this.onDataLoaded(); } - const lockSwipeToPrev = changes['lockSwipeToPrev']; + const lockSwipeToPrev = changes["lockSwipeToPrev"]; if (lockSwipeToPrev) { this.slider.allowSlidePrev = !lockSwipeToPrev.currentValue; } - const lockSwipeToNext = changes['lockSwipeToNext']; + const lockSwipeToNext = changes["lockSwipeToNext"]; if (lockSwipeToPrev) { this.slider.allowSlideNext = !lockSwipeToNext.currentValue; } - const lockSwipes = changes['lockSwipes']; + const lockSwipes = changes["lockSwipes"]; if (lockSwipes) { this.slider.allowTouchMove = !lockSwipes.currentValue; } } - ngOnDestroy() { + ngOnDestroy(): void { if (this.currentDateChangedFromParentSubscription) { this.currentDateChangedFromParentSubscription.unsubscribe(); this.currentDateChangedFromParentSubscription = undefined; @@ -328,18 +372,21 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - onSlideChanged(direction: number) { + private onSlideChanged(direction: number): void { this.currentViewIndex = (this.currentViewIndex + direction + 3) % 3; this.move(direction); } - move(direction: number) { + private move(direction: number): void { if (direction === 0) { return; } this.direction = direction; - const adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction); + const adjacentDate = this.calendarService.getAdjacentCalendarDate( + this.mode, + direction + ); this.calendarService.setCurrentDate(adjacentDate); this.refreshView(); this.direction = 0; @@ -347,15 +394,24 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, private getHourColumnLabels(): string[] { const hourColumnLabels: string[] = []; - for (let hour = 0, length = this.views[0].rows.length; hour < length; hour += 1) { + for ( + let hour = 0, length = this.views[0].rows.length; + hour < length; + hour += 1 + ) { // handle edge case for DST - if (hour === 0 && this.views[0].rows[hour].time.getHours() !== this.startHour) { + if ( + hour === 0 && + this.views[0].rows[hour].time.getHours() !== this.startHour + ) { const time = new Date(this.views[0].rows[hour].time); time.setDate(time.getDate() + 1); time.setHours(this.startHour); hourColumnLabels.push(this.formatHourColumnLabel(time)); } else { - hourColumnLabels.push(this.formatHourColumnLabel(this.views[0].rows[hour].time)); + hourColumnLabels.push( + this.formatHourColumnLabel(this.views[0].rows[hour].time) + ); } } return hourColumnLabels; @@ -363,12 +419,17 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, getViewData(startTime: Date): IDayView { return { - rows: DayViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments), - allDayEvents: [] + rows: DayViewComponent.createDateObjects( + startTime, + this.startHour, + this.endHour, + this.hourSegments + ), + allDayEvents: [], }; } - getRange(currentDate: Date): IRange { + public getRange(currentDate: Date): IRange { const year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), @@ -377,20 +438,30 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, return { startTime, - endTime + endTime, }; } - onDataLoaded() { + public onDataLoaded(): void { const eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = this.range.startTime, endTime = this.range.endTime, - utcStartTime = Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate()), - utcEndTime = Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate()), + utcStartTime = Date.UTC( + startTime.getFullYear(), + startTime.getMonth(), + startTime.getDate() + ), + utcEndTime = Date.UTC( + endTime.getFullYear(), + endTime.getMonth(), + endTime.getDate() + ), currentViewIndex = this.currentViewIndex, rows = this.views[currentViewIndex].rows, - allDayEvents: IDisplayAllDayEvent[] = this.views[currentViewIndex].allDayEvents = [], + allDayEvents: IDisplayAllDayEvent[] = (this.views[ + currentViewIndex + ].allDayEvents = []), oneHour = 3600000, eps = 0.016, rangeStartRowIndex = this.startHour * this.hourSegments, @@ -405,24 +476,35 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, const event = eventSource[i]; const eventStartTime = event.startTime; const eventEndTime = event.endTime; - let eventUTCStartTime: number, - eventUTCEndTime: number; + let eventUTCStartTime: number, eventUTCEndTime: number; if (event.allDay) { eventUTCStartTime = eventStartTime.getTime(); eventUTCEndTime = eventEndTime.getTime(); } else { - eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate()); - eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1); + eventUTCStartTime = Date.UTC( + eventStartTime.getFullYear(), + eventStartTime.getMonth(), + eventStartTime.getDate() + ); + eventUTCEndTime = Date.UTC( + eventEndTime.getFullYear(), + eventEndTime.getMonth(), + eventEndTime.getDate() + 1 + ); } - if (eventUTCEndTime <= utcStartTime || eventUTCStartTime >= utcEndTime || eventStartTime >= eventEndTime) { + if ( + eventUTCEndTime <= utcStartTime || + eventUTCStartTime >= utcEndTime || + eventStartTime >= eventEndTime + ) { continue; } if (event.allDay) { allDayEvents.push({ - event + event, }); } else { normalEventInRange = true; @@ -431,14 +513,22 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, if (eventUTCStartTime < utcStartTime) { timeDifferenceStart = 0; } else { - timeDifferenceStart = (eventStartTime.getHours() + eventStartTime.getMinutes() / 60) * this.hourSegments; + timeDifferenceStart = + (eventStartTime.getHours() + + eventStartTime.getMinutes() / 60) * + this.hourSegments; } let timeDifferenceEnd: number; if (eventUTCEndTime > utcEndTime) { - timeDifferenceEnd = (utcEndTime - utcStartTime) / oneHour * this.hourSegments; + timeDifferenceEnd = + ((utcEndTime - utcStartTime) / oneHour) * + this.hourSegments; } else { - timeDifferenceEnd = (eventEndTime.getHours() + eventEndTime.getMinutes() / 60) * this.hourSegments; + timeDifferenceEnd = + (eventEndTime.getHours() + + eventEndTime.getMinutes() / 60) * + this.hourSegments; } let startIndex = Math.floor(timeDifferenceStart); @@ -449,12 +539,16 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, if (startIndex < rangeStartRowIndex) { startOffset = 0; } else { - startOffset = Math.floor((timeDifferenceStart - startIndex) * this.hourParts); + startOffset = Math.floor( + (timeDifferenceStart - startIndex) * this.hourParts + ); } if (endIndex > rangeEndRowIndex) { endOffset = 0; } else { - endOffset = Math.floor((endIndex - timeDifferenceEnd) * this.hourParts); + endOffset = Math.floor( + (endIndex - timeDifferenceEnd) * this.hourParts + ); } } @@ -469,13 +563,13 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, endIndex -= rangeStartRowIndex; if (startIndex < endIndex) { - const displayEvent:IDisplayEvent = { + const displayEvent: IDisplayEvent = { event, startIndex, endIndex, startOffset, endOffset, - position:0 + position: 0, }; let eventSet = rows[startIndex].events; @@ -494,7 +588,9 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, let orderedEvents: IDisplayEvent[] = []; for (let hour = 0; hour < this.hourRange; hour += 1) { if (rows[hour].events) { - rows[hour].events.sort(DayViewComponent.compareEventByStartOffset); + rows[hour].events.sort( + DayViewComponent.compareEventByStartOffset + ); orderedEvents = orderedEvents.concat(rows[hour].events); } @@ -505,7 +601,7 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - refreshView() { + private refreshView(): void { this.range = this.getRange(this.calendarService.currentDate); if (this.inited) { const title = this.getTitle(); @@ -516,13 +612,13 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, this.calendarService.rangeChanged(this); } - getTitle(): string { + private getTitle(): string { const startingDate = new Date(this.range.startTime.getTime()); startingDate.setHours(12, 0, 0, 0); return this.formatTitle(startingDate); } - select(selectedTime: Date, events: IDisplayEvent[]) { + public select(selectedTime: Date, events: IDisplayEvent[]): void { let disabled = false; if (this.markDisabled) { disabled = this.markDisabled(selectedTime); @@ -530,24 +626,32 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, this.onTimeSelected.emit({ selectedTime, - events: events.map(e => e.event), - disabled + events: events.map((e) => e.event), + disabled, }); } - placeEvents(orderedEvents: IDisplayEvent[]) { + private placeEvents(orderedEvents: IDisplayEvent[]): void { this.calculatePosition(orderedEvents); - DayViewComponent.calculateWidth(orderedEvents, this.hourRange, this.hourParts); + DayViewComponent.calculateWidth( + orderedEvents, + this.hourRange, + this.hourParts + ); } - placeAllDayEvents(orderedEvents: IDisplayEvent[]) { + public placeAllDayEvents(orderedEvents: IDisplayEvent[]): void { this.calculatePosition(orderedEvents); } - overlap(event1: IDisplayEvent, event2: IDisplayEvent): boolean { + private overlap(event1: IDisplayEvent, event2: IDisplayEvent): boolean { let earlyEvent = event1, lateEvent = event2; - if (event1.startIndex > event2.startIndex || (event1.startIndex === event2.startIndex && event1.startOffset > event2.startOffset)) { + if ( + event1.startIndex > event2.startIndex || + (event1.startIndex === event2.startIndex && + event1.startOffset > event2.startOffset) + ) { earlyEvent = event2; lateEvent = event1; } @@ -555,17 +659,19 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, if (earlyEvent.endIndex <= lateEvent.startIndex) { return false; } else { - return !(earlyEvent.endIndex - lateEvent.startIndex === 1 && earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts); + return !( + earlyEvent.endIndex - lateEvent.startIndex === 1 && + earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts + ); } } - calculatePosition(events: IDisplayEvent[]) { + private calculatePosition(events: IDisplayEvent[]): void { const len = events.length, isForbidden: boolean[] = new Array(len); let maxColumn = 0, col: number; - for (let i = 0; i < len; i += 1) { for (col = 0; col < maxColumn; col += 1) { isForbidden[col] = false; @@ -587,18 +693,18 @@ export class DayViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - if (this.dir === 'rtl') { + if (this.dir === "rtl") { for (let i = 0; i < len; i += 1) { events[i].position = maxColumn - 1 - events[i].position; } } } - eventSelected(event: IEvent) { + public eventSelected(event: IEvent): void { this.onEventSelected.emit(event); } - setScrollPosition(scrollPosition: number) { + public setScrollPosition(scrollPosition: number): void { this.initScrollPosition = scrollPosition; } } diff --git a/src/init-position-scroll.ts b/src/init-position-scroll.ts index 65b11904..a1d93660 100644 --- a/src/init-position-scroll.ts +++ b/src/init-position-scroll.ts @@ -9,50 +9,60 @@ import { AfterViewInit, OnDestroy, ViewEncapsulation, - NgZone -} from '@angular/core'; + NgZone, +} from "@angular/core"; @Component({ - selector: 'init-position-scroll', + selector: "init-position-scroll", template: `
`, - styles: [` - .scroll-content { - overflow-y: auto; - overflow-x: hidden; - } - `], - encapsulation: ViewEncapsulation.None + styles: [ + ` + .scroll-content { + overflow-y: auto; + overflow-x: hidden; + } + `, + ], + encapsulation: ViewEncapsulation.None, }) -export class initPositionScrollComponent implements OnChanges, AfterViewInit, OnDestroy { - @Input() initPosition!:number; - @Input() emitEvent?:boolean; +export class initPositionScrollComponent + implements OnChanges, AfterViewInit, OnDestroy +{ + @Input() initPosition!: number; + @Input() emitEvent?: boolean; @Output() onScroll = new EventEmitter(); - private element:ElementRef; - private scrollContent!:HTMLElement; - private handler!:()=>void; - private listenerAttached:boolean = false; + private element: ElementRef; + private scrollContent!: HTMLElement; + private handler!: () => void; + private listenerAttached: boolean = false; - constructor(el:ElementRef, private ngZone: NgZone) { + constructor(el: ElementRef, private ngZone: NgZone) { this.element = el; } - ngOnChanges(changes:SimpleChanges) { - let initPosition = changes['initPosition']; - if (initPosition && initPosition.currentValue !== undefined && this.scrollContent && initPosition.currentValue != this.scrollContent.scrollTop) { - const me =this; + ngOnChanges(changes: SimpleChanges): void { + let initPosition = changes["initPosition"]; + if ( + initPosition && + initPosition.currentValue !== undefined && + this.scrollContent && + initPosition.currentValue != this.scrollContent.scrollTop + ) { + const me = this; this.ngZone.run(() => { me.scrollContent.scrollTop = initPosition.currentValue; }); } } - ngAfterViewInit() { - const scrollContent = this.scrollContent = this.element.nativeElement.querySelector('.scroll-content'); + ngAfterViewInit(): void { + const scrollContent = (this.scrollContent = + this.element.nativeElement.querySelector(".scroll-content")); if (this.initPosition !== undefined) { scrollContent.scrollTop = this.initPosition; } @@ -61,18 +71,18 @@ export class initPositionScrollComponent implements OnChanges, AfterViewInit, On let onScroll = this.onScroll; let me = this; this.handler = function () { - if(me.initPosition != scrollContent.scrollTop) { + if (me.initPosition != scrollContent.scrollTop) { onScroll.emit(scrollContent.scrollTop); } }; this.listenerAttached = true; - scrollContent.addEventListener('scroll', this.handler); + scrollContent.addEventListener("scroll", this.handler); } } - ngOnDestroy() { + ngOnDestroy(): void { if (this.listenerAttached) { - this.scrollContent.removeEventListener('scroll', this.handler); + this.scrollContent.removeEventListener("scroll", this.handler); this.listenerAttached = false; } } diff --git a/src/monthview.ts b/src/monthview.ts index 9838c576..dcea8e42 100644 --- a/src/monthview.ts +++ b/src/monthview.ts @@ -11,32 +11,48 @@ import { AfterViewInit, NgZone, ViewChild, - ElementRef -} from '@angular/core'; -import {Subscription} from 'rxjs'; -import {DatePipe} from '@angular/common'; -import {Swiper} from 'swiper'; -import {SwiperOptions} from 'swiper/types'; + ElementRef, +} from "@angular/core"; +import { Subscription } from "rxjs"; +import { DatePipe } from "@angular/common"; +import { Swiper } from "swiper"; +import { SwiperOptions } from "swiper/types"; -import {ICalendarComponent, IEvent, IMonthView, IMonthViewRow, ITimeSelected, IRange, CalendarMode, IDateFormatter, IMonthViewDisplayEventTemplateContext} from './calendar.interface'; -import {CalendarService} from './calendar.service'; +import { + ICalendarComponent, + IEvent, + IMonthView, + IMonthViewRow, + ITimeSelected, + IRange, + CalendarMode, + IDateFormatter, + IMonthViewDisplayEventTemplateContext, +} from "./calendar.interface"; +import { CalendarService } from "./calendar.service"; @Component({ - selector: 'monthview', - templateUrl: './monthview.html', - styleUrls: ['./monthview.css'], + selector: "monthview", + templateUrl: "./monthview.html", + styleUrls: ["./monthview.css"], }) -export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy, OnChanges, AfterViewInit { - - constructor(private calendarService: CalendarService, private zone:NgZone) { - } +export class MonthViewComponent + implements ICalendarComponent, OnInit, OnDestroy, OnChanges, AfterViewInit +{ + constructor( + private calendarService: CalendarService, + private zone: NgZone + ) {} private slider!: Swiper; - @ViewChild('monthViewSwiper') swiperElement?: ElementRef; + @ViewChild("monthViewSwiper") swiperElement?: ElementRef; - @Input() monthviewDisplayEventTemplate!: TemplateRef; - @Input() monthviewInactiveDisplayEventTemplate!: TemplateRef; - @Input() monthviewEventDetailTemplate!: TemplateRef; + @Input() + monthviewDisplayEventTemplate!: TemplateRef; + @Input() + monthviewInactiveDisplayEventTemplate!: TemplateRef; + @Input() + monthviewEventDetailTemplate!: TemplateRef; @Input() formatDay?: string; @Input() formatDayHeader?: string; @@ -49,7 +65,7 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy @Input() markDisabled?: (date: Date) => boolean; @Input() locale!: string; @Input() dateFormatter?: IDateFormatter; - @Input() dir = ''; + @Input() dir = ""; @Input() lockSwipeToPrev?: boolean = false; @Input() lockSwipeToNext?: boolean = false; @Input() lockSwipes?: boolean = false; @@ -64,7 +80,7 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy public currentViewIndex = 0; public selectedDate?: IMonthViewRow; public range!: IRange; - public mode: CalendarMode = 'month'; + public mode: CalendarMode = "month"; public direction = 0; private moveOnSelected = false; @@ -90,7 +106,7 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy return dates; } - ngOnInit() { + ngOnInit(): void { if (!this.sliderOptions) { this.sliderOptions = {}; } @@ -102,18 +118,19 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy if (this.dateFormatter && this.dateFormatter.formatMonthViewDay) { this.formatDayLabel = this.dateFormatter.formatMonthViewDay; } else { - const dayLabelDatePipe = new DatePipe('en-US'); - this.formatDayLabel = function(date: Date) { - return dayLabelDatePipe.transform(date, this.formatDay)||''; + const dayLabelDatePipe = new DatePipe("en-US"); + this.formatDayLabel = function (date: Date) { + return dayLabelDatePipe.transform(date, this.formatDay) || ""; }; } if (this.dateFormatter && this.dateFormatter.formatMonthViewDayHeader) { - this.formatDayHeaderLabel = this.dateFormatter.formatMonthViewDayHeader; + this.formatDayHeaderLabel = + this.dateFormatter.formatMonthViewDayHeader; } else { const datePipe = new DatePipe(this.locale); - this.formatDayHeaderLabel = function(date: Date) { - return datePipe.transform(date, this.formatDayHeader)||''; + this.formatDayHeaderLabel = function (date: Date) { + return datePipe.transform(date, this.formatDayHeader) || ""; }; } @@ -121,36 +138,44 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy this.formatTitle = this.dateFormatter.formatMonthViewTitle; } else { const datePipe = new DatePipe(this.locale); - this.formatTitle = function(date: Date) { - return datePipe.transform(date, this.formatMonthTitle)||''; + this.formatTitle = function (date: Date) { + return datePipe.transform(date, this.formatMonthTitle) || ""; }; } this.refreshView(); this.inited = true; - this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => { - this.refreshView(); - }); - - this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => { - this.onDataLoaded(); - }); - - this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => { - if (direction === 1) { - this.slider.slideNext(); - } else if (direction === -1) { - this.slider.slidePrev(); - } - }); + this.currentDateChangedFromParentSubscription = + this.calendarService.currentDateChangedFromParent$.subscribe( + (currentDate: Date) => { + this.refreshView(); + } + ); + + this.eventSourceChangedSubscription = + this.calendarService.eventSourceChanged$.subscribe(() => { + this.onDataLoaded(); + }); + + this.slideChangedSubscription = + this.calendarService.slideChanged$.subscribe( + (direction: number) => { + if (direction === 1) { + this.slider.slideNext(); + } else if (direction === -1) { + this.slider.slidePrev(); + } + } + ); - this.slideUpdatedSubscription = this.calendarService.slideUpdated$.subscribe(() => { - this.slider.update(); - }); + this.slideUpdatedSubscription = + this.calendarService.slideUpdated$.subscribe(() => { + this.slider.update(); + }); } - ngOnDestroy() { + ngOnDestroy(): void { if (this.currentDateChangedFromParentSubscription) { this.currentDateChangedFromParentSubscription.unsubscribe(); this.currentDateChangedFromParentSubscription = undefined; @@ -172,68 +197,74 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy } } - ngOnChanges(changes: SimpleChanges) { + ngOnChanges(changes: SimpleChanges): void { if (!this.inited) { return; } - const eventSourceChange = changes['eventSource']; + const eventSourceChange = changes["eventSource"]; if (eventSourceChange && eventSourceChange.currentValue) { this.onDataLoaded(); } - const lockSwipeToPrev = changes['lockSwipeToPrev']; + const lockSwipeToPrev = changes["lockSwipeToPrev"]; if (lockSwipeToPrev) { this.slider.allowSlidePrev = !lockSwipeToPrev.currentValue; } - const lockSwipeToNext = changes['lockSwipeToNext']; + const lockSwipeToNext = changes["lockSwipeToNext"]; if (lockSwipeToNext) { this.slider.allowSlideNext = !lockSwipeToNext.currentValue; } - const lockSwipes = changes['lockSwipes']; + const lockSwipes = changes["lockSwipes"]; if (lockSwipes) { this.slider.allowTouchMove = !lockSwipes.currentValue; } } - ngAfterViewInit() { - this.slider = new Swiper(this.swiperElement?.nativeElement, this.sliderOptions); + ngAfterViewInit(): void { + this.slider = new Swiper( + this.swiperElement?.nativeElement, + this.sliderOptions + ); let me = this; - this.slider.on('slideNextTransitionEnd', function() { + this.slider.on("slideNextTransitionEnd", function () { me.onSlideChanged(1); }); - this.slider.on('slidePrevTransitionEnd', function() { + this.slider.on("slidePrevTransitionEnd", function () { me.onSlideChanged(-1); }); - if(this.dir == 'rtl') { - this.slider.changeLanguageDirection('rtl'); + if (this.dir == "rtl") { + this.slider.changeLanguageDirection("rtl"); } const title = this.getTitle(); this.onTitleChanged.emit(title); } - setSwiperInstance(swiper: any) { + public setSwiperInstance(swiper: any): void { this.slider = swiper; } - onSlideChanged(direction: number) { + private onSlideChanged(direction: number): void { this.currentViewIndex = (this.currentViewIndex + direction + 3) % 3; this.move(direction); } - move(direction: number) { + private move(direction: number): void { if (direction === 0) { return; } this.direction = direction; if (!this.moveOnSelected) { - const adjacentDate = this.calendarService.getAdjacentCalendarDate(this.mode, direction); + const adjacentDate = this.calendarService.getAdjacentCalendarDate( + this.mode, + direction + ); this.calendarService.setCurrentDate(adjacentDate); } this.refreshView(); @@ -241,7 +272,7 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy this.moveOnSelected = false; } - createDateObject(date: Date): IMonthViewRow { + private createDateObject(date: Date): IMonthViewRow { let disabled = false; if (this.markDisabled) { disabled = this.markDisabled(date); @@ -252,11 +283,11 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy events: [], label: this.formatDayLabel(date), secondary: false, - disabled + disabled, }; } - getViewData(startTime: Date): IMonthView { + public getViewData(startTime: Date): IMonthView { const startDate = startTime, date = startDate.getDate(), month = (startDate.getMonth() + (date !== 1 ? 1 : 0)) % 12; @@ -275,58 +306,58 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy } return { dates: days, - dayHeaders + dayHeaders, }; } - getHighlightClass(date: IMonthViewRow): string { - let className = ''; + public getHighlightClass(date: IMonthViewRow): string { + let className = ""; if (date.hasEvent) { if (date.secondary) { - className = 'monthview-secondary-with-event'; + className = "monthview-secondary-with-event"; } else { - className = 'monthview-primary-with-event'; + className = "monthview-primary-with-event"; } } if (date.selected) { if (className) { - className += ' '; + className += " "; } - className += 'monthview-selected'; + className += "monthview-selected"; } if (date.current) { if (className) { - className += ' '; + className += " "; } - className += 'monthview-current'; + className += "monthview-current"; } if (date.secondary) { if (className) { - className += ' '; + className += " "; } - className += 'text-muted'; + className += "text-muted"; } if (date.disabled) { if (className) { - className += ' '; + className += " "; } - className += 'monthview-disabled'; + className += "monthview-disabled"; } return className; } - getRange(currentDate: Date): IRange { + public getRange(currentDate: Date): IRange { const year = currentDate.getFullYear(), month = currentDate.getMonth(), firstDayOfMonth = new Date(year, month, 1, 12, 0, 0), // set hour to 12 to avoid DST problem - difference = this.startingDayMonth - firstDayOfMonth.getDay(), - numDisplayedFromPreviousMonth = (difference > 0) ? 7 - difference : -difference, + numDisplayedFromPreviousMonth = + difference > 0 ? 7 - difference : -difference, startDate = new Date(firstDayOfMonth.getTime()); if (numDisplayedFromPreviousMonth > 0) { @@ -338,18 +369,26 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy return { startTime: startDate, - endTime: endDate + endTime: endDate, }; } - onDataLoaded() { + public onDataLoaded(): void { const range = this.range, eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = range.startTime, endTime = range.endTime, - utcStartTime = Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate()), - utcEndTime = Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate()), + utcStartTime = Date.UTC( + startTime.getFullYear(), + startTime.getMonth(), + startTime.getDate() + ), + utcEndTime = Date.UTC( + endTime.getFullYear(), + endTime.getMonth(), + endTime.getDate() + ), currentViewIndex = this.currentViewIndex, dates = this.views[currentViewIndex].dates, oneDay = 86400000, @@ -367,27 +406,37 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy eventStartTime = event.startTime, eventEndTime = event.endTime; - let eventUTCStartTime: number, - eventUTCEndTime: number; + let eventUTCStartTime: number, eventUTCEndTime: number; if (event.allDay) { eventUTCStartTime = eventStartTime.getTime(); eventUTCEndTime = eventEndTime.getTime(); } else { - eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate()); - eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1); + eventUTCStartTime = Date.UTC( + eventStartTime.getFullYear(), + eventStartTime.getMonth(), + eventStartTime.getDate() + ); + eventUTCEndTime = Date.UTC( + eventEndTime.getFullYear(), + eventEndTime.getMonth(), + eventEndTime.getDate() + 1 + ); } - if (eventUTCEndTime <= utcStartTime || eventUTCStartTime >= utcEndTime) { + if ( + eventUTCEndTime <= utcStartTime || + eventUTCStartTime >= utcEndTime + ) { continue; } - let timeDifferenceStart: number, - timeDifferenceEnd: number; + let timeDifferenceStart: number, timeDifferenceEnd: number; if (eventUTCStartTime < utcStartTime) { timeDifferenceStart = 0; } else { - timeDifferenceStart = (eventUTCStartTime - utcStartTime) / oneDay; + timeDifferenceStart = + (eventUTCStartTime - utcStartTime) / oneDay; } if (eventUTCEndTime > utcEndTime) { @@ -432,13 +481,13 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy this.onTimeSelected.emit({ selectedTime: this.selectedDate.date, events: this.selectedDate.events, - disabled: this.selectedDate.disabled + disabled: this.selectedDate.disabled, }); } } } - refreshView() { + private refreshView(): void { this.range = this.getRange(this.calendarService.currentDate); if (this.inited) { @@ -446,15 +495,21 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy this.onTitleChanged.emit(title); } this.calendarService.populateAdjacentViews(this); - this.updateCurrentView(this.range.startTime, this.views[this.currentViewIndex]); + this.updateCurrentView( + this.range.startTime, + this.views[this.currentViewIndex] + ); this.calendarService.rangeChanged(this); } - getTitle(): string { + private getTitle(): string { const currentViewStartDate = this.range.startTime, date = currentViewStartDate.getDate(), - month = (currentViewStartDate.getMonth() + (date !== 1 ? 1 : 0)) % 12, - year = currentViewStartDate.getFullYear() + (date !== 1 && month === 0 ? 1 : 0), + month = + (currentViewStartDate.getMonth() + (date !== 1 ? 1 : 0)) % 12, + year = + currentViewStartDate.getFullYear() + + (date !== 1 && month === 0 ? 1 : 0), headerDate = new Date(year, month, 1, 12, 0, 0, 0); return this.formatTitle(headerDate); } @@ -465,11 +520,11 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy } else if (event2.allDay) { return -1; } else { - return (event1.startTime.getTime() - event2.startTime.getTime()); + return event1.startTime.getTime() - event2.startTime.getTime(); } } - select(viewDate: IMonthViewRow) { + public select(viewDate: IMonthViewRow): void { if (!this.views) { return; } @@ -498,7 +553,19 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy if (direction === 0) { const currentViewStartDate = this.range.startTime, oneDay = 86400000, - selectedDayDifference = Math.round((Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay); + selectedDayDifference = Math.round( + (Date.UTC( + selectedDate.getFullYear(), + selectedDate.getMonth(), + selectedDate.getDate() + ) - + Date.UTC( + currentViewStartDate.getFullYear(), + currentViewStartDate.getMonth(), + currentViewStartDate.getDate() + )) / + oneDay + ); for (let r = 0; r < 42; r += 1) { dates[r].selected = false; @@ -514,10 +581,14 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy } } - this.onTimeSelected.emit({selectedTime: selectedDate, events, disabled: viewDate.disabled}); + this.onTimeSelected.emit({ + selectedTime: selectedDate, + events, + disabled: viewDate.disabled, + }); } - slideView(direction: number) { + private slideView(direction: number): void { if (direction === 1) { this.slider.slideNext(); } else if (direction === -1) { @@ -525,18 +596,50 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy } } - updateCurrentView(currentViewStartDate: Date, view: IMonthView) { + private updateCurrentView( + currentViewStartDate: Date, + view: IMonthView + ): void { const currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, - selectedDayDifference = Math.round((Date.UTC(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), currentCalendarDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay), - currentDayDifference = Math.round((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay); + selectedDayDifference = Math.round( + (Date.UTC( + currentCalendarDate.getFullYear(), + currentCalendarDate.getMonth(), + currentCalendarDate.getDate() + ) - + Date.UTC( + currentViewStartDate.getFullYear(), + currentViewStartDate.getMonth(), + currentViewStartDate.getDate() + )) / + oneDay + ), + currentDayDifference = Math.round( + (Date.UTC( + today.getFullYear(), + today.getMonth(), + today.getDate() + ) - + Date.UTC( + currentViewStartDate.getFullYear(), + currentViewStartDate.getMonth(), + currentViewStartDate.getDate() + )) / + oneDay + ); for (let r = 0; r < 42; r += 1) { view.dates[r].selected = false; } - if (selectedDayDifference >= 0 && selectedDayDifference < 42 && !view.dates[selectedDayDifference].disabled && (this.autoSelect || this.moveOnSelected)) { + if ( + selectedDayDifference >= 0 && + selectedDayDifference < 42 && + !view.dates[selectedDayDifference].disabled && + (this.autoSelect || this.moveOnSelected) + ) { view.dates[selectedDayDifference].selected = true; this.selectedDate = view.dates[selectedDayDifference]; } else { @@ -548,7 +651,7 @@ export class MonthViewComponent implements ICalendarComponent, OnInit, OnDestroy } } - eventSelected(event: IEvent) { + public eventSelected(event: IEvent): void { this.onEventSelected.emit(event); } } diff --git a/src/weekview.ts b/src/weekview.ts index 94cd6170..f50f6a32 100644 --- a/src/weekview.ts +++ b/src/weekview.ts @@ -1,4 +1,4 @@ -import {DatePipe} from '@angular/common'; +import { DatePipe } from "@angular/common"; import { Component, OnInit, @@ -11,14 +11,14 @@ import { ViewEncapsulation, TemplateRef, ElementRef, - OnDestroy, + OnDestroy, AfterViewInit, NgZone, - ViewChild -} from '@angular/core'; -import {Subscription} from 'rxjs'; -import {Swiper} from 'swiper'; -import {SwiperOptions} from 'swiper/types'; + ViewChild, +} from "@angular/core"; +import { Subscription } from "rxjs"; +import { Swiper } from "swiper"; +import { SwiperOptions } from "swiper/types"; import type { ICalendarComponent, @@ -34,33 +34,41 @@ import type { IDisplayWeekViewHeader, IDisplayAllDayEvent, IWeekViewAllDayEventSectionTemplateContext, - IWeekViewNormalEventSectionTemplateContext -} from './calendar.interface'; -import {CalendarService} from './calendar.service'; + IWeekViewNormalEventSectionTemplateContext, +} from "./calendar.interface"; +import { CalendarService } from "./calendar.service"; @Component({ - selector: 'weekview', - templateUrl: './weekview.html', - styleUrls: ['./weekview.css'], - encapsulation: ViewEncapsulation.None + selector: "weekview", + templateUrl: "./weekview.html", + styleUrls: ["./weekview.css"], + encapsulation: ViewEncapsulation.None, }) -export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, OnDestroy, AfterViewInit { - - constructor(private calendarService: CalendarService, private elm: ElementRef, private zone: NgZone) { - } +export class WeekViewComponent + implements ICalendarComponent, OnInit, OnChanges, OnDestroy, AfterViewInit +{ + constructor( + private calendarService: CalendarService, + private elm: ElementRef, + private zone: NgZone + ) {} private slider!: Swiper; - @ViewChild('weekViewSwiper') swiperElement?: ElementRef; + @ViewChild("weekViewSwiper") swiperElement?: ElementRef; - @HostBinding('class.weekview') class = true; + @HostBinding("class.weekview") class = true; @Input() weekviewHeaderTemplate!: TemplateRef; @Input() weekviewAllDayEventTemplate!: TemplateRef; @Input() weekviewNormalEventTemplate!: TemplateRef; - @Input() weekviewAllDayEventSectionTemplate!: TemplateRef; - @Input() weekviewNormalEventSectionTemplate!: TemplateRef; - @Input() weekviewInactiveAllDayEventSectionTemplate!: TemplateRef; - @Input() weekviewInactiveNormalEventSectionTemplate!: TemplateRef; + @Input() + weekviewAllDayEventSectionTemplate!: TemplateRef; + @Input() + weekviewNormalEventSectionTemplate!: TemplateRef; + @Input() + weekviewInactiveAllDayEventSectionTemplate!: TemplateRef; + @Input() + weekviewInactiveNormalEventSectionTemplate!: TemplateRef; @Input() formatWeekTitle?: string; @Input() formatWeekViewDayHeader?: string; @@ -73,7 +81,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, @Input() markDisabled?: (date: Date) => boolean; @Input() locale!: string; @Input() dateFormatter?: IDateFormatter; - @Input() dir = ''; + @Input() dir = ""; @Input() scrollToHour = 0; @Input() preserveScrollPosition?: boolean; @Input() lockSwipeToPrev?: boolean; @@ -94,7 +102,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, public currentViewIndex = 0; public range!: IRange; public direction = 0; - public mode: CalendarMode = 'week'; + public mode: CalendarMode = "week"; private inited = false; private currentDateChangedFromParentSubscription?: Subscription; @@ -109,12 +117,16 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, private formatHourColumnLabel!: (date: Date) => string; private hourRange!: number; - static createDateObjects(startTime: Date, startHour: number, endHour: number, timeInterval: number): IWeekViewRow[][] { + private static createDateObjects( + startTime: Date, + startHour: number, + endHour: number, + timeInterval: number + ): IWeekViewRow[][] { const times: IWeekViewRow[][] = [], currentHour = 0, currentDate = startTime.getDate(); - let hourStep, - minStep; + let hourStep, minStep; if (timeInterval < 1) { hourStep = Math.floor(1 / timeInterval); @@ -133,7 +145,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, time.setDate(currentDate + day); row.push({ events: [], - time + time, }); } times.push(row); @@ -142,7 +154,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, return times; } - static getDates(startTime: Date, n: number): IWeekViewDateRow[] { + private static getDates(startTime: Date, n: number): IWeekViewDateRow[] { const dates = new Array(n), current = new Date(startTime.getTime()); let i = 0; @@ -150,18 +162,25 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, dates[i++] = { date: new Date(current.getTime()), events: [], - dayHeader: '' + dayHeader: "", }; current.setDate(current.getDate() + 1); } return dates; } - private static compareEventByStartOffset(eventA: IDisplayEvent, eventB: IDisplayEvent): number { + private static compareEventByStartOffset( + eventA: IDisplayEvent, + eventB: IDisplayEvent + ): number { return eventA.startOffset - eventB.startOffset; } - private static calculateWidth(orderedEvents: IDisplayEvent[], size: number, hourParts: number) { + private static calculateWidth( + orderedEvents: IDisplayEvent[], + size: number, + hourParts: number + ) { const totalSize = size * hourParts, cells = new Array(totalSize); @@ -172,7 +191,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, for (let i = 0; i < totalSize; i += 1) { cells[i] = { calculated: false, - events: [] + events: [], }; } const len = orderedEvents.length; @@ -187,22 +206,29 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, let i = 0; while (i < len) { - let event:IDisplayEvent|undefined = orderedEvents[i]; + let event: IDisplayEvent | undefined = orderedEvents[i]; if (!event.overlapNumber) { const overlapNumber = event.position + 1; event.overlapNumber = overlapNumber; const eventQueue = [event]; - while (event = eventQueue.shift()) { - let index = event.startIndex * hourParts + event.startOffset; - while (index < event.endIndex * hourParts - event.endOffset) { + while ((event = eventQueue.shift())) { + let index = + event.startIndex * hourParts + event.startOffset; + while ( + index < + event.endIndex * hourParts - event.endOffset + ) { if (!cells[index].calculated) { cells[index].calculated = true; if (cells[index].events) { - const eventCountInCell = cells[index].events.length; + const eventCountInCell = + cells[index].events.length; for (let j = 0; j < eventCountInCell; j += 1) { - const currentEventInCell = cells[index].events[j]; + const currentEventInCell = + cells[index].events[j]; if (!currentEventInCell.overlapNumber) { - currentEventInCell.overlapNumber = overlapNumber; + currentEventInCell.overlapNumber = + overlapNumber; eventQueue.push(currentEventInCell); } } @@ -216,7 +242,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - ngOnInit() { + ngOnInit(): void { if (!this.sliderOptions) { this.sliderOptions = {}; } @@ -231,7 +257,9 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } else { const datePipe = new DatePipe(this.locale); this.formatDayHeader = function (date: Date) { - return datePipe.transform(date, this.formatWeekViewDayHeader)||''; + return ( + datePipe.transform(date, this.formatWeekViewDayHeader) || "" + ); }; } @@ -240,16 +268,17 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } else { const datePipe = new DatePipe(this.locale); this.formatTitle = function (date: Date) { - return datePipe.transform(date, this.formatWeekTitle)||''; + return datePipe.transform(date, this.formatWeekTitle) || ""; }; } if (this.dateFormatter && this.dateFormatter.formatWeekViewHourColumn) { - this.formatHourColumnLabel = this.dateFormatter.formatWeekViewHourColumn; + this.formatHourColumnLabel = + this.dateFormatter.formatWeekViewHourColumn; } else { const datePipe = new DatePipe(this.locale); this.formatHourColumnLabel = function (date: Date) { - return datePipe.transform(date, this.formatHourColumn)||''; + return datePipe.transform(date, this.formatHourColumn) || ""; }; } @@ -257,89 +286,106 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, this.hourColumnLabels = this.getHourColumnLabels(); this.inited = true; - this.currentDateChangedFromParentSubscription = this.calendarService.currentDateChangedFromParent$.subscribe(currentDate => { - this.refreshView(); - }); - - this.eventSourceChangedSubscription = this.calendarService.eventSourceChanged$.subscribe(() => { - this.onDataLoaded(); - }); - - this.slideChangedSubscription = this.calendarService.slideChanged$.subscribe(direction => { - if (direction === 1) { - this.slider.slideNext(); - } else if (direction === -1) { - this.slider.slidePrev(); - } - }); + this.currentDateChangedFromParentSubscription = + this.calendarService.currentDateChangedFromParent$.subscribe(() => { + this.refreshView(); + }); + + this.eventSourceChangedSubscription = + this.calendarService.eventSourceChanged$.subscribe(() => { + this.onDataLoaded(); + }); + + this.slideChangedSubscription = + this.calendarService.slideChanged$.subscribe( + (direction: number) => { + if (direction === 1) { + this.slider.slideNext(); + } else if (direction === -1) { + this.slider.slidePrev(); + } + } + ); - this.slideUpdatedSubscription = this.calendarService.slideUpdated$.subscribe(() => { - this.slider.update(); - }); + this.slideUpdatedSubscription = + this.calendarService.slideUpdated$.subscribe(() => { + this.slider.update(); + }); } - ngAfterViewInit() { - this.slider = new Swiper(this.swiperElement?.nativeElement, this.sliderOptions); + ngAfterViewInit(): void { + this.slider = new Swiper( + this.swiperElement?.nativeElement, + this.sliderOptions + ); let me = this; - this.slider.on('slideNextTransitionEnd', function() { + this.slider.on("slideNextTransitionEnd", function () { me.onSlideChanged(1); }); - this.slider.on('slidePrevTransitionEnd', function() { + this.slider.on("slidePrevTransitionEnd", function () { me.onSlideChanged(-1); }); - if(this.dir === 'rtl') { - this.slider.changeLanguageDirection('rtl'); + if (this.dir === "rtl") { + this.slider.changeLanguageDirection("rtl"); } const title = this.getTitle(); this.onTitleChanged.emit(title); if (this.scrollToHour > 0) { - const hourColumns = this.elm.nativeElement.querySelector('.weekview-normal-event-container').querySelectorAll('.calendar-hour-column'); + const hourColumns = this.elm.nativeElement + .querySelector(".weekview-normal-event-container") + .querySelectorAll(".calendar-hour-column"); const me = this; setTimeout(() => { - me.initScrollPosition = hourColumns[me.scrollToHour - me.startHour].offsetTop; + me.initScrollPosition = + hourColumns[me.scrollToHour - me.startHour].offsetTop; }, 50); } } - ngOnChanges(changes: SimpleChanges) { + ngOnChanges(changes: SimpleChanges): void { if (!this.inited) { return; } - if ((changes['startHour'] || changes['endHour']) && (!changes['startHour'].isFirstChange() || !changes['endHour'].isFirstChange())) { + if ( + (changes["startHour"] || changes["endHour"]) && + (!changes["startHour"].isFirstChange() || + !changes["endHour"].isFirstChange()) + ) { this.views = []; - this.hourRange = (this.endHour - this.startHour) * this.hourSegments; + this.hourRange = + (this.endHour - this.startHour) * this.hourSegments; this.direction = 0; this.refreshView(); this.hourColumnLabels = this.getHourColumnLabels(); } - const eventSourceChange = changes['eventSource']; + const eventSourceChange = changes["eventSource"]; if (eventSourceChange && eventSourceChange.currentValue) { this.onDataLoaded(); } - const lockSwipeToPrev = changes['lockSwipeToPrev']; + const lockSwipeToPrev = changes["lockSwipeToPrev"]; if (lockSwipeToPrev) { this.slider.allowSlidePrev = !lockSwipeToPrev.currentValue; } - const lockSwipeToNext = changes['lockSwipeToNext']; + const lockSwipeToNext = changes["lockSwipeToNext"]; if (lockSwipeToPrev) { this.slider.allowSlideNext = !lockSwipeToNext.currentValue; } - const lockSwipes = changes['lockSwipes']; + const lockSwipes = changes["lockSwipes"]; if (lockSwipes) { this.slider.allowTouchMove = !lockSwipes.currentValue; } } - ngOnDestroy() { + ngOnDestroy(): void { if (this.currentDateChangedFromParentSubscription) { this.currentDateChangedFromParentSubscription.unsubscribe(); this.currentDateChangedFromParentSubscription = undefined; @@ -361,17 +407,20 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - onSlideChanged(direction: number) { + private onSlideChanged(direction: number): void { this.currentViewIndex = (this.currentViewIndex + direction + 3) % 3; this.move(direction); } - move(direction: number) { + public move(direction: number): void { if (direction === 0) { return; } this.direction = direction; - const adjacent = this.calendarService.getAdjacentCalendarDate(this.mode, direction); + const adjacent = this.calendarService.getAdjacentCalendarDate( + this.mode, + direction + ); this.calendarService.setCurrentDate(adjacent); this.refreshView(); this.direction = 0; @@ -379,33 +428,47 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, private getHourColumnLabels(): string[] { const hourColumnLabels: string[] = []; - for (let hour = 0, length = this.views[0].rows.length; hour < length; hour += 1) { + for ( + let hour = 0, length = this.views[0].rows.length; + hour < length; + hour += 1 + ) { // handle edge case for DST - if (hour === 0 && this.views[0].rows[hour][0].time.getHours() !== this.startHour) { + if ( + hour === 0 && + this.views[0].rows[hour][0].time.getHours() !== this.startHour + ) { const time = new Date(this.views[0].rows[hour][0].time); time.setDate(time.getDate() + 1); time.setHours(this.startHour); hourColumnLabels.push(this.formatHourColumnLabel(time)); } else { - hourColumnLabels.push(this.formatHourColumnLabel(this.views[0].rows[hour][0].time)); + hourColumnLabels.push( + this.formatHourColumnLabel(this.views[0].rows[hour][0].time) + ); } } return hourColumnLabels; } - getViewData(startTime: Date): IWeekView { + public getViewData(startTime: Date): IWeekView { const dates = WeekViewComponent.getDates(startTime, 7); for (let i = 0; i < 7; i++) { dates[i].dayHeader = this.formatDayHeader(dates[i].date); } return { - rows: WeekViewComponent.createDateObjects(startTime, this.startHour, this.endHour, this.hourSegments), - dates + rows: WeekViewComponent.createDateObjects( + startTime, + this.startHour, + this.endHour, + this.hourSegments + ), + dates, }; } - getRange(currentDate: Date): IRange { + public getRange(currentDate: Date): IRange { const year = currentDate.getFullYear(), month = currentDate.getMonth(), date = currentDate.getDate(), @@ -417,22 +480,37 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } // set hour to 12 to avoid DST problem - const firstDayOfWeek = new Date(year, month, date - difference, 12, 0, 0), + const firstDayOfWeek = new Date( + year, + month, + date - difference, + 12, + 0, + 0 + ), endTime = new Date(year, month, date - difference + 7, 12, 0, 0); return { startTime: firstDayOfWeek, - endTime + endTime, }; } - onDataLoaded() { + public onDataLoaded(): void { const eventSource = this.eventSource, len = eventSource ? eventSource.length : 0, startTime = this.range.startTime, endTime = this.range.endTime, - utcStartTime = Date.UTC(startTime.getFullYear(), startTime.getMonth(), startTime.getDate()), - utcEndTime = Date.UTC(endTime.getFullYear(), endTime.getMonth(), endTime.getDate()), + utcStartTime = Date.UTC( + startTime.getFullYear(), + startTime.getMonth(), + startTime.getDate() + ), + utcEndTime = Date.UTC( + endTime.getFullYear(), + endTime.getMonth(), + endTime.getDate() + ), currentViewIndex = this.currentViewIndex, rows = this.views[currentViewIndex].rows, dates = this.views[currentViewIndex].dates, @@ -461,18 +539,29 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, const eventStartTime = event.startTime; const eventEndTime = event.endTime; - let eventUTCStartTime: number, - eventUTCEndTime: number; + let eventUTCStartTime: number, eventUTCEndTime: number; if (event.allDay) { eventUTCStartTime = eventStartTime.getTime(); eventUTCEndTime = eventEndTime.getTime(); } else { - eventUTCStartTime = Date.UTC(eventStartTime.getFullYear(), eventStartTime.getMonth(), eventStartTime.getDate()); - eventUTCEndTime = Date.UTC(eventEndTime.getFullYear(), eventEndTime.getMonth(), eventEndTime.getDate() + 1); + eventUTCStartTime = Date.UTC( + eventStartTime.getFullYear(), + eventStartTime.getMonth(), + eventStartTime.getDate() + ); + eventUTCEndTime = Date.UTC( + eventEndTime.getFullYear(), + eventEndTime.getMonth(), + eventEndTime.getDate() + 1 + ); } - if (eventUTCEndTime <= utcStartTime || eventUTCStartTime >= utcEndTime || eventStartTime >= eventEndTime) { + if ( + eventUTCEndTime <= utcStartTime || + eventUTCStartTime >= utcEndTime || + eventStartTime >= eventEndTime + ) { continue; } @@ -483,14 +572,20 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, if (eventUTCStartTime <= utcStartTime) { allDayStartIndex = 0; } else { - allDayStartIndex = Math.round((eventUTCStartTime - utcStartTime) / oneDay); + allDayStartIndex = Math.round( + (eventUTCStartTime - utcStartTime) / oneDay + ); } let allDayEndIndex: number; if (eventUTCEndTime >= utcEndTime) { - allDayEndIndex = Math.round((utcEndTime - utcStartTime) / oneDay); + allDayEndIndex = Math.round( + (utcEndTime - utcStartTime) / oneDay + ); } else { - allDayEndIndex = Math.round((eventUTCEndTime - utcStartTime) / oneDay); + allDayEndIndex = Math.round( + (eventUTCEndTime - utcStartTime) / oneDay + ); } const displayAllDayEvent: IDisplayEvent = { @@ -499,7 +594,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, endIndex: allDayEndIndex, startOffset: 0, endOffset: 0, - position: 0 + position: 0, }; let eventSet = dates[allDayStartIndex].events; @@ -518,14 +613,26 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, if (eventUTCStartTime < utcStartTime) { timeDifferenceStart = 0; } else { - timeDifferenceStart = (eventUTCStartTime - utcStartTime) / oneHour * this.hourSegments + (eventStartTime.getHours() + eventStartTime.getMinutes() / 60) * this.hourSegments; + timeDifferenceStart = + ((eventUTCStartTime - utcStartTime) / oneHour) * + this.hourSegments + + (eventStartTime.getHours() + + eventStartTime.getMinutes() / 60) * + this.hourSegments; } let timeDifferenceEnd: number; if (eventUTCEndTime > utcEndTime) { - timeDifferenceEnd = (utcEndTime - utcStartTime) / oneHour * this.hourSegments; + timeDifferenceEnd = + ((utcEndTime - utcStartTime) / oneHour) * + this.hourSegments; } else { - timeDifferenceEnd = (eventUTCEndTime - oneDay - utcStartTime) / oneHour * this.hourSegments + (eventEndTime.getHours() + eventEndTime.getMinutes() / 60) * this.hourSegments; + timeDifferenceEnd = + ((eventUTCEndTime - oneDay - utcStartTime) / oneHour) * + this.hourSegments + + (eventEndTime.getHours() + + eventEndTime.getMinutes() / 60) * + this.hourSegments; } const startIndex = Math.floor(timeDifferenceStart), @@ -540,7 +647,9 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, if (startRowIndex < rangeStartRowIndex) { startOffset = 0; } else { - startOffset = Math.floor((timeDifferenceStart - startIndex) * this.hourParts); + startOffset = Math.floor( + (timeDifferenceStart - startIndex) * this.hourParts + ); } } @@ -559,7 +668,10 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, if (endRowIndex > rangeEndRowIndex) { endOffset = 0; } else { - endOffset = Math.floor((endIndex - timeDifferenceEnd) * this.hourParts); + endOffset = Math.floor( + (endIndex - timeDifferenceEnd) * + this.hourParts + ); } } } @@ -580,7 +692,7 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, endIndex: endRowIndex, startOffset, endOffset, - position: 0 + position: 0, }; let eventSet = rows[startRowIndex][dayIndex].events; if (eventSet) { @@ -604,8 +716,12 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, let orderedEvents: IDisplayEvent[] = []; for (let hour = 0; hour < this.hourRange; hour += 1) { if (rows[hour][day].events) { - rows[hour][day].events.sort(WeekViewComponent.compareEventByStartOffset); - orderedEvents = orderedEvents.concat(rows[hour][day].events); + rows[hour][day].events.sort( + WeekViewComponent.compareEventByStartOffset + ); + orderedEvents = orderedEvents.concat( + rows[hour][day].events + ); } } if (orderedEvents.length > 0) { @@ -618,7 +734,9 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, let orderedAllDayEvents: IDisplayEvent[] = []; for (let day = 0; day < 7; day += 1) { if (dates[day].events) { - orderedAllDayEvents = orderedAllDayEvents.concat(dates[day].events); + orderedAllDayEvents = orderedAllDayEvents.concat( + dates[day].events + ); } } if (orderedAllDayEvents.length > 0) { @@ -643,14 +761,14 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, this.onTimeSelected.emit({ selectedTime: selectedDate.date, - events: selectedDate.events.map(e => e.event), - disabled + events: selectedDate.events.map((e) => e.event), + disabled, }); } } } - refreshView() { + private refreshView(): void { this.range = this.getRange(this.calendarService.currentDate); if (this.inited) { @@ -658,44 +776,47 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, this.onTitleChanged.emit(title); } this.calendarService.populateAdjacentViews(this); - this.updateCurrentView(this.range.startTime, this.views[this.currentViewIndex]); + this.updateCurrentView( + this.range.startTime, + this.views[this.currentViewIndex] + ); this.calendarService.rangeChanged(this); } - getTitle(): string { + private getTitle(): string { const firstDayOfWeek = new Date(this.range.startTime.getTime()); firstDayOfWeek.setHours(12, 0, 0, 0); return this.formatTitle(firstDayOfWeek); } - getHighlightClass(date: IWeekViewDateRow): string { - let className = ''; + public getHighlightClass(date: IWeekViewDateRow): string { + let className = ""; if (date.hasEvent) { if (className) { - className += ' '; + className += " "; } - className = 'weekview-with-event'; + className = "weekview-with-event"; } if (date.selected) { if (className) { - className += ' '; + className += " "; } - className += 'weekview-selected'; + className += "weekview-selected"; } if (date.current) { if (className) { - className += ' '; + className += " "; } - className += 'weekview-current'; + className += "weekview-current"; } return className; } - select(selectedTime: Date, events: IDisplayEvent[]) { + public select(selectedTime: Date, events: IDisplayEvent[]): void { let disabled = false; if (this.markDisabled) { disabled = this.markDisabled(selectedTime); @@ -703,24 +824,32 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, this.onTimeSelected.emit({ selectedTime, - events: events.map(e => e.event), - disabled + events: events.map((e) => e.event), + disabled, }); } - placeEvents(orderedEvents: IDisplayEvent[]) { + private placeEvents(orderedEvents: IDisplayEvent[]): void { this.calculatePosition(orderedEvents); - WeekViewComponent.calculateWidth(orderedEvents, this.hourRange, this.hourParts); + WeekViewComponent.calculateWidth( + orderedEvents, + this.hourRange, + this.hourParts + ); } - placeAllDayEvents(orderedEvents: IDisplayEvent[]) { + private placeAllDayEvents(orderedEvents: IDisplayEvent[]): void { this.calculatePosition(orderedEvents); } - overlap(event1: IDisplayEvent, event2: IDisplayEvent): boolean { + private overlap(event1: IDisplayEvent, event2: IDisplayEvent): boolean { let earlyEvent = event1, lateEvent = event2; - if (event1.startIndex > event2.startIndex || (event1.startIndex === event2.startIndex && event1.startOffset > event2.startOffset)) { + if ( + event1.startIndex > event2.startIndex || + (event1.startIndex === event2.startIndex && + event1.startOffset > event2.startOffset) + ) { earlyEvent = event2; lateEvent = event1; } @@ -728,11 +857,14 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, if (earlyEvent.endIndex <= lateEvent.startIndex) { return false; } else { - return !(earlyEvent.endIndex - lateEvent.startIndex === 1 && earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts); + return !( + earlyEvent.endIndex - lateEvent.startIndex === 1 && + earlyEvent.endOffset + lateEvent.startOffset >= this.hourParts + ); } } - calculatePosition(events: IDisplayEvent[]) { + private calculatePosition(events: IDisplayEvent[]): void { const len = events.length, isForbidden = new Array(len); let maxColumn = 0; @@ -759,25 +891,56 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - if (this.dir === 'rtl') { + if (this.dir === "rtl") { for (let i = 0; i < len; i += 1) { events[i].position = maxColumn - 1 - events[i].position; } } } - updateCurrentView(currentViewStartDate: Date, view: IWeekView) { + private updateCurrentView( + currentViewStartDate: Date, + view: IWeekView + ): void { const currentCalendarDate = this.calendarService.currentDate, today = new Date(), oneDay = 86400000, - selectedDayDifference = Math.round((Date.UTC(currentCalendarDate.getFullYear(), currentCalendarDate.getMonth(), currentCalendarDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay), - currentDayDifference = Math.floor((Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay); + selectedDayDifference = Math.round( + (Date.UTC( + currentCalendarDate.getFullYear(), + currentCalendarDate.getMonth(), + currentCalendarDate.getDate() + ) - + Date.UTC( + currentViewStartDate.getFullYear(), + currentViewStartDate.getMonth(), + currentViewStartDate.getDate() + )) / + oneDay + ), + currentDayDifference = Math.floor( + (Date.UTC( + today.getFullYear(), + today.getMonth(), + today.getDate() + ) - + Date.UTC( + currentViewStartDate.getFullYear(), + currentViewStartDate.getMonth(), + currentViewStartDate.getDate() + )) / + oneDay + ); for (let r = 0; r < 7; r += 1) { view.dates[r].selected = false; } - if (selectedDayDifference >= 0 && selectedDayDifference < 7 && this.autoSelect) { + if ( + selectedDayDifference >= 0 && + selectedDayDifference < 7 && + this.autoSelect + ) { view.dates[selectedDayDifference].selected = true; } @@ -786,12 +949,24 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, } } - daySelected(viewDate: IWeekViewDateRow) { + public daySelected(viewDate: IWeekViewDateRow): void { const selectedDate = viewDate.date, dates = this.views[this.currentViewIndex].dates, currentViewStartDate = this.range.startTime, oneDay = 86400000, - selectedDayDifference = Math.round((Date.UTC(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate()) - Date.UTC(currentViewStartDate.getFullYear(), currentViewStartDate.getMonth(), currentViewStartDate.getDate())) / oneDay); + selectedDayDifference = Math.round( + (Date.UTC( + selectedDate.getFullYear(), + selectedDate.getMonth(), + selectedDate.getDate() + ) - + Date.UTC( + currentViewStartDate.getFullYear(), + currentViewStartDate.getMonth(), + currentViewStartDate.getDate() + )) / + oneDay + ); this.calendarService.setCurrentDate(selectedDate); @@ -808,10 +983,14 @@ export class WeekViewComponent implements ICalendarComponent, OnInit, OnChanges, disabled = this.markDisabled(selectedDate); } - this.onDayHeaderSelected.emit({selectedTime: selectedDate, events: viewDate.events.map(e => e.event), disabled}); + this.onDayHeaderSelected.emit({ + selectedTime: selectedDate, + events: viewDate.events.map((e) => e.event), + disabled, + }); } - setScrollPosition(scrollPosition: number) { + public setScrollPosition(scrollPosition: number): void { this.initScrollPosition = scrollPosition; } }