Vue FullCalendar，设置单击事件
Vue FullCalendar，设置单击事件
提问于 2019-09-09 19:59:51
我正在使用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)
},
},
}这似乎与文档相符，但我没有收到警报。我只是想让它的功能到位，这样我就可以将每个事件点击绑定到一个带有该事件详细信息的模式上。
我到底做错了什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-12 23:10:17
您需要添加selectable:true，因为缺省值为false。而且您还需要interactionPlugin。
https://fullcalendar.io/docs/selectable https://fullcalendar.io/docs/plugin-index
import interactionPlugin from '@fullcalendar/interaction'
config:{
...
selectable:true,
plugins:[interactionPlugin]
}Stack Overflow用户
发布于 2019-09-13 01:51:26
我有以下设置，它允许我点击，点击和拖动。您的代码只缺少@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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57853611
复制相关文章
相似问题
腾讯云开发者
