[VUE 3] Trigger event from Bryntum to Vue3 component

[gustavo.rosendo]

Hello,

Is there a way to trigger an event from the CalendarConfig.js to the Calendar wrapper component?

Currently, in our Vue3 web-app, we have a view for the Calendar that imports the BryntumCalendar component and places it in our template. This is the (simplified) code in our view for the Calendar:

<template>
  <bryntum-calendar
    ref="calendar"
    v-loading="isLoading"
    v-bind="calendarConfig"
    :events="events"
    :resources="resources"
    :onAfterEventSave="this.reloadEvents"
    :onOpenMyCustomDialog="this.openMyCustomDialog"
  />

  <my-custom-dialog
    :dialogVisible="myCustomDialogVisible"
  />
</template>

<script>
import { ref, reactive } from 'vue'

import { BryntumCalendar } from '@bryntum/calendar-vue-3'
import MyCustomDialog from '@/components/MyCustomDialog.vue'

import { useCalendarConfig } from '@/calendar/CalendarConfig'

import { useCalendarStore } from '@/stores/CalendarStore'

export default {
  name: 'CalendarView',
  components: {
    BryntumCalendar,
    MyCustomDialog
  },

  setup () {
    const calendar = ref(null)
    const calendarConfig = reactive(useCalendarConfig())

const calendarStore = useCalendarStore()

const events = ref(calendarStore.getEvents)
const resources = ref(calendarStore.getResources)

return {
  calendarStore,
  calendar,
  calendarConfig,
  events,
  resources
}
  },
  data () {
    return {
      myCustomDialogVisible: false
    }
  },
  methods: {
    openMyCustomDialog () {
      this.myCustomDialogVisible = true
    }
  }
}
</script>

What I would like to do is:

• when a button added in CalendarConfig.js is clicked, trigger the "onOpenMyCustomDialog" event so that MyCustomDialog component is shown in Vue.js.

Any help is really appreciated.

Thanks a lot and best regards,
Gustavo

[marcio]

Hey Gustavo,

Could you please share how are you setting up the button inside calendarConfig? As far as I understood, you can call the function inside the onClick function in the button configuration. You can see that in the documentation here https://bryntum.com/products/calendar/docs/api/Core/widget/Button