vue日历实现方案

vue日历实现方案

基于第三方库（如FullCalendar）

安装FullCalendar及其Vue适配器：

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

示例代码：

<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: '会议', start: '2023-10-01' },
          { title: '假期', start: '2023-10-15' }
        ]
      }
    }
  }
}
</script>

自定义日历组件

核心逻辑实现：

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上个月</button>
      <h2>{{ currentYear }}年{{ currentMonth + 1 }}月</h2>
      <button @click="nextMonth">下个月</button>
    </div>
    <div class="days">
      <div v-for="day in ['日','一','二','三','四','五','六']" :key="day">{{ day }}</div>
    </div>
    <div class="dates">
      <div 
        v-for="date in visibleDates" 
        :key="date.getTime()"
        :class="{ 
          'other-month': date.getMonth() !== currentMonth,
          'today': isToday(date)
        }"
      >
        {{ date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date()
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth()
    },
    visibleDates() {
      const dates = []
      const firstDay = new Date(this.currentYear, this.currentMonth, 1)
      const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)

      // 上月末尾几天
      const prevMonthDays = firstDay.getDay()
      for (let i = prevMonthDays - 1; i >= 0; i--) {
        dates.push(new Date(this.currentYear, this.currentMonth - 1, -i))
      }

      // 当月所有天
      for (let i = 1; i <= lastDay.getDate(); i++) {
        dates.push(new Date(this.currentYear, this.currentMonth, i))
      }

      // 下月开始几天
      const nextMonthDays = 6 - lastDay.getDay()
      for (let i = 1; i <= nextMonthDays; i++) {
        dates.push(new Date(this.currentYear, this.currentMonth + 1, i))
      }

      return dates
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth - 1, 1)
    },
    nextMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth + 1, 1)
    },
    isToday(date) {
      const today = new Date()
      return date.getDate() === today.getDate() && 
             date.getMonth() === today.getMonth() && 
             date.getFullYear() === today.getFullYear()
    }
  }
}
</script>

<style>
.calendar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.days, .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.dates > div {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.other-month {
  opacity: 0.3;
}
.today {
  background-color: #42b983;
  color: white;
}
</style>

功能扩展建议

• 添加事件管理功能，支持点击日期添加/查看事件
• 实现周视图和日视图切换
• 添加拖拽调整事件时间功能
• 支持国际化显示
• 集成日期选择器功能

性能优化方向

• 使用虚拟滚动处理大量事件渲染
• 对日期计算进行缓存优化
• 使用Web Workers处理复杂日期运算
• 按需加载日历视图插件