vue如何实现日历

使用第三方库（如 FullCalendar）

FullCalendar 是一个功能强大的日历库，支持 Vue 集成。安装依赖后，通过组件的方式引入日历功能。配置事件、日期范围和交互逻辑可以通过 props 和事件监听实现。

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

在 Vue 组件中引入并注册 FullCalendar：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

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

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        events: [
          { title: 'Meeting', start: '2023-10-01' }
        ]
      }
    }
  }
}
</script>

自定义日历组件

通过计算日期数组生成日历视图。使用 Vue 的响应式数据管理当前月份和事件列表。模板部分通过循环渲染日期格子，并绑定点击事件。

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">Previous</button>
      <h2>{{ currentMonth }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="days-grid">
      <div v-for="day in days" :key="day.date" class="day" @click="selectDay(day)">
        {{ day.date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    }
  },
  computed: {
    days() {
      // 生成当前月份日期数组的逻辑
    }
  },
  methods: {
    prevMonth() {
      // 切换到上个月
    },
    nextMonth() {
      // 切换到下个月
    }
  }
}
</script>

基于 Vuetify 的日历组件

Vuetify 提供了现成的 v-calendar 组件，支持月视图、周视图和自定义事件显示。通过配置插槽可以自定义日期单元格的渲染方式。

<template>
  <v-calendar
    :events="events"
    :type="type"
    @click:event="handleEventClick"
  ></v-calendar>
</template>

<script>
export default {
  data() {
    return {
      type: 'month',
      events: [
        {
          name: 'Meeting',
          start: '2023-10-01',
          end: '2023-10-01'
        }
      ]
    }
  },
  methods: {
    handleEventClick({ event }) {
      console.log(event)
    }
  }
}
</script>

日期选择与事件管理

结合日期选择器和事件表单实现完整的日历功能。使用 v-model 绑定选中的日期，通过方法添加或编辑事件。事件数据可以存储在 Vuex 或本地状态中。

<template>
  <div>
    <input type="date" v-model="selectedDate" />
    <button @click="addEvent">Add Event</button>
    <ul>
      <li v-for="event in filteredEvents" :key="event.id">
        {{ event.title }} - {{ event.date }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      events: []
    }
  },
  computed: {
    filteredEvents() {
      return this.events.filter(e => e.date === this.selectedDate)
    }
  },
  methods: {
    addEvent() {
      this.events.push({
        id: Date.now(),
        title: 'New Event',
        date: this.selectedDate
      })
    }
  }
}
</script>