vue实现年历

实现年历的Vue组件

在Vue中实现年历功能可以通过组合使用日期处理库和组件化开发来完成。以下是两种常见实现方式：

基础实现方案

安装日期处理库（如dayjs或date-fns）：

npm install dayjs

创建Vue组件基本结构：

<template>
  <div class="year-calendar">
    <div v-for="month in months" :key="month" class="month-container">
      <h3>{{ getMonthName(month) }}</h3>
      <div class="days-grid">
        <div v-for="day in getDaysInMonth(month)" 
             :key="day"
             class="day-cell">
          {{ day }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      currentYear: dayjs().year()
    }
  },
  computed: {
    months() {
      return Array.from({length: 12}, (_, i) => i + 1)
    }
  },
  methods: {
    getMonthName(month) {
      return dayjs(`${this.currentYear}-${month}-01`).format('MMMM')
    },
    getDaysInMonth(month) {
      const days = dayjs(`${this.currentYear}-${month}`).daysInMonth()
      return Array.from({length: days}, (_, i) => i + 1)
    }
  }
}
</script>

<style>
.year-calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.month-container {
  border: 1px solid #eee;
  padding: 10px;
}
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.day-cell {
  text-align: center;
  padding: 5px;
}
</style>

增强版实现方案

添加日期选择和事件标记功能：

<template>
  <div>
    <select v-model="selectedYear">
      <option v-for="year in yearRange" :value="year">{{ year }}</option>
    </select>

    <div class="year-calendar">
      <div v-for="month in months" :key="month" class="month-container">
        <h3>{{ getMonthName(month) }}</h3>
        <div class="days-grid">
          <div v-for="n in getOffset(month)" class="empty-cell"></div>
          <div v-for="day in getDaysInMonth(month)" 
               :key="day"
               :class="['day-cell', { 
                 'today': isToday(month, day),
                 'selected': isSelected(month, day),
                 'has-event': hasEvent(month, day)
               }]"
               @click="selectDate(month, day)">
            {{ day }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      selectedYear: dayjs().year(),
      selectedDate: null,
      events: [
        { date: '2023-05-15', title: '会议' },
        { date: '2023-08-20', title: '生日' }
      ]
    }
  },
  computed: {
    yearRange() {
      const current = dayjs().year()
      return Array.from({length: 10}, (_, i) => current - 5 + i)
    },
    months() {
      return Array.from({length: 12}, (_, i) => i + 1)
    }
  },
  methods: {
    getMonthName(month) {
      return dayjs(`${this.selectedYear}-${month}-01`).format('MMMM')
    },
    getDaysInMonth(month) {
      const days = dayjs(`${this.selectedYear}-${month}`).daysInMonth()
      return Array.from({length: days}, (_, i) => i + 1)
    },
    getOffset(month) {
      return dayjs(`${this.selectedYear}-${month}-01`).day()
    },
    isToday(month, day) {
      const date = dayjs(`${this.selectedYear}-${month}-${day}`)
      return date.isSame(dayjs(), 'day')
    },
    isSelected(month, day) {
      if (!this.selectedDate) return false
      const date = dayjs(`${this.selectedYear}-${month}-${day}`)
      return date.isSame(this.selectedDate, 'day')
    },
    hasEvent(month, day) {
      const dateStr = dayjs(`${this.selectedYear}-${month}-${day}`).format('YYYY-MM-DD')
      return this.events.some(event => event.date === dateStr)
    },
    selectDate(month, day) {
      this.selectedDate = dayjs(`${this.selectedYear}-${month}-${day}`)
    }
  }
}
</script>

关键实现要点

日期计算处理

• 使用dayjs处理日期相关计算
• 获取每月天数：dayjs().daysInMonth()
• 获取每月第一天是星期几：dayjs().startOf('month').day()

样式布局

• 使用CSS Grid布局实现日历网格
• 月份采用4列响应式布局
• 日期采用7列布局对应星期

交互功能

• 支持年份选择
• 日期点击选中效果
• 特殊日期标记（今日/事件日）

优化建议

• 添加周数显示
• 实现国际化支持
• 添加月视图/周视图切换
• 集成拖拽添加事件功能
• 使用虚拟滚动优化大数据量渲染

以上方案可根据实际需求进行组合或扩展，核心思路是通过日期库处理日历逻辑，Vue负责数据绑定和交互实现。