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