vue实现日历组件

Vue 日历组件实现方法

基础日历结构

使用Vue的响应式特性管理日期数据，核心逻辑包括月份切换和日期渲染。

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上个月</button>
      <h2>{{ currentYear }}年{{ currentMonth + 1 }}月</h2>
      <button @click="nextMonth">下个月</button>
    </div>
    <div class="days">
      <div v-for="day in ['日','一','二','三','四','五','六']" :key="day">{{ day }}</div>
    </div>
    <div class="dates">
      <div 
        v-for="date in visibleDates" 
        :key="date.getTime()"
        :class="{ 
          'other-month': !isCurrentMonth(date),
          'today': isToday(date)
        }"
        @click="selectDate(date)"
      >
        {{ date.getDate() }}
      </div>
    </div>
  </div>
</template>

核心逻辑实现

日期计算使用JavaScript的Date对象处理，注意月份从0开始计数。

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth()
    },
    visibleDates() {
      const dates = []
      const firstDay = new Date(this.currentYear, this.currentMonth, 1)
      const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0)

      // 上个月末尾几天
      const startDay = firstDay.getDay()
      for (let i = startDay - 1; i >= 0; i--) {
        const date = new Date(this.currentYear, this.currentMonth, -i)
        dates.push(date)
      }

      // 本月所有天
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(this.currentYear, this.currentMonth, i)
        dates.push(date)
      }

      // 下个月开头几天
      const endDay = lastDay.getDay()
      for (let i = 1; i <= 6 - endDay; i++) {
        const date = new Date(this.currentYear, this.currentMonth + 1, i)
        dates.push(date)
      }

      return dates
    }
  },
  methods: {
    isCurrentMonth(date) {
      return date.getMonth() === this.currentMonth
    },
    isToday(date) {
      const today = new Date()
      return date.getDate() === today.getDate() && 
             date.getMonth() === today.getMonth() && 
             date.getFullYear() === today.getFullYear()
    },
    prevMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth - 1, 1)
    },
    nextMonth() {
      this.currentDate = new Date(this.currentYear, this.currentMonth + 1, 1)
    },
    selectDate(date) {
      this.$emit('date-selected', date)
    }
  }
}
</script>

样式优化

使用CSS Grid布局实现整齐的日历排列，增强视觉效果。

<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, .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.days {
  font-weight: bold;
  text-align: center;
}

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

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

.other-month {
  color: #ccc;
}

.today {
  background-color: #4CAF50;
  color: white;
}
</style>

功能扩展建议

1. 添加事件标记功能，可在特定日期显示标记点
2. 实现日期范围选择，支持开始日期和结束日期选择
3. 添加国际化支持，显示不同语言的星期名称
4. 集成日期选择器，支持快捷选择特定日期
5. 添加动画效果，使月份切换更流畅

第三方库推荐

1. V-Calendar：功能丰富的日历组件库，支持多种显示模式和自定义
2. FullCalendar：专业级日历组件，适合复杂日程管理需求
3. Vue2-Calendar：轻量级组件，基本功能齐全
4. Vuetify Calendar：Material Design风格的日历组件

以上实现方案提供了基础的日历功能，可根据实际需求进行扩展和定制。核心思路是通过Vue的响应式数据管理日期状态，利用计算属性动态生成可见日期数组，再通过模板渲染出日历界面。