Fullcalendar dateclick and eventclick events are not firing

Question

I have configured fullcalendar in vuejs I have a problem using fullcalendar events. When I try to fire these events dateClick and eventClick It gives me following warning on console:

Event "dateclick" is emitted in component but the handler is registered for "dateClick". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "date-click" instead of "dateClick".

Ive tried switching to date-click as well but no luck.

My Html

    <script src="~/Scripts/vue/vue.js"></script>
    <link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
    <script src="https://unpkg.com/@fullcalendar/[email protected]/main.umd.js"></script>

    <div id="app-el">
                    <full-calendar class="app-calendar"
                           default-view="dayGridMonth"
                           ref="fullCalendar"
                           :header="{
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                                }"
                           :plugins="plugins"
                           :weekends="true"
                           :events="events"
                             
                           @@eventClick="eventClick"
                           @@dateClick="handleDateClick" />
    </div>

My Js file:

var fullcalendar = Vue.component('FullCalendar', window['FullCalendarVue'].default);

document.addEventListener('DOMContentLoaded', function () {

    new Vue({
        el: '#app-el',
        components: {
            fullcalendar: fullcalendar
        },
        data: function () {
            return {
                showModal: false,
                plugins: [
                    window.FullCalendarDayGrid.default,
                    window.FullCalendarTimeGrid.default,
                    window.FullCalendarInteraction.default,
                ],

                events: [
                ]
            }
        },
       

        methods: {
            eventClick(args) {
               // this.$emit("event-click", this);
                this.showModal = true;
            },
            handleDateClick(arg) {
              console.log('handleDateClick');
            }
        }

    });

});

Answer 1

You can use: @@date-click="handleDateClick" instead of @@dateClick="handleDateClick", if that doesn't work you can refer to the discussion on: Github issue

you can try this solution:

<full-calendar ... @date-click="handleDateClick" />
 ...
 mounted() {
    const camelize = str => str.split('-').map((item, index) => index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item).join("")
    Object.keys(this.$refs.fullCalendar._events).forEach(name=>this.$refs.fullCalendar._events[camelize(name)] = this.$refs.fullCalendar._events[name])
}
...

For further reference, you can view: Prop Casing (camelCase vs kebab-case)

Answer 2

You are using vuejs as a local resource of cdn. So you need to use the convention of html. You can't use camel-case as an event listener. You need to use a hyphen instead. Such as use:

@@date-click="handleDateClick" instead of @@dateClick="handleDateClick"