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文檔：

為了觸發此回調，您必須加載交互插件。