当前位置：首页 > VUE

用vue实现日历

2026-01-19 12:52:18VUE

实现基础日历结构

使用Vue构建日历需要先设计基础数据结构。通常需要维护当前年份、月份以及日期数组。可以通过Date对象获取当前月份的天数和起始星期。

data() {
  return {
    currentDate: new Date(),
    daysInMonth: [],
    weekdays: ['日', '一', '二', '三', '四', '五', '六']
  }
}

计算月份天数

创建计算属性生成当前月份的日期矩阵。需要考虑上月剩余天数、本月天数及下月补充天数，保证日历表格完整。

用vue实现日历

computed: {
  calendarDays() {
    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 daysFromPrevMonth = firstDay.getDay()
    const daysInCurrentMonth = lastDay.getDate()

    const days = []

    // 添加上月日期
    const prevMonthLastDay = new Date(year, month, 0).getDate()
    for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
      days.push({
        date: prevMonthLastDay - i,
        isCurrentMonth: false
      })
    }

    // 添加本月日期
    for (let i = 1; i <= daysInCurrentMonth; i++) {
      days.push({
        date: i,
        isCurrentMonth: true
      })
    }

    // 补充下月日期
    const remainingDays = 42 - days.length
    for (let i = 1; i <= remainingDays; i++) {
      days.push({
        date: i,
        isCurrentMonth: false
      })
    }

    return days
  }
}

渲染日历界面

使用表格布局渲染日历，将日期数据分组为每周一行。添加月份切换功能和日期样式区分。

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上个月</button>
      <h3>{{ currentYear }}年{{ currentMonth + 1 }}月</h3>
      <button @click="nextMonth">下个月</button>
    </div>

    <div class="weekdays">
      <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
    </div>

    <div class="days">
      <div 
        v-for="(day, index) in calendarDays" 
        :key="index"
        :class="['day', { 'current-month': day.isCurrentMonth }]"
      >
        {{ day.date }}
      </div>
    </div>
  </div>
</template>

添加交互功能

实现月份切换逻辑和日期选择功能。可以扩展添加事件标记等高级功能。

用vue实现日历

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
    )
  },

  selectDay(day) {
    if (day.isCurrentMonth) {
      this.selectedDate = new Date(
        this.currentDate.getFullYear(),
        this.currentDate.getMonth(),
        day.date
      )
    }
  }
}

样式设计

添加基本样式使日历美观易用。使用CSS Grid布局可以简化日历排列。

.calendar {
  width: 350px;
  border: 1px solid #eee;
  font-family: Arial;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #f5f5f5;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #eee;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1px;
  background: #eee;
}

.day {
  padding: 10px;
  background: white;
  min-height: 40px;
}

.day.current-month {
  color: #333;
}

.day:not(.current-month) {
  color: #ccc;
}