add modal to add events

[HAFCA]

I used some functions in my project and didn't work.I wanna display events(that comes from RestApi) in calendar;can you help me please.

-### Html code

`

Previous Today Next {{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }} Month Week Day <mwl-calendar-month-view (dayClicked)="dayClicked($event.day)" ngSwitchCase="CalendarView.Month" [viewDate]="viewDate" [events]="events"> <mwl-calendar-week-view ngSwitchCase="CalendarView.Week" [viewDate]="viewDate" [events]="events"> <mwl-calendar-day-view *ngSwitchCase="CalendarView.Day" [viewDate]="viewDate" [events]="events"> New interview × Description Date Time Recruter {{rec.key}} Close Save `

• Ts code `import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import { isSameDay , isSameMonth , startOfDay , startOfMonth , startOfYear, format } from 'date-fns'; import {HttpClient, HttpParams} from '@angular/common/http'; import {CalendarView, CalendarEvent } from 'angular-calendar'; import {ActivatedRoute, Router} from '@angular/router'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {InterviewService} from '../../services/interview/interview.service'; import Swal from 'sweetalert2/dist/sweetalert2.js'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {API_URLS} from '../../Config/api.urls.config'; interface Interview { id: number; description: string; date: string; } @component({ selector: 'app-calendar', templateUrl: './calendar.component.html', styleUrls: ['./calendar.component.css'] }) export class CalendarComponent implements OnInit { viewDate: Date = new Date(); view: CalendarView = CalendarView.Month; CalendarView = CalendarView; showModal: boolean = false; activeDayIsOpen: boolean = false; formdata: FormGroup; interviews: any[] = []; stringDateAttr: string = ''; dd: Date = new Date(); recruters: any[] = []; submitted = false; id: string = null; content: any; title: any; events: Observable<CalendarEvent<{ interview: Interview }> []>;

constructor(private formBuilder: FormBuilder, private http: HttpClient, private router: Router, private modalService: NgbModal, private _Activatedroute: ActivatedRoute, private interviewServices: InterviewService) {} ngOnInit() { this.id = this._Activatedroute.snapshot.paramMap.get('id'); this.getRecruters(); this.formdata = this.formBuilder.group({ description: ['', Validators.required], date: ['', Validators.required], time: ['', [Validators.required]], recruter: ['', [Validators.required]] }); this.fetchInterviews(); }

setView(view: CalendarView) { this.view = view; }

dayClicked({date, events}: { date: Date; events: CalendarEvent[] }): void { console.log(date); /alert(date.toLocaleDateString().split('/').reverse().join('-'));/ this.stringDateAttr = date.toLocaleDateString().split('/').join('/'); this.show(); }

get f() { return this.formdata.controls; }

onSubmit(modalService) { this.submitted = true; this.interviewServices.create({ description: this.formdata.value.description, date: this.stringDateAttr, time: this.formdata.value.time }, this.id, this.formdata.value.recruter).subscribe((response) => { this.formdata.reset(); this.submitted = false; Swal.fire({ title: 'Success', icon: 'success' }); this.router.navigate(['interview-list']); }); }

show() { this.showModal = true; }

onClick() { console.log('Submit button was clicked'); }

hide() { this.showModal = false; }

getRecruters() { this.interviewServices.getRecruters() .subscribe((response) => { this.recruters = response.body.map(rec => ({key: rec.firstName + ' ' + rec.lastName, value: rec.id})); }); }

getInterviews() { this.interviewServices.getInterviews() .subscribe((response) => { this.interviews = response.body; }); } fetchInterviews(): void { const getStart: any = { month: startOfMonth, day: startOfDay, year: startOfYear }[this.view]; const params = new HttpParams() .set( 'date', format(getStart(this.viewDate), 'dd/MM/yyyy') ); this.events = this.http.get(API_URLS.INTERVIEW_URL, {params}).pipe( map(({results}: { results: Interview[] }) => { return results.map((interview: Interview) => { return { title: interview.description, start: new Date( interview.date ), allDay: true, meta: { interview, }, }; }); }) ); }

} `

[matts-bot[bot]]

This issue has been closed automatically as it did not follow the issue template, please open a new issue that follows the bug report or feature request template.

If you would like to submit a support issue or get a faster reply, please consider sponsoring me.

Thank you! ✌️