当前位置：首页 > VUE

vue实现全年日历

2026-03-28 04:03:41VUE

Vue 实现全年日历的方法

基础结构搭建

使用 Vue CLI 或 Vite 初始化项目，安装依赖项如 date-fns 或 dayjs 处理日期逻辑。

<template>
  <div class="calendar-container">
    <div v-for="month in 12" :key="month" class="month-section">
      <h3>{{ getMonthName(month - 1) }}</h3>
      <div class="calendar-grid">
        <div v-for="day in getDaysInMonth(2023, month)" :key="day" class="day-cell">
          {{ day }}
        </div>
      </div>
    </div>
  </div>
</template>

日期处理逻辑

引入日期库或手动实现月份天数计算，处理闰年等特殊情况。

import { getDaysInMonth, format } from 'date-fns';

export default {
  methods: {
    getMonthName(monthIndex) {
      return format(new Date(2023, monthIndex, 1), 'MMMM');
    },
    getDaysInMonth(year, month) {
      return getDaysInMonth(new Date(year, month - 1));
    }
  }
};

样式布局

使用 CSS Grid 或 Flexbox 实现日历网格布局，确保响应式设计。

.calendar-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.month-section {
  border: 1px solid #ddd;
  padding: 10px;
}

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

.day-cell {
  border: 1px solid #eee;
  padding: 5px;
  text-align: center;
}

功能扩展

添加日期点击事件、高亮当前日期、支持年份切换等交互功能。

data() {
  return {
    currentYear: new Date().getFullYear()
  };
},
methods: {
  handleDayClick(day, month) {
    console.log(`Selected: ${day}/${month}/${this.currentYear}`);
  },
  changeYear(delta) {
    this.currentYear += delta;
  }
}

性能优化

对于大量日期渲染，考虑虚拟滚动或分页加载。

// 示例：虚拟滚动实现思路
const visibleMonths = computed(() => {
  return Array.from({ length: 12 }).map((_, i) => i)
    .slice(currentScrollIndex.value, currentScrollIndex.value + 3);
});

完整示例

整合所有功能后的核心代码结构：

vue实现全年日历

<template>
  <div>
    <button @click="changeYear(-1)">Prev Year</button>
    <span>{{ currentYear }}</span>
    <button @click="changeYear(1)">Next Year</button>

    <div class="calendar-container">
      <div v-for="month in 12" :key="month" class="month-section">
        <h3>{{ getMonthName(month - 1) }}</h3>
        <div class="calendar-grid">
          <div 
            v-for="day in getDaysInMonth(currentYear, month)" 
            :key="day"
            :class="{ 'current-day': isCurrentDay(day, month) }"
            @click="handleDayClick(day, month)"
          >
            {{ day }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

通过以上步骤，可以构建一个功能完整的全年日历组件，支持年份切换、日期交互和响应式布局。根据实际需求可进一步扩展节假日标记、事件提醒等高级功能。