[VUE 3] Event renderer as vue component

[lauraricher]

I am struggling to get the eventRenderer to render a custom vue component. Ive followed the documentation and specified the eventRenderer as vue being true & globally registered my component.

The components seem to have successfully globally registered as I can render them on any page without importing them.

Just wondering what I might have missed?

Ive attached some images to show what Im currently trying/

[alex.l]

Hi!

Did you see our demo that implemented this approach? https://bryntum.com/products/grid/examples/frameworks/vue/javascript/vue-renderer/dist/

Please provide runnable code, we will be glad to help with this problem!

[lauraricher]

Hi, heres a quick repo I set up that attempts to use vue components as the event renderer

https://github.com/laura-richer/bryntum-test/tree/main

I followed this documentation https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide#using-vue-component-in-widgets-and-tooltips

Which looks the same as the above example provided.

Thanks, Laura

[tasnim]

Hey,

Returning Vue component from the eventRenderer is not supported. I've opened a feature request ticket for it here https://github.com/bryntum/support/issues/11339

For now, you could use this as a workaround

      eventRenderer({ eventRecord }) {
        return new Widget({
          html : {
            vue: true, // Required flag
            is: 'CalendarViewEvent', // must be registered
            bind: { eventRecord },
          }
        }).html;
      }

[lauraricher]

Ahh ok thank you. Interestingly, when we were exploring the calendar demo, we did get this feature working but using Nuxt rather than Vue so we know it must work somehow. Its quite an important feature for us, mostly for the day and week views so we are keen to get something working even if it is a workaround like you have suggested above.

Ive updated the repo with the code you supplied, however the custom component still doesnt show in the calendar view.
https://github.com/laura-richer/bryntum-test/commit/a148d679901f0bbf0e35f7bd3330d6a2d52ed6b3

It does however render the console logs that are inside the custom components so something is happening...

[tasnim]

Unfortunately, we don't know of any other workaround. If you want a specific look, we can help you with CSS!