Vue FullCalendar，设置点击事件

Question

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

我在模板中有日历：

<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。您还需要 interactionPlugin。

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>

Vue FullCalendar，设置点击事件

Vue FullCalendar, setting click event

javascript

fullcalendar

vue.js