将事件从对象VUE添加到完整日历

<template>
  <div>
    <form @submit.prevent="addEvent">
      <label for="title">Event Title:</label>
      <input type="text" id="title" v-model="event.title" required>
      <br>
      <label for="start">Start Time:</label>
      <input type="datetime-local" id="start" v-model="event.start" required>
      <br>
      <label for="end">End Time:</label>
      <input type="datetime-local" id="end" v-model="event.end" required>
      <br>
      <button type="submit">Add Event</button>
    </form>
    <div id="calendar"></div>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      event: {
        title: '',
        start: '',
        end: ''
      }
    }
  },
  methods: {
    addEvent() {
      // 将事件信息添加到日历中的逻辑
      // 可以使用FullCalendar提供的API，或者自己编写逻辑
    }
  },
  mounted() {
    const calendarEl = document.getElementById('calendar')
    const calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [dayGridPlugin],
      initialView: 'dayGridMonth',
      events: [this.event] // 将事件信息传递给日历组件
    })
    calendar.render()
  }
}
</script>