vue实现全年日历

实现全年日历的基本思路

使用Vue实现全年日历需要结合日期计算、数据渲染和交互逻辑。核心在于生成全年12个月的日历数据，并通过组件化方式展示。以下是具体实现方法：

安装依赖（可选）

如需更便捷的日期处理，可安装dayjs或date-fns：

npm install dayjs

基础组件结构

创建日历组件YearCalendar.vue：

<template>
  <div class="year-calendar">
    <div v-for="month in months" :key="month.month" class="month-container">
      <h3>{{ month.monthName }} {{ year }}</h3>
      <div class="calendar-grid">
        <div v-for="day in month.days" :key="day.date" 
             class="day-cell" :class="{ 'other-month': !day.isCurrentMonth }">
          {{ day.day }}
        </div>
      </div>
    </div>
  </div>
</template>

核心逻辑实现

import { ref, computed } from 'vue';
import dayjs from 'dayjs';

export default {
  setup() {
    const year = ref(new Date().getFullYear());

    const months = computed(() => {
      return Array.from({ length: 12 }, (_, i) => {
        const monthStart = dayjs(`${year.value}-${i+1}-01`);
        const monthName = monthStart.format('MMMM');
        const daysInMonth = monthStart.daysInMonth();
        const firstDayOfWeek = monthStart.day();

        // 生成当月天数数组
        const days = [];

        // 填充上月剩余天数
        const prevMonthDays = firstDayOfWeek;
        for (let j = prevMonthDays - 1; j >= 0; j--) {
          days.push({
            day: monthStart.subtract(j + 1, 'day').date(),
            date: monthStart.subtract(j + 1, 'day').format('YYYY-MM-DD'),
            isCurrentMonth: false
          });
        }

        // 填充当月天数
        for (let d = 1; d <= daysInMonth; d++) {
          days.push({
            day: d,
            date: monthStart.date(d).format('YYYY-MM-DD'),
            isCurrentMonth: true
          });
        }

        // 填充下月天数（补齐6行）
        const remainingCells = 42 - days.length; // 6行x7天
        for (let k = 1; k <= remainingCells; k++) {
          days.push({
            day: k,
            date: monthStart.add(daysInMonth + k, 'day').format('YYYY-MM-DD'),
            isCurrentMonth: false
          });
        }

        return { month: i + 1, monthName, days };
      });
    });

    return { year, months };
  }
};

样式设计

.year-calendar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.month-container {
  background: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.day-cell {
  padding: 5px;
  text-align: center;
  border-radius: 4px;
}

.day-cell.other-month {
  opacity: 0.3;
}

h3 {
  text-align: center;
  margin-bottom: 10px;
}

高级功能扩展

年份切换

<template>
  <div>
    <button @click="year--">←</button>
    <span>{{ year }}</span>
    <button @click="year++">→</button>
    <YearCalendar :year="year" />
  </div>
</template>

事件标记 在日历数据生成时添加事件检测：

days.push({
  day: d,
  date: dateStr,
  isCurrentMonth: true,
  hasEvent: events.value.some(e => e.date === dateStr)
});

性能优化建议

对于大型年份范围，可采用虚拟滚动技术。使用vue-virtual-scroller等库优化渲染：

<RecycleScroller
  :items="months"
  :item-size="300"
  key-field="month"
  v-slot="{ item }">
  <MonthCalendar :month="item" />
</RecycleScroller>

完整示例整合

最终实现应包含：

• 年份导航控制
• 12个月网格布局
• 跨月日期显示（灰色）
• 可选的事件标记功能
• 响应式设计适配不同屏幕

通过组合式API和计算属性，可以高效生成日历数据。Dayjs等库简化了日期计算，组件化设计便于功能扩展。