当前位置：首页 > VUE

vue实现全年日历功能

2026-01-20 05:33:20VUE

实现全年日历功能

在Vue中实现全年日历功能，可以通过组合多个月份日历组件或使用第三方库来简化开发。以下是两种常见方法：

使用第三方库（如FullCalendar）

安装FullCalendar Vue组件：

npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid

基础实现代码：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridYear',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridYear,dayGridMonth,dayGridWeek'
        }
      }
    }
  }
}
</script>

自定义全年日历实现

如果需要完全自定义实现，可以创建月份组件并循环渲染12个月：

月份组件（MonthCalendar.vue）:

<template>
  <div class="month-calendar">
    <h3>{{ monthName }} {{ year }}</h3>
    <div class="weekdays">
      <div v-for="day in weekdayNames" :key="day">{{ day }}</div>
    </div>
    <div class="days">
      <div 
        v-for="(day, index) in days" 
        :key="index"
        :class="{ 'other-month': !day.inMonth }"
      >
        {{ day.date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    year: Number,
    month: Number
  },
  computed: {
    monthName() {
      return new Date(this.year, this.month).toLocaleString('default', { month: 'long' })
    },
    weekdayNames() {
      return ['日', '一', '二', '三', '四', '五', '六']
    },
    days() {
      const firstDay = new Date(this.year, this.month, 1)
      const lastDay = new Date(this.year, this.month + 1, 0)
      const days = []

      // 上个月的最后几天
      const startDayOfWeek = firstDay.getDay()
      for (let i = 0; i < startDayOfWeek; i++) {
        const date = new Date(this.year, this.month, -i)
        days.unshift({ date, inMonth: false })
      }

      // 当前月的所有天
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(this.year, this.month, i)
        days.push({ date, inMonth: true })
      }

      // 下个月的前几天（补全最后一周）
      const endDayOfWeek = lastDay.getDay()
      for (let i = 1; i < 7 - endDayOfWeek; i++) {
        const date = new Date(this.year, this.month + 1, i)
        days.push({ date, inMonth: false })
      }

      return days
    }
  }
}
</script>

<style>
.month-calendar {
  display: inline-block;
  width: 300px;
  margin: 10px;
}
.weekdays, .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.other-month {
  color: #ccc;
}
</style>

全年日历组件（YearCalendar.vue）:

<template>
  <div class="year-calendar">
    <MonthCalendar 
      v-for="month in 12" 
      :key="month" 
      :year="currentYear" 
      :month="month - 1" 
    />
  </div>
</template>

<script>
import MonthCalendar from './MonthCalendar.vue'

export default {
  components: {
    MonthCalendar
  },
  data() {
    return {
      currentYear: new Date().getFullYear()
    }
  }
}
</script>

<style>
.year-calendar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
</style>

功能扩展建议

日期点击事件：在MonthCalendar组件中添加日期点击事件处理
```
<div 
@click="$emit('date-click', day.date)"

>
```
国际化支持：使用Vue I18n来支持多语言月份和星期显示
节假日标记：在days计算属性中添加节假日判断逻辑
响应式布局：根据屏幕尺寸调整每月日历的显示大小和排列方式