Vue 完整日历，设置点击事件

Question

我正在使用 Vue https://fullcalendar.io/docs/vue 的 FullCalendar 库，我有一个完美工作的日历，但我无法点击日期/日历事件来工作。

我在模板中有日历：

<full-calendar @dateClick="handleDateClick" :config="config" :events="events"/></full-calendar>

和我的 Vue 代码：

export default {
data () {
return {
events: [
title: 'My Event',
start: '2010-01-01'
],
config: {
defaultView: 'month',
editable:true,
eventRender: function(event, element) {
console.log(event)
}
},
}
},
methods: {
handleDateClick(arg) {
alert(arg.date)
},
},
}

这似乎与文档匹配，但我没有收到警报。我只是想让它拥有适当的功能，以便我可以将每个事件单击与该事件的详细信息绑定到一个模式。

我到底做错了什么？

Answer 1

您需要添加 selectable：true，因为默认值为 false。你也需要交互插件。

https://fullcalendar.io/docs/selectable https://fullcalendar.io/docs/plugin-index

import interactionPlugin from '@fullcalendar/interaction'
config:{
...
selectable:true,
plugins:[interactionPlugin]
}

Answer 2

我有以下设置，它允许我单击、单击和拖动。您的代码仅缺少@select="".

<template>
<FullCalendar 
defaultView="dayGridMonth" 
:plugins="calendarPlugins" 
:events="events"
:selectable="true"
@select="handleSelect"
@clickDate="handleDateClick"
/>
</template>

<script>
/* eslint-disable */
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';

export default {
name: 'Home',
components: {
FullCalendar
},
mounted(){
},
data () {
return {
events: [{title:'Something', start:'2019-09-12'}],
calendarPlugins:[dayGridPlugin, interactionPlugin]
}
},
methods:{
handleDateClick(e){
console.log(e);
},
handleSelect(e){
console.log(e);
}
}
}
</script>
<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
@import '~@fullcalendar/list/main.css';
</style>