javascript - fullcalendar.js 插件上的单击事件不起作用
问题描述
我正在尝试在 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>
当我单击一个日期时,如果触发则没有事件,并且控制台中没有出现任何错误。我在这里做错了什么?
谢谢你的帮助 !
解决方案
根据 FullCalender文档:
为了触发此回调,您必须加载交互插件。
推荐阅读
- java - 无法通过 KAFKA api 连接到 EventHub
- javascript - 完成工作前的 javascript 函数日志记录
- mongodb - 如何使用 findone 从 Mongodb 集合中返回一个数组
- c - 双参考循环变量在循环更新时发生变化
- javascript - 当我让用户通过firebase注册时,他进行了身份验证,但数据没有写入firebase db?
- java - 如何在 mockito 中模拟 Class.forName()
- vue.js - 访问子组件数据时出现问题
- json - 空手道配置文件中写入的用户名/密码在功能文件中的 Post 请求中不起作用
- angular - 根据时区更改 mat-datepicker 选择的日期值
- java - 使用 --debug 运行 spring 应用程序不会影响我的记录器