ContextMenu displaying as hyperlinks

[CharleyGui]

Hello,

I'm using the context menu in a component. I've implemented the behavior from https://mattlewis92.github.io/angular-calendar/#/context-menu

However, in my view, the contextmenu is transparent and the different menuitems are displayed as hyperlinks:

Here is the html: `<context-menu #basicMenu style="pointer-events:all"> <ng-template contextMenuItem (execute)="addEvent($event.item)" > Add event

Delete event

`

<!-- Template Context Menu for each view --> <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="cell-totals"><span *ngFor="let group of day.eventGroups" class="badge badge-{{ group[0] }}">{{ group[1].length }}</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>

[...]

<mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [cellTemplate]="monthCellTemplate" (dayClicked)="viewDate = $event.day.date; view = 'day'" (beforeViewRender)="beforeMonthViewRender($event)"> </mwl-calendar-month-view>

And here is my ts file: addEvent(date: Date): void { this.events.push({ start: date, title: 'New event', color: colors.red }); this.refresh.next(); }

Thanks for the help!

Charley

[isaacplmann]

I think you’re missing the css for the context menu. On Jun 12, 2019, 9:54 AM -0400, CharleyGui notifications@github.com, wrote:

Hello, I'm using the context menu in a component. I've implemented the behavior from https://mattlewis92.github.io/angular-calendar/#/context-menu However, in my view, the contextmenu is transparent and the different menuitems are displayed as hyperlinks: Here is the html: `<context-menu #basicMenu style="pointer-events:all"> <ng-template contextMenuItem (execute)="addEvent($event.item)" > Add event

Delete event

<ng-template

monthCellTemplate

let-day="day" let-openDay="openDay" let-locale="locale" let-tooltipPlacement="tooltipPlacement" let-highlightDay="highlightDay" let-unhighlightDay="unhighlightDay" let-eventClicked="eventClicked" {{ day.badgeTotal }} {{ day.date | calendarDate:'monthViewDayNumber':locale }} {{ group[1].length }} [...] <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" [events]="events" [refresh]="refresh" [cellTemplate]="monthCellTemplate" (dayClicked)="viewDate = $event.day.date; view = 'day'" (beforeViewRender)="beforeMonthViewRender($event)" ` And here is my ts file: addEvent(date: Date): void { this.events.push({ start: date, title: 'New event', color: colors.red }); this.refresh.next(); } Thanks for the help! Charley — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[george-sarji]

I'm having the same issue. Even copied the Stackblitz demo code and tried it out with no luck whatsoever. Any fix for this?

EDIT: Found the fix for this. Seems like this is dependent on Bootstrap 3. You need to link Bootstrap 3 for the menu to actually work, linking it fixed the menu for me. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

[CharleyGui]

Hey @george-sarji ,

Can you elaborate on 'you need to link Boostrap 3 for the menu to actually work'? Just adding the link for the stylesheet in the style.css is enough? Where did you put the link?

Charley

[isaacplmann]

@CharleyGui you can put that link tag in your index.html file.

[george-sarji]

Hey @george-sarji ,

Can you elaborate on 'you need to link Boostrap 3 for the menu to actually work'? Just adding the link for the stylesheet in the style.css is enough? Where did you put the link?

Charley

I placed it inside the HTML file for the component I was working on, at the top of it. You can put the link in any parent component of the component you are working on though, that should work fine. I believe you can also put the link in the style sheets as well, that should also work properly.

[CharleyGui]

@george-sarji & @isaacplmann Thank you both for your answers! It works like a charm! Really love it.

Thanks again :)