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

ix0qys7i 于 2023-05-01 发布在 Vue.js

关注(0)|答案(2)|浏览(145)

我正在使用Vue FullCalendar 5。3.1.我想在空日期单元格上双击添加事件，并在事件上双击编辑事件。我该如何实现这一点？默认情况下有两种方法：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"
                        }, {
                            "resourceId": "worker_b",
                            "title": "Job 4",
                            "start": "2020-09-15T15:30:00+00:00",
                            "end": "2020-09-15T17:30:00+00:00"
                        },
                    ]
                }
            }
        }
    }
</script>

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

vue.js

来源：https://stackoverflow.com/questions/63898843/vue-fullcalendar-date-and-event-doubleclick-handler

2条答案

按热度按时间

zzoitvuj1#

完整日历不提供此选项。
但是，当使用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)
            };
         }
      }
   }
}

**注意：**之所以有效，是因为该函数只被调用一次，如果您在其他版本中工作，请检查该函数被调用了多少次。

赞(0）回复(0）举报 2023-05-01

qhhrdooz2#

这只是一个工作，但你可以只计数点击。

onDateSelect(payload) {
  if (this.counter === 1) {
    this.counter = 0
    return this.onDateClick(payload);
  }
  this.counter++
},

赞(0）回复(0）举报 2023-05-01

我来回答

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

2条答案

相关问题

热门标签

最新问答