import { InternalPageService } from './../../shared/internal-page.service'; import { Component, OnInit, ChangeDetectionStrategy, ViewChild, TemplateRef } from '@angular/core'; import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours } from 'date-fns'; import { Subject } from 'rxjs'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarView } from 'angular-calendar'; const colors: any = { red: { primary: '#ad2121', secondary: '#FAE3E3' }, blue: { primary: '#1e90ff', secondary: '#D1E8FF' }, yellow: { primary: '#e3bc08', secondary: '#FDF1BA' } }; @Component({ selector: 'app-events', templateUrl: './events.component.html', styleUrls: ['./events.component.css'] }) export class EventsComponent implements OnInit { events: CalendarEvent[] = [] ; refresh: Subject = new Subject(); constructor(private modal: NgbModal, private internalService: InternalPageService) { } ngOnInit() { this.loadEvents(); this.refresh.next(); console.log("dddddddd"+new Date()) } loadEvents(): void { this.internalService.getEventNow().subscribe( (responce) => { for(var i =0;i < responce['lectures'].length;i++){ let event: any={}; event['start'] = new Date(responce['lectures'][i].start); event['end'] = new Date(responce['lectures'][i].end); event['title'] = responce['lectures'][i].title; this.events.push(event) } this.dayClicked({ date: new Date(), events: this.events }); }, (error) => { console.log(error); } ); } @ViewChild('modalContent') modalContent: TemplateRef; view: CalendarView = CalendarView.Month; CalendarView = CalendarView; viewDate: Date = new Date(); modalData: { action: string; event: CalendarEvent; }; activeDayIsOpen: boolean = true; dayClicked({ date, events }: { date: Date; events: CalendarEvent[] }): void { console.log(date) if (isSameMonth(date, this.viewDate)) { this.viewDate = date; if ( (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) || events.length === 0 ) { this.activeDayIsOpen = false; } else { this.activeDayIsOpen = true; } } } }