Angular-Calendar context menu not working how to bring up? - angular7

Question

I am trying to integrate the angular-calendar context menu from here..
https://mattlewis92.github.io/angular-calendar/#/context-menu on of the child module called Calendar integrates it.
after installing all necessary module, the context-menu not working for me.
here is my child module :
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { HttpClientModule } from "#angular/common/http";
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { ContextMenuModule } from 'ngx-contextmenu';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes } from '#angular/router';
import { StoreModule } from '#ngrx/store';
import { EffectsModule } from '#ngrx/effects';
import { reducerCalendar } from "./state/calendar.reducer";
import { EffectsEvents } from "./state/calendar.effects";
import { IboCalendarComponent } from './components/ibo-calendar/ibo-calendar.component';
import { IboCalendarHeaderComponent } from './ibo-calendar-header/ibo-calendar-header.component';
import { CalendarShellComponent } from './containers/calendar-shell/calendar-shell.component';
import { SharedModule } from "./../shared-components/shared.module";
const iboCalenderRoutes: Routes = [
// { path: '', redirectTo:'setupConfig', pathMatch:'full' },
{ path: 'iboCalendar', component: CalendarShellComponent }
];
#NgModule({
declarations: [IboCalendarComponent, IboCalendarHeaderComponent, CalendarShellComponent],
imports: [
CommonModule,
BrowserAnimationsModule,
HttpClientModule,
SharedModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
ContextMenuModule.forRoot({
useBootstrap4: true
}),
RouterModule.forChild(iboCalenderRoutes),
EffectsModule.forFeature([EffectsEvents]),
StoreModule.forFeature('reducerCalendar', reducerCalendar)
],
exports: [ ]
})
export class iboCalendarModule { }
here is the ts file :
import { Component, OnInit, ChangeDetectionStrategy, Input, OnChanges } from '#angular/core';
import { CalendarService } from "./../../services/calendar.service";
import { ModelEvent, EventState } from "./../../models/model.event";
import { CalendarEvent } from 'angular-calendar';
import { Observable, Subject } from 'rxjs';
import { colors } from "./../../utilities/colors";
import { tap } from 'rxjs/operators';
declare var $:any;
#Component({
selector: 'ibo-calendar',
templateUrl: './ibo-calendar.component.html',
styleUrls: ['./ibo-calendar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class IboCalendarComponent implements OnChanges,OnInit {
view: string = 'month';
// viewDate: Date = new Date('August 19, 2018');
viewDate: Date = new Date()
#Input() events:ModelEvent[];
#Input() currentEvent: ModelEvent;
refresh: Subject<any> = new Subject();
constructor() { }
ngOnInit() {
const headerHeight = $('.site-header').outerHeight();
//moving content down to header
$('body').css({paddingTop: headerHeight});
}
ngOnChanges() {
if( this.currentEvent ) {
this.viewDate = new Date(this.currentEvent.start);
}
}
eventClicked({ event }: { event: CalendarEvent }): void {
console.log('Event clicked', event);
}
addEvent(date:Date):void {
console.log('date is', date);
this.events.push({
id : 0,
start : date,
title : 'New Event',
end : new Date(),
allDay : false
})
this.refresh.next();
}
}
here is the template file :
<div class="container-fluid site-content">
<ibo-calendar-header [(view)]="view" [(viewDate)]="viewDate"></ibo-calendar-header>
<context-menu #basicMenu>
<ng-template contextMenuItem (execute)="addEvent($event.item)">
Add event
</ng-template>
</context-menu>
<ng-template
#monthCellTemplate
let-day="day"
let-openDay="openDay"
let-locale="locale"
let-tooltipPlacement="tooltipPlacement"
let-highlightDay="highlightDay"
let-unhighlightDay="unhighlightDay"
let-eventClicked="eventClicked"
>
<div
class="fill-height"
[contextMenu]="basicMenu"
[contextMenuSubject]="day.date"
>
<div class="cal-cell-top">
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
>{{ day.badgeTotal }}</span
>
<span class="cal-day-number"
>{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
>
</div>
<div class="cal-events">
<div
class="cal-event"
*ngFor="let event of day.events"
[style.backgroundColor]="event.color.primary"
[ngClass]="event?.cssClass"
(mouseenter)="highlightDay.emit({event: event})"
(mouseleave)="unhighlightDay.emit({event: event})"
[mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
[tooltipPlacement]="tooltipPlacement"
(click)="$event.stopPropagation(); eventClicked.emit({event: event})"
></div>
</div>
</div>
</ng-template>
<ng-template
#weekHeaderTemplate
let-days="days"
let-locale="locale"
let-dayHeaderClicked="dayHeaderClicked"
>
<div class="cal-day-headers">
<div
class="cal-header"
*ngFor="let day of days"
[class.cal-past]="day.isPast"
[class.cal-today]="day.isToday"
[class.cal-future]="day.isFuture"
[class.cal-weekend]="day.isWeekend"
(click)="dayHeaderClicked.emit({day: day})"
[contextMenu]="basicMenu"
[contextMenuSubject]="day.date"
>
<b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br />
<span
>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span
>
</div>
</div>
</ng-template>
<ng-template #dayHourSegmentTemplate let-segment="segment" let-locale="locale">
<div
class="cal-hour-segment"
[ngClass]="segment.cssClass"
[contextMenu]="basicMenu"
[contextMenuSubject]="segment.date"
>
<div [hidden]="!segment.isStart" class="cal-time">
{{ segment.date | calendarDate:'dayViewHour':locale }}
</div>
</div>
</ng-template>
<div class="alert alert-info">
Click on a day on the view.
<strong *ngIf="clickedDate">You clicked on this day: {{ clickedDate | date:'medium' }}</strong>
</div>
<div>
<div [ngSwitch]="view">
<mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate"
[events]="events" (eventClicked)="eventClicked($event)" (dayClicked)="clickedDate = $event.day.date">
</mwl-calendar-month-view>
<mwl-calendar-week-view *ngSwitchCase="'week'"
[viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)" (dayHeaderClicked)="clickedDate = $event.day.date">
</mwl-calendar-week-view>
<mwl-calendar-day-view *ngSwitchCase="'day'"
[viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)">
</mwl-calendar-day-view>
</div>
</div>
</div>
Getting no errors as well.
any one guide me? thanks in advance.