kfmc_website/src/app/External-Page/external-events/external-events.component.ts

import { CustomDateFormatter } from './custom-date-formatter.provider';
import { AuthServiceService } from './../../shared/auth-service.service';
import { HttpClient } from '@angular/common/http';
import {CalendarDateFormatter } from 'angular-calendar';

import { Component, OnInit,
  ChangeDetectionStrategy,
  ViewChild,
  TemplateRef, 
  Input} from '@angular/core';
  import { NgxSpinnerService } from 'ngx-spinner';


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';
import { Router, NavigationExtras } from '@angular/router';
const colors: any = {
  red: {
    primary: '#ad2121',
    secondary: '#FAE3E3'
  },
  blue: {
    primary: '#1e90ff',
    secondary: '#D1E8FF'
  },
  yellow: {
    primary: '#e3bc08',
    secondary: '#FDF1BA'
  }
};

@Component({
  selector: 'app-external-events',
  templateUrl: './external-events.component.html',
  styleUrls: ['./external-events.component.css'],
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter
    }]
})

export class ExternalEventsComponent implements OnInit {

  events: CalendarEvent[] = [];
  refresh: Subject<any> = new Subject();
  dataLecture: any;
  showDetailsEvent:boolean = false;

  constructor(private modal: NgbModal, 
    private http: HttpClient,
    private router: Router,
    private authSer: AuthServiceService,
    private spinner:NgxSpinnerService) {}


  ngOnInit() {
    //this.spinner.show();
    
    this.loadEvents();
    this.refresh.next();
    console.log('hfdfdsjkfhdsjkfhdkjfhsdkjfhskjfhsfkjfhkj',this.dataLecture);
    console.log("dddddddd"+new Date())
  }

  loadEvents(): void {
    this.http.get(this.authSer.pathApi + '/event_calendars_list').subscribe(
      (responce) => {
        this.dataLecture = responce['event_calendars'];
          for(let i=0; i< this.dataLecture.length; i++) {
          let event: any={};
          event['start'] = new Date(this.dataLecture[i].event_time);
          event['title'] = this.dataLecture[i].title;
          event['description'] = this.dataLecture[i].description;
          event['description_en'] = this.dataLecture[i].description_en;
          this.events.push(event);
        }
        console.log('eveeeeeeeeeeeeeeeeeeeeeeeeeeents', this.events);
          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;
        }
      }
    }


    handleEvent(ssss,event) {
      this.showDetailsEvent = true;
      console.log(ssss , event);
      this.dataLecture = event;
      localStorage.setItem('eventData', JSON.stringify(this.dataLecture));
      this.router.navigate(['ExternalPage/eventsDetails']);
    }

    closeDetailEvent() {
      this.showDetailsEvent = false;
    }

  
}