如何删除 Vue.js 中的 FullCalendar-4 事件
How to remove FullCalendar-4 events in Vue.js
我正在尝试使用 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>
您需要将 @eventRender
方法绑定到 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);
}
}
我正在尝试使用 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>
您需要将 @eventRender
方法绑定到 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);
}
}