Call Laravel Nova Action in Fullcalendar.js

I have created a custom card which includes Fullcalendar.js and all is working well so far but I am struggling to understand how trigger an action modal from the select: function within fullcalendar.

I am trying to open a modal on click to add/edit/delete an event, any hints, guidnace or examples would be very much appreciated.

Update i am trying the following code within my custom card but getting the error - TypeError: Cannot read properties of undefined (reading '$on')

code

    import { Calendar } from '@fullcalendar/core';
    import dayGridPlugin from '@fullcalendar/daygrid';
    import interactionPlugin from '@fullcalendar/interaction';
    import timeGridPlugin from '@fullcalendar/timegrid';

    import $ from 'jquery'; // Import jQuery

    export default {
        data() {
            return {
                modalData: "Data to display in the modal",

                timeZone: 'UTC',
                locale: 'en',
                initialView: 'dayGridMonth',
                displayEventTime: true,
                showNonCurrentDates: true,
                businessHours: [],
                isLoading: false,
            };
        },
		mounted() {
            //console.log('Card: Mounted method executed!');

            // Listen for the event to show the action modal
            window.EventBus.$on('CalendarSlotModal', this.showActionModal);

            this.initializeCalendar();
        },
        methods: {
		initializeCalendar(){
			select: function (event) {
				//console.log('Event:', event);

				// Emit an event to show the action modal
				window.EventBus.$emit('CalendarSlotModal', event);

			},
			calendar.render();
		},
		showActionModal(event) {
                // Open the action modal with the provided event data
                this.$modal.show('CalendarSlotModal', {
                    event: event
                });
            }
        },
	};
</script>```