import { Component , ElementRef , Input , Output , EventEmitter , AfterViewInit , OnChanges , SimpleChanges , OnInit } from '@angular/core' ; import * as Calendar from 'tui-calendar' ; import { TuiCalendarOptions , TuiCalendarDefaults } from './ngx-tui-calendar-defaults.service' ; import { AfterRenderScheduleEvent , BeforeCreateScheduleEvent , BeforeDeleteScheduleEvent , BeforeUpdateScheduleEvent , ClickDaynameEvent , ClickScheduleEvent } from './Models/Events' ; import { Schedule } from './Models/Schedule' ; @ Component ( { selector : 'ngx-tui-calendar' , template : '' } ) export class NgxTuiCalendarComponent implements OnChanges , TuiCalendarOptions { @ Input ( ) defaultView : string ; @ Input ( ) taskView : boolean ; @ Input ( ) scheduleView : boolean ; @ Input ( ) template : object ; @ Input ( ) month : object ; @ Input ( ) week : object ; @ Input ( ) schedules : Schedule [ ] ; @ Output ( ) beforeCreateSchedule : EventEmitter < BeforeCreateScheduleEvent > = new EventEmitter ( ) ; @ Output ( ) beforeDeleteSchedule : EventEmitter < BeforeDeleteScheduleEvent > = new EventEmitter ( ) ; @ Output ( ) afterRenderSchedule : EventEmitter < AfterRenderScheduleEvent > = new EventEmitter ( ) ; @ Output ( ) tuiCalendarCreated : EventEmitter < { tuiCalendar : any ; } > = new EventEmitter ( ) ; @ Output ( ) dayNameClicked : EventEmitter < ClickDaynameEvent > = new EventEmitter ( ) ; @ Output ( ) timeClicked : EventEmitter < Date > = new EventEmitter ( ) ; @ Output ( ) scheduleClicked : EventEmitter < ClickScheduleEvent > = new EventEmitter ( ) ; @ Output ( ) beforeUpdateSchedule : EventEmitter < BeforeUpdateScheduleEvent > = new EventEmitter ( ) ; private tuiCalendar : any ; constructor ( private elm , private defaults ) { const options = { defaultView : this . defaultView , taskView : this . taskView , scheduleView : this . scheduleView , template : this . template , month : this . month , week : this . week } ; Object . keys ( this . defaults ) . forEach ( optionKey => { if ( typeof options [ optionKey ] === 'undefined' ) { options [ optionKey ] = this . defaults [ optionKey ] ; } } ) ; Object . keys ( options ) . forEach ( optionKey => { if ( typeof options [ optionKey ] === 'undefined' ) { delete options [ optionKey ] ; } } ) ; this . tuiCalendar = new Calendar ( this . elm . nativeElement , options ) ; this . tuiCalendarCreated . emit ( { tuiCalendar : this . tuiCalendar } ) ; this . tuiCalendar . on ( 'beforeCreateSchedule' , ( event ) => { if ( event . triggerEventName === 'mouseup' ) { this . timeClicked . emit ( < Date > event . start ) ; } } ) ; this . tuiCalendar . on ( 'afterRenderSchedule' , ( event ) => { this . afterRenderSchedule . emit ( event ) ; } ) ; this . tuiCalendar . on ( 'beforeCreateSchedule' , ( event ) => { this . beforeCreateSchedule . emit ( event ) ; } ) ; this . tuiCalendar . on ( 'beforeDeleteSchedule' , ( event ) => { this . beforeDeleteSchedule . emit ( event ) ; } ) ; this . tuiCalendar . on ( 'beforeUpdateSchedule' , ( event ) => { this . beforeUpdateSchedule . emit ( event ) ; } ) ; this . tuiCalendar . on ( 'clickDayname' , ( event ) => { this . dayNameClicked . emit ( event ) ; } ) ; this . tuiCalendar . on ( 'clickSchedule' , ( event ) => { this . scheduleClicked . emit ( event ) ; } ) ; } ngOnChanges ( changes ) { if ( changes [ "schedules" ] !== undefined ) { this . updateSchedules ( ) ; } } private updateSchedules ( ) { this . tuiCalendar . clear ( ) ; this . tuiCalendar . createSchedules ( this . schedules , true ) ; this . tuiCalendar . render ( ) ; } public setTimeZoneOffset ( offset ) { this . tuiCalendar . setTimeZoneOffset ( offset ) ; } public setTimeZoneOffsetCallback ( offset ) { this . tuiCalendar . setTimeZoneOffset ( offset ) ; } public changeView ( view ) { this . tuiCalendar . changeView ( view ) ; } public clear ( ) { this . tuiCalendar . clear ( ) ; } public createSchedules ( schedules ) { this . tuiCalendar . createSchedules ( schedules ) ; } public deleteSchedule ( scheduleId , calendarId , silent ) { this . tuiCalendar . deleteSchedule ( scheduleId , calendarId , silent ) ; } public destroy ( ) { this . tuiCalendar . destroy ( ) ; } public getDate ( ) { this . tuiCalendar . getDate ( ) ; } public getDateRangeEnd ( ) { this . tuiCalendar . getDateRangeEnd ( ) ; } public getDateRangeStart ( ) { this . tuiCalendar . getDateRangeStart ( ) ; } public getElement ( scheduleId , calendarId ) { this . tuiCalendar . getElement ( scheduleId , calendarId ) ; } public getOptions ( ) { < TuiCalendarOptions > this . tuiCalendar . getOptions ( ) ; } public getSchedule ( scheduleId , calendarId ) { this . tuiCalendar . getSchedule ( scheduleId , calendarId ) ; } public getViewName ( ) { this . tuiCalendar . getViewName ( ) ; } public hideMoreView ( ) { this . tuiCalendar . hideMoreView ( ) ; } public next ( ) { this . tuiCalendar . next ( ) ; } public prev ( ) { this . tuiCalendar . prev ( ) ; } public openCreationPopup ( schedule ) { this . tuiCalendar . openCreationPopup ( schedule ) ; } public render ( ) { this . tuiCalendar . render ( ) ; } public scrollToNow ( ) { this . tuiCalendar . scrollToNow ( ) ; } public setCalendarColor ( calendarId , option , silent ) { this . tuiCalendar . setCalendarColor ( calendarId , option , silent ) ; } public setCalendars ( calendars ) { this . tuiCalendar . setCalendars ( calendars ) ; } public setDate ( date ) { this . tuiCalendar . setDate ( date ) ; } public setOptions ( options , silent ) { this . tuiCalendar . setOptions ( options , silent ) ; } public setTheme ( theme ) { this . tuiCalendar . setTheme ( theme ) ; } public today ( ) { this . tuiCalendar . today ( ) ; } public toggleSchedules ( calendarId , toHide , render ) { this . tuiCalendar . toggleSchedules ( calendarId , toHide , render ) ; } public updateSchedule ( scheduleId , calendarId , scheduleData , silent ) { this . tuiCalendar . updateSchedule ( scheduleId , calendarId , scheduleData , silent ) ; } }