当前位置：首页 > VUE

vue日历实现

2026-01-08 03:20:14VUE

实现基础日历布局

使用Vue的模板语法构建日历的基本HTML结构。一个典型的日历包含星期标题和日期格子，可以通过v-for循环生成。月份切换功能通过计算属性动态更新日期数组。

<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="(date, index) in visibleDates" 
        :key="index"
        :class="{ 'other-month': !date.isCurrentMonth }"
      >
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

处理日期数据逻辑

在Vue组件的data或setup中定义核心变量，使用JavaScript的Date对象进行日期计算。通过计算属性生成当前月份需要显示的日期数组，包括上个月末和下个月初的日期以保证日历表格完整。

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      weekdays: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  computed: {
    currentYear() {
      return this.currentDate.getFullYear()
    },
    currentMonth() {
      return this.currentDate.getMonth() + 1
    },
    visibleDates() {
      // 计算当前月份第一天和最后一天
      const firstDay = new Date(this.currentYear, this.currentDate.getMonth(), 1)
      const lastDay = new Date(this.currentYear, this.currentDate.getMonth() + 1, 0)

      // 生成日期数组
      let dates = []
      // 添加上个月末尾的日期
      // 添加当前月份的日期
      // 添加下个月开始的日期

      return dates
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = new Date(this.currentYear, this.currentDate.getMonth() - 1, 1)
    },
    nextMonth() {
      this.currentDate = new Date(this.currentYear, this.currentDate.getMonth() + 1, 1)
    }
  }
}
</script>

添加样式和交互效果

使用CSS美化日历组件，添加悬停效果和当前日期高亮。可以通过动态class绑定实现特殊日期的样式区分，如周末、节假日或选中日期。

<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;
}

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

.weekdays div {
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.days div {
  padding: 10px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #eee;
}

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

.other-month {
  color: #ccc;
}

.today {
  background-color: #e6f7ff;
  font-weight: bold;
}
</style>

扩展功能实现

在基础日历上添加事件处理功能，允许用户选择日期并显示相关事件。可以使用Vue的事件系统处理日期点击，并通过组件通信将选中日期传递给父组件。

methods: {
  selectDate(date) {
    if (date.isCurrentMonth) {
      this.selectedDate = date
      this.$emit('date-selected', date)
    }
  }
}

使用第三方库优化

对于更复杂的日历需求，可以考虑使用专门的Vue日历组件库，如v-calendar或fullcalendar-vue。这些库提供了丰富的功能如事件拖放、多视图切换等，可以显著减少开发时间。

安装v-calendar示例：

npm install v-calendar

基本使用：

import VCalendar from 'v-calendar'

// 在组件中
<template>
  <v-calendar :attributes='attrs' />
</template>

<script>
export default {
  data() {
    return {
      attrs: [
        {
          key: 'today',
          highlight: true,
          dates: new Date()
        }
      ]
    }
  }
}
</script>

vue日历实现