ContextMenu creation on jQuery fullCalendar

[Gopikrishn]

Hi,

I used jQuery fullCalendar in my Angular 6 application,

I want to create a context menu on right clicking anywhere in the calendar.

<context-menu> <ng-template contextMenuItem> Function1 </ng-template> <ng-template contextMenuItem > Function2 </ng-template> </context-menu>

<div [contextMenu]="basicMenu"> <div id = 'caldiv' fullCalendar [attr.config]="config" class="basic-full-calendar fc fc-unthemed fc-ltr" [contextMenu]="basicMenu"></div> </div>

[isaacplmann]

I'm not sure what jQuery fullCalendar does in the DOM. If the calendar is not actually rendered inside that <div id="caldiv">, then the context menu event won't be picked up. Check out https://github.com/mattlewis92/angular-calendar - I've used that library before and really like it. There's even an example that uses ngx-contextmenu.

[Gopikrishn]

Hi @isaacplmann Thanks for the reply, In my calendar application I have all most 10 to 20 events per day, So I can't use this angular-calendar. So I am using "ng-fullcalendar": "^1.6.1",

Where I want a context menu with 3 buttons on right clicking anywhere in the calendar.

Thank You

[isaacplmann]

https://stackblitz.com/edit/ng-fullcalendar-demo-k57fif?file=app%2Fapp.component.html

Here's a sample with the context menu working with ng-fullcalendar. The context menu needs to be styled, but it is functioning correctly.

[Gopikrishn]

Thanks @isaacplmann.

It working fine, but it's throwing some Type errors

ContextMenuContentComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this._origin.getBoundingClientRect is not a function at FlexibleConnectedPositionStrategy.push../node_modules/@angular/cdk/esm5/overlay.es5.js.FlexibleConnectedPositionStrategy.apply (overlay.es5.js:1567) at ConnectedPositionStrategy.push../node_modules/@angular/cdk/esm5/overlay.es5.js.ConnectedPositionStrategy.apply (overlay.es5.js:2767) at OverlayRef.push../node_modules/@angular/cdk/esm5/overlay.es5.js.OverlayRef.updatePosition (overlay.es5.js:1150) at ContextMenuContentComponent.push../node_modules/ngx-contextmenu/lib/contextMenuContent.component.js.ContextMenuContentComponent.ngAfterViewInit (contextMenuContent.component.js:51) at callProviderLifecycles (core.js:9568) at callElementProvidersLifecycles (core.js:9542) at callLifecycleHooksChildrenFirst (core.js:9532) at checkAndUpdateView (core.js:10468) at callWithDebugContext (core.js:11352) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:11030) View_ContextMenuContentComponent_Host_0 @ ContextMenuContentComponent_Host.ngfactory.js? [sm]:1 proxyClass @ compiler.js:10168 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11314 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1717 (anonymous) @ core.js:4589 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3784 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4589 (anonymous) @ core.js:4474 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3825 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3739 next @ core.js:4474 schedulerFn @ core.js:3556 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3540 checkStable @ core.js:3794 onLeave @ core.js:3861 onInvokeTask @ core.js:3819 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566 ContextMenuContentComponentHost.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}} View_ContextMenuContentComponent_Host_0 @ ContextMenuContentComponent_Host.ngfactory.js? [sm]:1 proxyClass @ compiler.js:10168 push../nodemodules/@angular/core/fesm5/core.js.DebugContext.logError @ core.js:11314 push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1722 (anonymous) @ core.js:4589 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3784 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4589 (anonymous) @ core.js:4474 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3825 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3739 next @ core.js:4474 schedulerFn @ core.js:3556 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3540 checkStable @ core.js:3794 onLeave @ core.js:3861 onInvokeTask @ core.js:3819 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566 zone.js:192 Uncaught TypeError: this._origin.getBoundingClientRect is not a function at FlexibleConnectedPositionStrategy.push../node_modules/@angular/cdk/esm5/overlay.es5.js.FlexibleConnectedPositionStrategy.apply (overlay.es5.js:1567) at ConnectedPositionStrategy.push../node_modules/@angular/cdk/esm5/overlay.es5.js.ConnectedPositionStrategy.apply (overlay.es5.js:2767) at OverlayRef.push../node_modules/@angular/cdk/esm5/overlay.es5.js.OverlayRef.updatePosition (overlay.es5.js:1150) at SafeSubscriber._next (overlay.es5.js:980) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub (Subscriber.js:195) at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:133) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77) at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next (take.js:40) at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) push../node_modules/@angular/cdk/esm5/overlay.es5.js.FlexibleConnectedPositionStrategy.apply @ overlay.es5.js:1567 push../node_modules/@angular/cdk/esm5/overlay.es5.js.ConnectedPositionStrategy.apply @ overlay.es5.js:2767 push../node_modules/@angular/cdk/esm5/overlay.es5.js.OverlayRef.updatePosition @ overlay.es5.js:1150 (anonymous) @ overlay.es5.js:980 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next @ take.js:40 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 schedulerFn @ core.js:3556 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3540 (anonymous) @ core.js:3800 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3784 checkStable @ core.js:3800 onLeave @ core.js:3861 onInvokeTask @ core.js:3819 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566 setTimeout (async) scheduleTask @ zone.js:2075 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255 scheduleMacroTaskWithCurrentZone @ zone.js:1114 (anonymous) @ zone.js:2090 proto.(anonymous function) @ zone.js:1394 hostReportError @ hostReportError.js:3 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:203 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next @ take.js:40 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 schedulerFn @ core.js:3556 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3540 (anonymous) @ core.js:3800 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3784 checkStable @ core.js:3800 onLeave @ core.js:3861 onInvokeTask @ core.js:3819 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566

[Gopikrishn]

Fixed these errors by running npm install ngx-contextmenu@5.0.1 --save

Thanks @isaacplmann

[Gopikrishn]

Hi @isaacplmann

I struck to access element ( calendar event ) values on right clicking.

 this.contextMenuService.show.next({
      contextMenu: contextMenuFor,
      event: mouseEvent,
      item: {},
    });

Is there any way that I can access my item that is right clicked on this context menu.

Thank You

Regards

Gopikrishn