在Vue项目中用fullcalendar制作日程表的示例代码

下面是用fullcalendar制作日程表的完整攻略。

1. 安装fullcalendar

在Vue项目中使用fullcalendar前，我们需要先安装fullcalendar插件及其相关依赖。我们可以使用 npm 进行安装：

npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/common @fullcalendar/daygrid @fullcalendar/timegrid

2. 注册fullcalendar组件

在Vue中可以将fullcalendar组件注册到全局或局部。在本例中，我们将fullcalendar组件注册到全局，因此在入口文件（main.js）中添加以下代码：

import { createApp } from 'vue'
import { Calendar, createEventId } from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'

const app = createApp(App)
app.component('FullCalendar', Calendar)
app.use(dayGridPlugin)
app.use(timeGridPlugin)
app.mount('#app')

这里我们借助了 createApp 函数创建了Vue应用实例，并将fullcalendar组件注册到了全局，以便在模板中使用 FullCalendar 组件。我们还导入了 dayGridPlugin 和 timeGridPlugin 用于支持日历和时间栅格视图。

3. 创建日历

在模板中可以创建一个简单的日历：

<template>
  <FullCalendar :events="events" />
</template>

在上述代码中，我们传递了一个名为 events 的数组变量作为日历的事件信息。下一步我们需要根据业务逻辑生成相应的事件信息。

4. 创建事件信息

我们可以在Vue的某个组件中维护事件信息的数组，例如在App.vue中：

import { ref } from 'vue'
import { createEventId } from '@fullcalendar/vue'

export default {
  setup() {
    const events = ref([
      {
        id: createEventId(),
        title: 'My Event',
        start: '2021-11-01T12:30:00',
        end: '2021-11-01T14:30:00'
      },
      // ...
    ])

    return {
      events
    }
  }
}

上述代码中，我们使用了Vue3的 setup 函数，创建了一个名为 events 的响应式变量。该变量保存了一个事件数组，其中的每个事件都包含了id、名称、开始时间和结束时间信息。

5. 日历视图设置

我们可以在模板中设置日历视图，例如展示一周的日历视图：

<template>
  <FullCalendar :events="events" initialView="timeGridWeek" />
</template>

在上述代码中，我们传递了一个名为 timeGridWeek 的参数作为初始视图，以展示一周的日历视图。

示例1：动态生成事件信息

我们可以制作一个简单的表单，用于动态创建事件，并添加到日历中。代码示例如下：

<template>
  <div class="event-form">
    名称：<input type="text" v-model="name" />
    开始时间：<input type="datetime-local" v-model="start" />
    结束时间：<input type="datetime-local" v-model="end" />
    <button @click="addEvent">添加</button>
  </div>
  <FullCalendar :events="events" initialView="timeGridWeek" />
</template>

<script>
import { ref } from 'vue'
import { createEventId } from '@fullcalendar/vue'

export default {
  setup() {
    const events = ref([
      {
        id: createEventId(),
        title: 'My Event',
        start: '2021-11-01T12:30:00',
        end: '2021-11-01T14:30:00'
      }
    ])

    const name = ref('')
    const start = ref('')
    const end = ref('')

    const addEvent = () => {
      events.value.push({
        id: createEventId(),
        title: name.value,
        start: start.value,
        end: end.value
      })

      name.value = ''
      start.value = ''
      end.value = ''
    }

    return {
      events,
      name,
      start,
      end,
      addEvent
    }
  }
}
</script>

在上述代码中，我们创建了一个名为 event-form 的表单来动态生成事件信息，并将其添加到 events 数组中，最终通过 FullCalendar 组件展示。在 addEvent 函数中，我们根据表单数据生成了一个新的事件对象，并将其添加到 events 数组中。

示例2：自定义日历样式

我们可以在日历中自定义一些样式，例如修改日历样式，修改日期文本颜色等。代码示例如下：

<template>
  <FullCalendar :events="events" initialView="timeGridWeek" :headerToolbar="headerToolbar" :height="500" />
</template>

<script>
import { ref } from 'vue'
import { createEventId } from '@fullcalendar/vue'

export default {
  setup() {
    const events = ref([
      {
        id: createEventId(),
        title: 'My Event',
        start: '2021-11-01T12:30:00',
        end: '2021-11-01T14:30:00'
      }
    ])

    const headerToolbar = {
      left: 'prev',
      center: 'title',
      right: 'next'
    }

    return {
      events,
      headerToolbar
    }
  }
}
</script>

<style scoped>
.fc-daygrid-day-number {
  color: #999;
  font-size: 12px;
}
</style>

在上述代码中，我们传递了一个对象作为 headerToolbar 参数，以自定义日历的标题和按钮控件。我们还将日历高度设置为 500 像素，并通过 scoped 样式修改了日期文本颜色。

以上就是在Vue项目中使用fullcalendar制作日程表的完整攻略。