vue日程管理 vue日历日程 日程提醒

要实现一个基本的Vue日程管理日历，你可以使用第三方库如vue-cal或者从头开始编写组件。以下是一个简单的Vue日程管理日历组件的示例代码：

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">&lt;</button>
      <span>{{ currentMonth }} {{ currentYear }}</span>
      <button @click="nextMonth">&gt;</button>
    </div>
    <div class="calendar-body">
      <div class="day-header">Sun</div>
      <div class="day-header">Mon</div>
      <div class="day-header">Tue</div>
      <div class="day-header">Wed</div>
      <div class="day-header">Thu</div>
      <div class="day-header">Fri</div>
      <div class="day-header">Sat</div>
      <div v-for="day in days" :key="day.date" class="day">
        <span>{{ day.day }}</span>
        <span v-for="event in day.events" :key="event.id" class="event" :style="{ backgroundColor: event.color }">{{ event.title }}</span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      daysInMonth: new Date(this.currentYear, this.currentMonth, 0).getDate(),
      days: [], // 初始化日期数组
    };
  },
  methods: {
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }
      this.generateDays();
    },
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }
      this.generateDays();
    },
    generateDays() {
      this.days = [];
      const firstDayOfMonth = new Date(this.currentYear, this.currentMonth - 1, 1);
      const daysInLastMonth = new Date(this.currentYear, this.currentMonth - 1, 0).getDate();
      const dayOffset = firstDayOfMonth.getDay() - 1; // 0 表示星期日
 
      for (let i = 0; i < dayOffset; i++) {
        this.days.push({
          date: daysInLastMonth - i,
          day: null,
        });
      }
 
      for (let i = 1; i <= this.daysInMonth; i++) {
        this.days.push({
          date: i,
          day: i,
          events: [], // 假定事件数组
        });
      }
    },
  },
  mounted() {
    this.generateDays();
  },
};
</script>
 
<style scoped>
.calendar {
  width: 400px;
  border: 1px solid #ddd;
  border-radius: 4p