Use kebab-case for event names

Hello,

It took me over an hour to find this out, but i think that the Event-System for this Vue component is broken. It is impossible to listen to an event via ‘@’ or ‘v-on:’.

The Events emited by the fullcalendar component are CamelCase, but should be in kebab-case.

Here is a briefe excerpt from the official VueJS documentation:

Unlike components and props, event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

For these reasons, we recommend you always use kebab-case for event names.

Here is a code snippet how I can reproduce it (I removed everything which is not related to the problem)

<fullcalendar
...
        default-view="dayGridWeek"
        editable="true"
        startEditable="true"
        durationEditable="false"
        @eventDrop="handleEventDrop"
...
    ></fullcalendar>

And in the vue instance like this:

const pickups = new Vue({
    el: '#calendar',
    data() {
        return {
            plugins: [dayGridPlugin, interactionPlugin],
            events: 'events get loaded by url'
        }
    },
    methods: {
        handleEventDrop(eventInfo) {
            console.log(eventInfo)
        }
    }
});

As soon as I drop an exisiting event on another date/time, the (Chrome) Browser prints the following in the console

[Vue tip]: Event “eventdrop” is emitted in component <FullCalendar> but the handler is registered for “eventDrop”. 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 “event-drop” instead of “eventDrop”.

Is it possible to change the emited events to kebab-case or provide another method to listen to the event like it is done with ‘eventRender’ or so…

Kind regards

Is your bug/feature applicable to the core project, without Vue?

No, its only a problem in combination with VueJS

[iiibbbmmm]

According to Props — Vue.js, Vue component props as well as events should be kebab-case to make them work in in-DOM template.

My workaround:

<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])
}
...

[best8248]

#main.umd.js or main.esm.js

line 348

_this.$emit.apply(_this, [emissionName].concat(args)); => _this.$emit.apply(_this, [emissionName.toLowerCase()].concat(args));