import { Component , OnInit , Inject , LOCALE_ID , HostListener , ViewChild } from '@angular/core' ; import { Subject } from 'rxjs' ; import { endOfDay , addMonths } from 'date-fns' ; import { DAYS_IN_WEEK , SchedulerViewDay , SchedulerViewHour , SchedulerViewHourSegment , CalendarSchedulerEvent , CalendarSchedulerEventAction , startOfPeriod , endOfPeriod , addPeriod , subPeriod , SchedulerDateFormatter , SchedulerEventTimesChangedEvent , CalendarSchedulerViewComponent } from 'angular-calendar-scheduler' ; import { CalendarView , CalendarDateFormatter , DateAdapter } from 'angular-calendar' ; import { AppService } from './services/app.service' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] , providers : [ { provide : CalendarDateFormatter , useClass : SchedulerDateFormatter } ] } ) export class AppComponent implements OnInit { title : string = 'Angular Calendar Scheduler Demo' ; CalendarView = CalendarView ; view : CalendarView = CalendarView . Week ; viewDate : Date = new Date ( ) ; viewDays : number = 3 ; refresh : Subject < any > = new Subject ( ) ; locale : string = 'en' ; hourSegments : number = 4 ; weekStartsOn : number = 1 ; startsWithToday : boolean = true ; activeDayIsOpen : boolean = true ; excludeDays : number [ ] = [ ] ; dayStartHour : number = 6 ; dayEndHour : number = 22 ; minDate : Date = new Date ( ) ; maxDate : Date = endOfDay ( addMonths ( new Date ( ) , 1 ) ) ; dayModifier : Function ; hourModifier : Function ; segmentModifier : Function ; eventModifier : Function ; prevBtnDisabled : boolean = false ; nextBtnDisabled : boolean = false ; actions : CalendarSchedulerEventAction [ ] = [ { when : 'enabled' , label : '<span class="valign-center"><i class="material-icons md-18 md-red-500">cancel</i></span>' , title : 'Delete' , onClick : ( event ) : void => { console . log ( 'Pressed action \'Delete\' on event ' + event . id ) ; } } , { when : 'cancelled' , label : '<span class="valign-center"><i class="material-icons md-18 md-red-500">autorenew</i></span>' , title : 'Restore' , onClick : ( event ) : void => { console . log ( 'Pressed action \'Restore\' on event ' + event . id ) ; } } ] ; events : CalendarSchedulerEvent [ ] ; @ ViewChild ( CalendarSchedulerViewComponent ) calendarScheduler : CalendarSchedulerViewComponent ; constructor ( @ Inject ( LOCALE_ID ) locale , private appService , private dateAdapter ) { this . locale = locale ; this . segmentModifier = ( ( segment ) : void => { segment . isDisabled = ! this . isDateValid ( segment . date ) ; } ) . bind ( this ) ; this . eventModifier = ( ( event ) : void => { event . isDisabled = ! this . isDateValid ( event . start ) ; } ) . bind ( this ) ; this . dateOrViewChanged ( ) ; } ngOnInit ( ) { this . appService . getEvents ( this . actions ) . then ( ( events ) => this . events = events ) ; } viewDaysOptionChanged ( viewDays ) { console . log ( 'viewDaysOptionChanged' , viewDays ) ; this . calendarScheduler . setViewDays ( viewDays ) ; } changeDate ( date ) { console . log ( 'changeDate' , date ) ; this . viewDate = date ; this . dateOrViewChanged ( ) ; } changeView ( view ) { console . log ( 'changeView' , view ) ; this . view = view ; this . dateOrViewChanged ( ) ; } dateOrViewChanged ( ) { if ( this . startsWithToday ) { this . prevBtnDisabled = ! this . isDateValid ( subPeriod ( this . dateAdapter , CalendarView . Day , this . viewDate , 1 ) ) ; this . nextBtnDisabled = ! this . isDateValid ( addPeriod ( this . dateAdapter , CalendarView . Day , this . viewDate , 1 ) ) ; } else { this . prevBtnDisabled = ! this . isDateValid ( endOfPeriod ( this . dateAdapter , CalendarView . Day , subPeriod ( this . dateAdapter , CalendarView . Day , this . viewDate , 1 ) ) ) ; this . nextBtnDisabled = ! this . isDateValid ( startOfPeriod ( this . dateAdapter , CalendarView . Day , addPeriod ( this . dateAdapter , CalendarView . Day , this . viewDate , 1 ) ) ) ; } if ( this . viewDate < this . minDate ) { this . changeDate ( this . minDate ) ; } else if ( this . viewDate > this . maxDate ) { this . changeDate ( this . maxDate ) ; } } private isDateValid ( date ) { return date >= this . minDate && date <= this . maxDate ; } viewDaysChanged ( viewDays ) { console . log ( 'viewDaysChanged' , viewDays ) ; this . viewDays = viewDays ; } dayHeaderClicked ( day ) { console . log ( 'dayHeaderClicked Day' , day ) ; } hourClicked ( hour ) { console . log ( 'hourClicked Hour' , hour ) ; } segmentClicked ( action , segment ) { console . log ( 'segmentClicked Action' , action ) ; console . log ( 'segmentClicked Segment' , segment ) ; } eventClicked ( action , event ) { console . log ( 'eventClicked Action' , action ) ; console . log ( 'eventClicked Event' , event ) ; } eventTimesChanged ( { event , newStart , newEnd , type } ) { console . log ( 'eventTimesChanged Type' , type ) ; console . log ( 'eventTimesChanged Event' , event ) ; console . log ( 'eventTimesChanged New Times' , newStart , newEnd ) ; const ev = this . events . find ( e => e . id === event . id ) ; ev . start = newStart ; ev . end = newEnd ; this . refresh . next ( ) ; } }