Я создаю компонент FullCalendar Vue. js с Firebase (https://github.com/fullcalendar/fullcalendar-example-projects/blob/master/vue/src/DemoApp.vue). До сих пор я успешно подключал компонент FullCalendar к Firebase, чтобы добавить события календаря в Firebase и вернуть их в календарь. Сейчас я пытаюсь добавить кнопки удаления к событиям календаря после их рендеринга, чтобы удалить события из Firebase и из календаря. Я почти уверен, что eventRender
- это метод fullCalendar, который я должен использовать для отображения реальных кнопок, но я не уверен, как настроить фактическую функцию, чтобы кнопки появлялись на каждом созданном событии. Любая идея, как настроить этот FullCalendar Vue. js компонент для удаления событий?
<template>
<div class='demo-app'>
<div class='demo-app-top'>
<button @click="toggleWeekends">toggle weekends</button>
<button @click="gotoPast">go to a date in the past</button>
(also, click a date/time to add an event)
</div>
<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'
import { db } from '@/main'
// import { mapState } from 'vuex'
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: [ // initial event data
{ title: 'Event Now', start: new Date() }
]
}
},
mounted() {
this.getEvent()
},
methods: {
toggleWeekends() {
this.calendarWeekends = !this.calendarWeekends // update a property
},
gotoPast() {
let calendarApi = this.$refs.fullCalendar.getApi() // from the ref="..."
calendarApi.gotoDate('2000-01-01') // call a method on the Calendar object
},
async getEvent () {
let snapshot = await db.collection('fcEvents').get()
const events = []
snapshot.forEach(doc => {
let appData = doc.data()
appData.id = doc.id
events.push(appData)
})
this.calendarEvents = events
},
handleDateClick(arg) {
if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
db.collection('fcEvents').add({ // add new event data
title: 'New Event',
start: arg.date.toISOString().substr(0, 10),
allDay: arg.allDay
})
this.getEvent()
}
}
}
}
</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>