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