fullcalendar.js插件上的Click事件不起作用

问题描述 投票:0回答:1

我正在尝试在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>

当我单击日期时,不会触发任何事件,并且控制台中没有任何错误。.我在这里做什么错了?

感谢您的帮助!

enter image description here

vue.js fullcalendar
1个回答
0
投票

根据FullCalender documentation

为了触发此回调,您必须加载交互插件。

热门问题
推荐问题
最新问题