[英]Vue FullCalendar, setting click event
I'm using the FullCalendar library for Vue https://fullcalendar.io/docs/vue and I have a perfectly working calendar, but I can't get clicking on date/calendar events to work. 我正在使用Vue https://fullcalendar.io/docs/vue的FullCalendar库,我有一个完美的日历,但我无法点击日期/日历事件。
I have the calendar in the template: 我在模板中有日历:
<full-calendar @dateClick="handleDateClick" :config="config" :events="events"/></full-calendar>
and my vue code: 和我的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)
},
},
}
This seems to match the docs but I'm not getting the alert. 这似乎与文档匹配,但我没有得到警报。 I'm just trying to make it so that I have the functionality in place so that I can tie each event click to a modal with that event's details.
我只是试图让它具有适当的功能,以便我可以将每个事件点击绑定到具有该事件详细信息的模态。
What exactly am I doing wrong here? 我到底错在了什么?
I have the following setup and it allows me to click and click and drag. 我有以下设置,它允许我单击并单击并拖动。 Your code is only missing
@select=""
. 您的代码只缺少
@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>
You need to add selectable:true as the default is false. 您需要添加selectable:true,因为默认值为false。 And you need the interactionPlugin as well.
而且你也需要interactionPlugin。
https://fullcalendar.io/docs/selectable https://fullcalendar.io/docs/plugin-index https://fullcalendar.io/docs/selectable https://fullcalendar.io/docs/plugin-index
import interactionPlugin from '@fullcalendar/interaction'
config:{
...
selectable:true,
plugins:[interactionPlugin]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.