当前位置：首页 > VUE

vue实现日历组件

2026-01-16 05:56:00VUE

Vue 日历组件实现步骤

基础结构搭建

使用Vue 3的Composition API或Options API创建组件框架。核心结构包括年份/月份切换按钮、星期标题栏和日期网格。

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">←</button>
      <h2>{{ currentYear }}年{{ currentMonth }}月</h2>
      <button @click="nextMonth">→</button>
    </div>
    <div class="weekdays">
      <div v-for="day in weekdays" :key="day">{{ day }}</div>
    </div>
    <div class="days">
      <div 
        v-for="(day, index) in days" 
        :key="index"
        :class="{ 
          'other-month': !day.isCurrentMonth,
          'today': day.isToday 
        }"
      >
        {{ day.date }}
      </div>
    </div>
  </div>
</template>

日期数据处理

计算当前月份的所有日期，包括上个月和下个月的部分日期以填充完整网格。使用JavaScript的Date对象进行处理。

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

      // 计算需要显示的日期范围
      const days = []
      const today = new Date()

      // 添加上个月末尾的几天
      const prevMonthDays = firstDay.getDay()
      for (let i = prevMonthDays; i > 0; i--) {
        const date = new Date(year, month, -i + 1)
        days.push({
          date: date.getDate(),
          isCurrentMonth: false,
          isToday: false
        })
      }

      // 添加当月所有日期
      const totalDays = lastDay.getDate()
      for (let i = 1; i <= totalDays; i++) {
        const date = new Date(year, month, i)
        days.push({
          date: i,
          isCurrentMonth: true,
          isToday: date.toDateString() === today.toDateString()
        })
      }

      // 添加下个月开始的几天
      const nextMonthDays = 6 - lastDay.getDay()
      for (let i = 1; i <= nextMonthDays; i++) {
        days.push({
          date: i,
          isCurrentMonth: false,
          isToday: false
        })
      }

      return days
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth - 2, 1)
    },
    nextMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth, 1)
    }
  }
}
</script>

样式设计

使用CSS Grid布局创建日历网格，添加基本样式增强视觉效果。

vue实现日历组件

<style scoped>
.calendar {
  width: 350px;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  margin-bottom: 5px;
}

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

.days div {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
}

.days div:hover {
  background-color: #f0f0f0;
}

.other-month {
  color: #aaa;
}

.today {
  background-color: #2196F3;
  color: white;
}
</style>

功能扩展

日期选择功能：添加点击事件处理，允许用户选择日期
事件标记：在特定日期显示标记点
范围选择：支持选择日期范围
国际化：支持多语言星期显示

// 在methods中添加日期选择处理
methods: {
  selectDate(day) {
    if (day.isCurrentMonth) {
      this.selectedDate = new Date(this.currentYear, this.currentMonth - 1, day.date)
      this.$emit('date-selected', this.selectedDate)
    }
  }
}

// 在模板中绑定点击事件
<div 
  v-for="(day, index) in days" 
  :key="index"
  @click="selectDate(day)"
>

高级特性实现

周视图切换：添加周视图显示模式
自定义渲染：通过插槽允许自定义日期单元格内容
主题定制：通过props接受主题配置
响应式设计：适配不同屏幕尺寸

props: {
  theme: {
    type: Object,
    default: () => ({
      primaryColor: '#2196F3',
      textColor: '#333',
      borderColor: '#e0e0e0'
    })
  }
}

通过以上步骤，可以构建一个功能完整、可扩展的Vue日历组件。根据实际需求，可以继续添加更多高级功能如拖拽事件、多日历视图等。