Vue FullCalendar：日期和事件双击处理程序

问题描述

我正在使用Vue FullCalendar 5.3.1。我想在空白日期单元格上双击添加事件，并在事件上双击添加事件。我该如何实施？默认情况下，有2种方法：dateClick（）和eventClick（），对我来说很好。

我的代码：

<template>
    <div>
        <heading class="mb-6">Scheduler</heading>

        <card class="custom-card">
            <FullCalendar :options="calendarOptions"/>
        </card>
    </div>
</template>

<script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridplugin from '@fullcalendar/daygrid'
    import interactionPlugin from '@fullcalendar/interaction'
    import resourceTimelineDay from '@fullcalendar/resource-timeline'

    export default {
        components: {
            FullCalendar // make the <FullCalendar> tag available
        },data() {
            return {
                calendarOptions: {
                    dateClick: function(info) {
                        console.log(info.dateStr)
                        console.log(info.resource.id)
                    },eventClick: function(info) {
                        console.log(info)
                    },height: 250,plugins: [ dayGridplugin,interactionPlugin,resourceTimelineDay ],headerToolbar: {
                        left: 'today prev,next',center: 'title',right: 'resourceTimelineDay,resourceTimelineWeek'
                    },initialView: 'resourceTimelineDay',aspectRatio: 1.5,editable: true,resourceAreaColumns: [
                        {
                            field: 'title',headerContent: 'Worker'
                        }
                    ],resources: [
                        {
                            "id": "worker_a","title": "Worker A"
                        },{
                            "id": "worker_b","title": "Worker B","eventColor": "green"
                        },{
                            "id": "worker_c","title": "Worker C","eventColor": "orange"
                        }
                    ],events: [{
                            "resourceId": "worker_a","title": "Job 5","start": "2020-09-15T10:00:00+00:00","end": "2020-09-15T15:00:00+00:00"
                        },{
                            "resourceId": "worker_b","title": "Job 2","start": "2020-09-15T09:00:00+00:00","end": "2020-09-15T14:00:00+00:00"
                        },"title": "Job 4","start": "2020-09-15T15:30:00+00:00","end": "2020-09-15T17:30:00+00:00"
                        },]
                }
            }
        }
    }
</script>

顺便说一句，我注意到现在所有日历设置都通过:options = ""传递。如果要传递<FullCalendar :events="events"/>这样的事件或处理<FullCalendar @dateClick="dateClick"/>这样的事件，则不能这样做。一切都需要在calendarOptions对象（documentation）中传递

解决方法

fullcalendar 不提供此选项。

但是您可以附加双击处理程序，当使用 Event Render Hooks 构造事件对象时

在第 5 版中我们可以使用函数 eventDidMount

data() {
   return {
      calendarOptions: {
         ...
         eventDidMount: function(eventInfo){
           // Not mandatory,but you can set an id to the object
           eventInfo.el.id = eventInfo.event.id;
           // Set the dbclick event
           eventInfo.el.ondblclick = function(){
               console.log(eventInfo.event)
            };
         }
      }
   }
}

注意：这是有效的，只是因为这个函数只被调用了一次，如果你在其他版本中工作，请检查该函数被调用了多少次。