我正在尝试在 VueJS 中显示日历。我需要以下东西:
- 月 View
- 周 View
- 点击单元格时的日 View
- 在日历的每个单元格中显示数据
我无法使用 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 documentation :
In order for this callback to fire, you must load the interaction plugin.
关于javascript - fullcalendar.js 插件上的单击事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59762551/