Vue FullCalendar，设置点击事件

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