当前位置：首页 > VUE

vue 日历组件实现

2026-02-19 18:13:46VUE

实现 Vue 日历组件的方法

基础日历结构

使用 Vue 的模板语法构建日历的基本框架，包括月份导航和日期格子。以下是一个简单的日历模板示例：

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上一月</button>
      <h2>{{ currentYear }}年{{ currentMonth }}月</h2>
      <button @click="nextMonth">下一月</button>
    </div>
    <div class="days">
      <div v-for="day in daysOfWeek" :key="day" class="day-header">{{ day }}</div>
    </div>
    <div class="dates">
      <div v-for="date in visibleDates" :key="date.date" 
           :class="['date', { 'current-month': date.isCurrentMonth }]"
           @click="selectDate(date)">
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

日期计算逻辑

在 Vue 的脚本部分，实现日期的计算逻辑，包括当前月份的日期和前后月份的补全日期。

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      daysOfWeek: ['日', '一', '二', '三', '四', '五', '六']
    };
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear();
    },
    currentMonth() {
      return this.currentDate.getMonth() + 1;
    },
    visibleDates() {
      const year = this.currentDate.getFullYear();
      const month = this.currentDate.getMonth();
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const daysInMonth = lastDay.getDate();
      const startDay = firstDay.getDay();

      const dates = [];
      // 上个月的补全日期
      const prevMonthLastDay = new Date(year, month, 0).getDate();
      for (let i = startDay - 1; i >= 0; i--) {
        dates.push({
          day: prevMonthLastDay - i,
          date: new Date(year, month - 1, prevMonthLastDay - i),
          isCurrentMonth: false
        });
      }

      // 当前月日期
      for (let i = 1; i <= daysInMonth; i++) {
        dates.push({
          day: i,
          date: new Date(year, month, i),
          isCurrentMonth: true
        });
      }

      // 下个月的补全日期
      const remainingDays = 42 - dates.length;
      for (let i = 1; i <= remainingDays; i++) {
        dates.push({
          day: i,
          date: new Date(year, month + 1, i),
          isCurrentMonth: false
        });
      }

      return dates;
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
    },
    nextMonth() {
      this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
    },
    selectDate(date) {
      this.$emit('date-selected', date);
    }
  }
};
</script>

样式设计

为日历组件添加基本的样式，使其看起来更加美观。

<style scoped>
.calendar {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
}
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.date {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}
.date:hover {
  background-color: #f0f0f0;
}
.current-month {
  background-color: #fff;
}
.other-month {
  color: #ccc;
}
</style>