[VUE 3] How to disable eventEditFeature popup, WITHOUT disabling the EventEdit event itself

[developers.capim]

Hi!

I have a custom popup that I want to use on the eventEditFeature. However, it is a Vue Component, not any widget from Bryntum.

What I really need is for nothing to popup on the EventEdit event.

This is working for me right now, but it generates error on console: "TypeError: Cannot destructure property 'startDateField' of 'editor.widgetMap' as it is undefined."

    

    // works but generates error on console
    const useCalendarConfig = () => {
      eventEditFeature: {
        editorConfig: {
          type: null
        } 
      },
    }    

The error that is generated on console happens because I'm not passing anything as the type.

But that's what I wish: just a null editor, but I still need the EventEdit event so I can use the eventElement and eventRecord parameters.

Note: the following does not work, because it fully cancels the EventEdit event.

    

    // does not work, because it fully cancels the EventEdit event
    const useCalendarConfig = () => {
      eventEditFeature: false
    }    

Thanks in advance!

[Animal]

There's a whole section in the docs devoted to doing this: https://bryntum.com/products/calendar/docs/guide/Calendar/customization/replaceeventedit

[developers.capim]

I am returning false when handling beforeEventEdit, however the native popup still shows up.

// Bryntum component

<bryntum-calendar
  ...
  @beforeEventEdit="openEventEditor"
  ...
/>

  
// beforeEventEdit handler
openEventEditor({ eventRecord }) {
  this.eventEditorVisible = true

  this.eventRecord = eventRecord

  return false
},

[Animal]

Is that code running? Can you set a debugger breakpoint there?

[developers.capim]

The code runs, yes. I'm attaching an image to better represent what's happening. Notice that the native popup still shows in the background.

  openEventEditor({ eventRecord }) {
    this.eventEditorVisible = true

this.eventRecord = eventRecord

console.log('before return false')
return false
  },

[mats]

Could please provide a small test case with all your code so we can inspect it?

[developers.capim]

This started happening after update 6.0.0... On 5.6.13 it didn't happen. I have posted another issue here regarding this update and its listeners, it's the same error.

I had to delete all the listeners in my calendarConfig, and only listen to them through the vue component emission.

The same code you are seeing here, used to work on 5.6.13.

[marcio]

Hey,

That's a bug, here's a ticket to track the progress of the fix https://github.com/bryntum/support/issues/9718.

[Animal]

What happens if you bypass all this Vue stuff and get a reference to the real Calendar instance, and use Javascript code which definitely does add an event listener?

Like this in the online Vue example which completely stops event editing from happening. You can try it:

bryntum.query('calendar').on('beforeEventEdit', () => false)

Screenshot 2024-08-01 at 06.41.05.png (817.93 KiB) Viewed 175 times