kfmc_website/src/app/Internal-Page/events/events.component.ts

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<any> = 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<any>;

    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;
        }
      }
    }

  




}