当前位置：首页 > VUE

vue实现日历

2026-01-13 02:28:46VUE

Vue 实现日历组件

使用 Vue 实现日历组件可以通过自定义开发或借助第三方库完成。以下是两种常见方法：

方法一：自定义日历组件

创建基础日历结构，利用 Vue 的响应式特性动态渲染日期。核心逻辑包括计算月份天数、处理日期切换等。

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上个月</button>
      <h3>{{ currentYear }}年{{ currentMonth + 1 }}月</h3>
      <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': date.getMonth() !== currentMonth,
          'today': isToday(date)
        }"
        @click="selectDate(date)"
      >
        {{ date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      selectedDate: null
    }
  },
  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 prevMonthDays = firstDay.getDay()
      for (let i = prevMonthDays - 1; i >= 0; i--) {
        dates.push(new Date(this.currentYear, this.currentMonth - 1, lastDay.getDate() - i))
      }

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

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

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

<style>
.calendar {
  width: 300px;
  font-family: Arial;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.days, .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.dates div {
  padding: 10px;
  cursor: pointer;
}
.other-month {
  color: #ccc;
}
.today {
  background-color: #eee;
}
</style>

方法二：使用第三方库

对于更复杂的日历需求，可以使用成熟的 Vue 日历组件库：

V-Calendar: 功能丰富，支持日期选择、范围选择、日期禁用等
```
npm install v-calendar
```
Vue2-Datepicker: 轻量级日期选择器
```
npm install vue2-datepicker
```
FullCalendar: 功能全面的日历组件，支持事件显示
```
npm install @fullcalendar/vue
```

以 V-Calendar 为例的基本用法：

<template>
  <v-calendar :attributes="attrs" />
</template>

<script>
import VCalendar from 'v-calendar'

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