当前位置：首页 > VUE

vue实现事件日历

2026-02-10 20:21:28VUE

实现事件日历的基本思路

使用Vue实现事件日历需要结合日期处理库（如date-fns或dayjs）和组件化开发。核心功能包括：日期渲染、事件管理、交互逻辑（如点击添加事件）。

安装依赖

推荐使用dayjs处理日期，轻量且API友好：

npm install dayjs

基础日历组件结构

创建Calendar.vue文件，定义月份切换和日期网格：

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上一月</button>
      <h3>{{ currentMonth }}</h3>
      <button @click="nextMonth">下一月</button>
    </div>
    <div class="days-grid">
      <div v-for="day in days" :key="day.date" class="day-cell">
        {{ day.date }}
        <div v-for="event in day.events" :key="event.id">{{ event.title }}</div>
      </div>
    </div>
  </div>
</template>

日期数据处理

在script部分实现月份切换和日期生成逻辑：

import dayjs from 'dayjs';

export default {
  data() {
    return {
      currentDate: dayjs(),
      events: [
        { id: 1, title: '会议', date: '2023-10-15' },
        { id: 2, title: '生日', date: '2023-10-20' }
      ]
    };
  },
  computed: {
    currentMonth() {
      return this.currentDate.format('YYYY年MM月');
    },
    days() {
      const startOfMonth = this.currentDate.startOf('month');
      const endOfMonth = this.currentDate.endOf('month');
      const days = [];

      // 填充当月日期
      let date = startOfMonth;
      while (date.isBefore(endOfMonth) || date.isSame(endOfMonth)) {
        days.push({
          date: date.date(),
          events: this.events.filter(e => dayjs(e.date).isSame(date, 'day'))
        });
        date = date.add(1, 'day');
      }

      return days;
    }
  },
  methods: {
    prevMonth() {
      this.currentDate = this.currentDate.subtract(1, 'month');
    },
    nextMonth() {
      this.currentDate = this.currentDate.add(1, 'month');
    }
  }
};

添加事件交互

扩展组件以支持添加事件：

<template>
  <div class="day-cell" @click="openAddEvent(day)">
    <!-- 原有内容 -->
    <div v-if="selectedDay === day.date" class="event-form">
      <input v-model="newEventTitle" placeholder="事件标题">
      <button @click.stop="addEvent">添加</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDay: null,
      newEventTitle: ''
    };
  },
  methods: {
    openAddEvent(day) {
      this.selectedDay = day.date;
    },
    addEvent() {
      if (this.newEventTitle) {
        this.events.push({
          id: Date.now(),
          title: this.newEventTitle,
          date: this.currentDate.set('date', this.selectedDay).format('YYYY-MM-DD')
        });
        this.selectedDay = null;
        this.newEventTitle = '';
      }
    }
  }
};
</script>

样式优化

添加基础样式确保日历可读性：

.calendar {
  font-family: Arial;
  width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.day-cell {
  min-height: 80px;
  border: 1px solid #eee;
  padding: 4px;
}
.day-cell:hover {
  background-color: #f5f5f5;
}
.event-form {
  margin-top: 4px;
}