vue日历使用

在 Vue 中使用日历，可以使用现成的第三方库，比如 FullCalendar、vue-fullcalendar、v-calendar 等。下面以 FullCalendar 为例，介绍如何在 Vue 中使用日历。

1. 安装 FullCalendar

在项目中安装 FullCalendar，可以使用 npm 进行安装：

npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/interaction

2. 引入 FullCalendar

在需要使用日历的 Vue 组件中，引入 FullCalendar：

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  ...
}

3. 使用 FullCalendar

在 Vue 组件中使用 FullCalendar，可以在 template 中进行如下的配置：

<template>
  <FullCalendar
    :plugins="[ dayGridPlugin, interactionPlugin ]"
    :initialView="'dayGridMonth'"
    :events="events"
    @dateClick="handleDateClick"
  />
</template>

这里的 events 可以是一个数组，用来存储日历中的事件；initialView 则是设置初始的视图，比如 dayGridMonth 表示月视图；@dateClick 则是设置日期点击事件的处理函数。

4. 完整代码示例

<template>
  <FullCalendar
    :plugins="[ dayGridPlugin, interactionPlugin ]"
    :initialView="'dayGridMonth'"
    :events="events"
    @dateClick="handleDateClick"
  />
</template>

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

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      events: [
        { title: 'Event 1', date: '2022-02-01' },
        { title: 'Event 2', date: '2022-02-08' },
        { title: 'Event 3', date: '2022-02-15' }
      ]
    }
  },
  methods: {
    handleDateClick(info) {
      console.log(info.dateStr)
    }
  }
}
</script>

这里的 data 中定义了一个 events 数组，用来存储日历中的事件；methods 中定义了一个 handleDateClick 方法，用来处理日期点击事件，这里只是简单地将日期字符串打印到控制台上。