Fullcalendar dateclick 和 eventclick 事件未触发

Question

我在 vuejs 中配置了全日历我在使用全日历事件时遇到问题。当我尝试触发这些事件 dateClick 和 eventClick 它在控制台上给我以下警告：

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".

我也试过切换到日期点击，但没有成功。

我的Html

    <script src="~/Scripts/vue/vue.js"></script>
    <link href='https://unpkg.com/@fullcalendar/core@4.1.0/main.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.css' rel='stylesheet' />
    <link href='https://unpkg.com/@fullcalendar/timegrid@4.1.0/main.css' rel='stylesheet' />
    <script src='https://unpkg.com/@fullcalendar/core@4.1.0/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/daygrid@4.1.0/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/timegrid@4.1.0/main.js'></script>
    <script src='https://unpkg.com/@fullcalendar/interaction@4.1.0/main.js'></script>
    <script src="https://unpkg.com/@fullcalendar/vue@4.1.0/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>

我的 Js 文件：

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

您正在使用vuejs作为cdn的本地资源。所以你需要使用html的约定。您不能使用驼峰式大小写作为事件侦听器。您需要改用连字符。如使用：

@@date-click="handleDateClick" 而不是 @@dateClick="handleDateClick"

Answer 2

可以使用：@@date-click="handleDateClick" instead of @@dateClick="handleDateClick"，如果不行可以参考讨论：Github issue

您可以试试这个解决方案：

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

更多参考，您可以查看：Prop Casing (camelCase vs kebab-case)

Fullcalendar dateclick 和 eventclick 事件未触发

Fullcalendar dateclick and eventclick events are not firing

javascript

fullcalendar

vue.js

fullcalendar-4