fullcalendar vue例子

以下是一个基本的FullCalendar Vue例子：

<template>
  <div>
    <FullCalendar :events="events" :header="header" />
  </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,
  },
  data() {
    return {
      events: [
        {
          title: "Event 1",
          start: "2022-10-05",
          end: "2022-10-07",
        },
        {
          title: "Event 2",
          start: "2022-10-09",
          end: "2022-10-10",
        },
      ],
      header: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay",
      },
    };
  },
  plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
};
</script>

在上面的例子中，我们首先导入了FullCalendar Vue组件和所需的插件（dayGridPlugin，timeGridPlugin和interactionPlugin）。然后，在Vue组件的data选项中，我们定义了要显示的事件和FullCalendar的标题。最后，我们将所需的插件作为Vue组件的plugins选项传递。

在模板中，我们使用FullCalendar组件，并将events和header作为props传递。这将显示一个FullCalendar，其中包含两个事件（Event 1和Event 2），以及一个标题，其中包含左侧的上一个/下一个/今天按钮，中央的标题，右侧的dayGridMonth，timeGridWeek和timeGridDay视图按钮。

您可以根据需要自定义FullCalendar的样式和功能。