当前位置：首页 > VUE

vue实现日历方案

2026-01-18 14:48:36VUE

vue实现日历方案

使用第三方库（推荐方案）

推荐使用成熟的日历组件库，如v-calendar或fullcalendar-vue，它们提供丰富的功能和定制选项。

安装v-calendar：

npm install v-calendar

基础使用示例：

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

<script>
import { ref } from 'vue'
import VCalendar from 'v-calendar'

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

自定义日历组件

如需完全自定义，可以手动实现基础日历逻辑：

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">←</button>
      <h3>{{ currentMonth }}</h3>
      <button @click="nextMonth">→</button>
    </div>
    <div class="days">
      <div v-for="day in dayNames" :key="day" class="day-name">{{ day }}</div>
    </div>
    <div class="dates">
      <div 
        v-for="date in visibleDates"
        :key="date.date"
        :class="['date', { today: date.isToday }]"
      >
        {{ date.day }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const currentDate = ref(new Date())

    const dayNames = ['日', '一', '二', '三', '四', '五', '六']

    const currentMonth = computed(() => {
      return currentDate.value.toLocaleString('default', { 
        month: 'long', 
        year: 'numeric' 
      })
    })

    const visibleDates = computed(() => {
      const year = currentDate.value.getFullYear()
      const month = currentDate.value.getMonth()
      const firstDay = new Date(year, month, 1)
      const lastDay = new Date(year, month + 1, 0)

      const dates = []
      const today = new Date()

      // 上月最后几天
      for (let i = firstDay.getDay(); i > 0; i--) {
        const date = new Date(year, month, -i + 1)
        dates.push({
          date: date.toISOString(),
          day: date.getDate(),
          isToday: false
        })
      }

      // 当月日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(year, month, i)
        dates.push({
          date: date.toISOString(),
          day: date.getDate(),
          isToday: date.getDate() === today.getDate() && 
                  date.getMonth() === today.getMonth() && 
                  date.getFullYear() === today.getFullYear()
        })
      }

      // 下月前几天
      const remaining = 42 - dates.length
      for (let i = 1; i <= remaining; i++) {
        const date = new Date(year, month + 1, i)
        dates.push({
          date: date.toISOString(),
          day: date.getDate(),
          isToday: false
        })
      }

      return dates
    })

    function prevMonth() {
      currentDate.value = new Date(
        currentDate.value.getFullYear(),
        currentDate.value.getMonth() - 1,
        1
      )
    }

    function nextMonth() {
      currentDate.value = new Date(
        currentDate.value.getFullYear(),
        currentDate.value.getMonth() + 1,
        1
      )
    }

    return {
      currentDate,
      currentMonth,
      dayNames,
      visibleDates,
      prevMonth,
      nextMonth
    }
  }
}
</script>

<style>
.calendar {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}
.date {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.date.today {
  background: #3490dc;
  color: white;
}
.day-name {
  font-weight: bold;
}
</style>