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

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，设置点击事件

2 个答案: