Fullcalendar dateclick 和 eventclick 事件未触发

如何解决Fullcalendar dateclick 和 eventclick 事件未触发

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

事件“dateclick”在组件中发出，但 处理程序为“dateClick”注册。请注意，HTML 属性是 不区分大小写，您不能使用 v-on 来侦听 camelCase 事件 使用 DOM 内模板时。您可能应该使用“日期单击” 而不是“日期点击”。

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

我的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');
            }
        }

    });

});

解决方法

您可以使用：@@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)

,

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

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