fullcalendar.js 插件上的点击事件不工作

Question

我正在尝试在 VueJS 中显示日历。我需要以下东西：

月视图
周视图
单击单元格时的日视图
在我的日历的每个单元格中显示数据

我不能使用 Vuetify 插件，因为我已经在使用 Bootstrap，这就是我使用 fullcalendar.js 插件 (https://fullcalendar.io/docs/vue) 的原因。

但是，组件背后的API似乎没有正常工作，

<template>
<div>
    <FullCalendar :plugins="calendarPlugins"
                  :weekends="false"
                  @dateClick="handleDateClick"
    />
</div>
</template>

<script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'

    export default {
        name: "Calendar",

        components: {
            FullCalendar // make the <FullCalendar> tag available
        },

        data() {
            return {
                calendarPlugins: [ dayGridPlugin ]
            }
        },
        methods: {
            handleDateClick(arg) {
                alert(arg.date)
            }
        }
    }
</script>

<style lang='scss' scoped>
    @import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/daygrid/main.css';
</style>

当我点击一个日期时，没有事件被触发，控制台中也没有出现任何错误。我在这里做错了什么？

感谢您的帮助！

Answer 1

根据 FullCalender documentation：

In order for this callback to fire, you must load the interaction plugin.

fullcalendar.js 插件上的点击事件不工作

Click event on fullcalendar.js plugin not working

javascript

fullcalendar

vue.js

fullcalendar-4