当前位置：首页 > VUE

vue如何实现日历

2026-02-20 11:38:55VUE

Vue 日历实现方法

使用第三方库（如 FullCalendar）

FullCalendar 是一个功能强大的日历库，支持 Vue 集成。安装依赖后，可以直接在组件中使用。

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

在 Vue 组件中引入并配置：

<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: 'dayGridMonth',
        events: [
          { title: 'Meeting', start: '2023-10-01' }
        ]
      }
    }
  }
}
</script>

自定义日历组件

手动实现一个基础日历，需要处理日期计算和渲染逻辑。

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">Previous</button>
      <h2>{{ currentMonth }}</h2>
      <button @click="nextMonth">Next</button>
    </div>
    <div class="days">
      <div v-for="day in days" :key="day" class="day-header">{{ day }}</div>
    </div>
    <div class="dates">
      <div v-for="date in visibleDates" :key="date.date" class="date" :class="{ 'other-month': !date.isCurrentMonth }">
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })
    },
    visibleDates() {
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth()
      const firstDay = new Date(year, month, 1)
      const lastDay = new Date(year, month + 1, 0)
      const prevDays = firstDay.getDay()
      const nextDays = 6 - lastDay.getDay()
      const dates = []

      for (let i = prevDays; i > 0; i--) {
        const date = new Date(year, month, -i + 1)
        dates.push({ day: date.getDate(), isCurrentMonth: false })
      }

      for (let i = 1; i <= lastDay.getDate(); i++) {
        dates.push({ day: i, isCurrentMonth: true })
      }

      for (let i = 1; i <= nextDays; i++) {
        const date = new Date(year, month + 1, i)
        dates.push({ day: date.getDate(), isCurrentMonth: false })
      }

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

<style>
.calendar {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
}
.date {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
}
.other-month {
  opacity: 0.5;
}
</style>

使用 Vuetify 的 v-calendar

如果项目使用 Vuetify，可以直接使用其内置的日历组件。

<template>
  <v-calendar
    :events="events"
    :now="today"
    :value="today"
    color="primary"
  ></v-calendar>
</template>

<script>
export default {
  data() {
    return {
      today: '2023-10-01',
      events: [
        {
          name: 'Meeting',
          start: '2023-10-01',
          end: '2023-10-01',
          color: 'blue'
        }
      ]
    }
  }
}
</script>