How to call another vue component from eventContextMenu

[doonamis]

Hello,
I've added a new item to the eventContextMenu, I want it to open another component in the same vue app, how can I access to it?

Currently I have a schedulerConfig.js with all the configuration and inside features->eventContextMenu->Items i have this one:

booking: {
          text: 'Booking editor',
          icon: 'b-fa b-fa-book',
          weight: 200,
          onItem: (data) => {
            //console.log(data)
            //this.$emit('openBookingEditor')
          }
}

This works but I don't know how to access another vue component from this function

Thanks!

[johan.isaksson]

Hi,

The problem with adding the listener like that is that it will live in the scope of the "schedulerConfig.js" file, making it hard to reach other parts of your application. I would instead define a listener for `eventcontextmenuitem` on <scheduler> and have easier access to other vue components the normal way.

<scheduler
  // The rest of your configs
  // ...
  
  @eventcontextmenuitem = "onEventContextMenuItem"
>

In `onEventContextMenu` I would check the `item` argument to determine if it is the "Booking editor":

onEventContextMenu({ item }) {
  if (item.ref === 'bookingEditor') {
    // Since this code runs in your Vue app and not a config file, it should be much easier to reach what you need
  }
}

[doonamis]

Hello Johan,

Thanks, I've tried as you say but it doesn't seem to work, I've checked the scheduler.vue component as I see

listeners : {
                    catchAll(event) {
                        // Uncomment this line to log events being emitted to console
                        console.log('Scheduler emit', event.type);
                        this.$emit(event.type, event);
                    },

                    thisObj : this
                },

The console log is never fired

In the component I've tried both

   @eventContextMenuItem="onEventContextMenuItem"
      @eventcontextmenuitem = "onEventContextMenuItem"

With no luck, thanks!

[doonamis]

Hello, anyone having same issue I've fixed it with this on the component mounted method:

const scheduler = this.$refs.scheduler.schedulerEngine;
scheduler.on('eventContextMenuItem', ({ item, eventRecord }) => {
        console.log('eventContextMenuItem', item, eventRecord)
      })

[saki]

Another solution, probably cleaner, would be:

In App.vue:

@openbookingeditor = "onOpenBookingEditor"

methods : {
    onOpenBookingEditor : event => {
        console.log('onOpenBookingEditor', event);
    }
}

In schedulerConfig.js:

eventContextMenuFeature : {
    items : {
        booking: {
            text: 'Booking editor',
            icon: 'b-fa b-fa-book',
            weight: 200,
            onItem: ({source}) => {
                source.trigger('openbookingeditor')
            }
        }
    }
}

No other changes or additions, just the above. I've tested it and it worked for me.