javascript - 如何在 Vue.js 中删除 FullCalendar-4 事件

Question

我正在尝试使用 FullCalendarV4 和 Vue.js 构建交互式日历。到目前为止，我已经设置了代码，以使用 handleDateClick 函数中的提示方法启用事件输入。我想为每个事件添加一个功能删除按钮。文档说这可以使用 eventRender 回调来完成。我尝试使用此回调来附加按钮但无济于事。关于如何开展这项工作有什么建议吗？我的代码如下。谢谢!

<template>
  <div class='demo-app'>
    <FullCalendar
      class='demo-app-calendar'
      ref="fullCalendar"
      defaultView="dayGridMonth"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
       }"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      @dateClick="handleDateClick"
      />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: []
    }
  },
  methods: {
    handleDateClick(arg) {
    var newTitle = prompt(arg.dateStr);
      if (newTitle != null) {
        this.calendarEvents.push({
          title: newTitle,
          start: arg.date,
          allDay: arg.allDay
        })
      }
    },
    eventRender: function(event){
      var btn = document.createElement("button");
      btn.appendChild(document.createTextNode("x"));
      event.appendChild(btn);
    }
  }
}
</script>

<style lang='scss'>

// you must include each plugins' css
// paths prefixed with ~ signify node_modules
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';

.demo-app {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-top {
  margin: 0 0 3em;
}

.demo-app-calendar {
  margin: 0 auto;
  max-width: 900px;
}

</style>

Answer 1

您需要将@eventRender方法绑定(bind)到FullCalendar组件要访问 eventRender 中的元素，您需要使用 event.el。您可以查看the document here

   <FullCalendar
          class='demo-app-calendar'
          ref="fullCalendar"
          defaultView="dayGridMonth"
          :header="{
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }"
          :plugins="calendarPlugins"
          :weekends="calendarWeekends"
          :events="calendarEvents"
          @dateClick="handleDateClick"
          @eventRender="eventRender"
    />

    methods: {
        eventRender(info) {
          var btn = document.createElement("button");
          btn.appendChild(document.createTextNode("x"));
          info.el.appendChild(btn);
        }
    }