当前位置：首页 > VUE

Vue实现日历日程

2026-01-19 07:03:56VUE

Vue 实现日历日程

使用第三方库（如 FullCalendar）

FullCalendar 是一个功能强大的日历库，支持 Vue 集成。安装依赖：

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

引入并配置组件：

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

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

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        events: [
          { title: '会议', start: '2023-10-10' },
          { title: '出差', start: '2023-10-15', end: '2023-10-17' }
        ],
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      alert('点击日期: ' + arg.dateStr)
    },
    handleEventClick(arg) {
      alert('点击事件: ' + arg.event.title)
    }
  }
}
</script>

自定义日历组件

如果不需要复杂功能，可以手动实现基础日历。以下是一个简单示例：

<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 days" :key="day" class="day-header">{{ day }}</div>
    </div>
    <div class="dates">
      <div 
        v-for="date in visibleDates" 
        :key="date.date"
        :class="['date', { 'current-month': date.isCurrentMonth }]"
        @click="selectDate(date)"
      >
        {{ date.date }}
        <div v-if="hasEvent(date)" class="event-dot"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      days: ['日', '一', '二', '三', '四', '五', '六'],
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      events: [
        { date: '2023-10-15', title: '项目会议' },
        { date: '2023-10-20', title: '团队聚餐' }
      ]
    }
  },
  computed: {
    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--) {
        const date = new Date(this.currentYear, this.currentMonth, -i)
        dates.push({
          date: date.getDate(),
          fullDate: date,
          isCurrentMonth: false
        })
      }

      // 当前月
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const date = new Date(this.currentYear, this.currentMonth, i)
        dates.push({
          date: i,
          fullDate: date,
          isCurrentMonth: true
        })
      }

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

      return dates
    }
  },
  methods: {
    prevMonth() {
      if (this.currentMonth === 0) {
        this.currentYear--
        this.currentMonth = 11
      } else {
        this.currentMonth--
      }
    },
    nextMonth() {
      if (this.currentMonth === 11) {
        this.currentYear++
        this.currentMonth = 0
      } else {
        this.currentMonth++
      }
    },
    selectDate(date) {
      if (date.isCurrentMonth) {
        console.log('选中日期:', date.fullDate)
      }
    },
    hasEvent(date) {
      if (!date.isCurrentMonth) return false
      const dateStr = date.fullDate.toISOString().split('T')[0]
      return this.events.some(event => event.date === dateStr)
    }
  }
}
</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);
  gap: 5px;
}
.date {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}
.date.current-month {
  background: #f0f0f0;
}
.date:hover {
  background: #e0e0e0;
}
.event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f00;
  margin-top: 2px;
}
</style>