使用Vue3创建日历组件，支持事件管理

在现代前端开发中，创建一个即时动态的日历组件是非常常见的需求。无论是用于任务管理、日程安排，还是其他应用场景，有一个强大而灵活的日历组件都能够显著提高用户体验。本文将通过Vue 3的setup语法糖来创建一个日历组件，支持事件管理，例如添加、删除和查看事件。

1. 环境准备

在开始之前，请确保您已经安装了Node.js和Vue CLI。您可以通过以下命令全局安装Vue CLI：

npm -g @vue/cli

接下来，创建一个新的Vue 3项目：

vue create calendar-app

选择您需要的预设选项，然后进入项目目录：

cd calendar-app

安装Vue Router，用于页面导航（如果您希望使用路由导航）：

vue add router

2. 创建日历组件

我们将创建一个名为Calendar.vue的新组件。在src/components目录下创建一个新的文件Calendar.vue。

<template>
  <div class="calendar">
    <header>
      <h2>{{ currentMonth }}</h2>
      <button @click="prevMonth">Previous</button>
      <button @click="nextMonth">Next</button>
      <button @click="showEventModal = true">Add Event</button>
    </header>
    <div class="days-of-week">
      <div class="day" v-for="day in daysOfWeek" :key="day">{{ day }}</div>
    </div>
    <div class="days">
      <div class="day" 
           v-for="date in getDatesInCurrentMonth()" 
           :key="date" 
           @click="selectDate(date)">
        <span>{{ date.getDate() }}</span>
        <div v-if="getEventsForDate(date).length">
          <ul>
            <li v-for="event in getEventsForDate(date)" :key="event.id">{{ event.title }}</li>
          </ul>
        </div>
      </div>
    </div>

    <modal v-if="showEventModal" @close="showEventModal = false">
      <template #header>
        <h3>Add Event</h3>
      </template>
      <template #body>
        <input v-model="newEventTitle" placeholder="Event Title" />
        <button @click="addEvent">Add</button>
      </template>
    </modal>
  </div>
</template>

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

export default {
  setup() {
    const currentDate = ref(new Date());
    const showEventModal = ref(false);
    const newEventTitle = ref('');
    const events = ref([]);

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

    const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    const getDatesInCurrentMonth = () => {
      const dates = [];
      const year = currentDate.value.getFullYear();
      const month = currentDate.value.getMonth();
      const totalDays = new Date(year, month + 1, 0).getDate();
      for (let day = 1; day <= totalDays; day++) {
        dates.push(new Date(year, month, day));
      }
      return dates;
    };

    const prevMonth = () => {
      currentDate.value.setMonth(currentDate.value.getMonth() - 1);
    };

    const nextMonth = () => {
      currentDate.value.setMonth(currentDate.value.getMonth() + 1);
    };

    const selectDate = (date) => {
      const selectedDate = date.toISOString().split('T')[0];
      const eventsForDate = getEventsForDate(date);
      console.log(`Events for ${selectedDate}:`, eventsForDate);
    };

    const addEvent = () => {
      const date = new Date(); // 假设事件在当前日期
      if(newEventTitle.value) {
        events.value.push({ id: Date.now(), title: newEventTitle.value, date: date.toISOString().split('T')[0] });
        newEventTitle.value = '';
        showEventModal.value = false;
      }
    };

    const getEventsForDate = (date) => {
      const selectedDate = date.toISOString().split('T')[0];
      return events.value.filter(event => event.date === selectedDate);
    };

    return {
      currentMonth,
      daysOfWeek,
      getDatesInCurrentMonth,
      prevMonth,
      nextMonth,
      selectDate,
      showEventModal,
      newEventTitle,
      addEvent,
      getEventsForDate
    };
  }
}
</script>

<style scoped>
.calendar {
  max-width: 600px;
  margin: auto;
  text-align: center;
}
.days-of-week, .days {
  display: flex;
  flex-wrap: wrap;
}
.day {
  flex: 1 0 14%;
  border: 1px solid #ddd;
  padding: 10px;
  cursor: pointer;
}
.day:hover {
  background-color: #f0f0f0;
}
</style>

3. 组件解释

• 状态管理：我们通过ref和computed来管理状态和计算属性。currentDate跟踪当前的月份，showEventModal控制模态框的显示状态，而newEventTitle存储正在创建的事件的标题。

• 月份切换：prevMonth和nextMonth函数用于改变当前月份。

• 日期生成：getDatesInCurrentMonth()生成当前月份的所有日期，并返回一个日期数组。

• 事件管理：通过events数组存储所有事件。addEvent方法创建新事件，而getEventsForDate用于获取特定日期的事件。

• 模态框：我们可以轻松添加事件。modal组件需要自己实现或使用已有的UI库。

4. 模态框组件

为了使事件添加功能能够完善，我们需要添加一个简单的模态框组件。可以在src/components目录下创建一个简单的模态框Modal.vue。

<template>
  <div class="modal-overlay" @click.self="$emit('close')">
    <div class="modal-content">
      <slot name="header"></slot>
      <slot name="body"></slot>
      <button @click="$emit('close')">Close</button>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>
`

## 5. 整合组件

最后，在`App.vue`中导入并使用`Calendar`组件：

```vue
<template>
  <div id="app">
    <Calendar />
  </div>
</template>

<script>
import Calendar from './components/Calendar.vue';

export default {
  components: {
    Calendar
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

6. 运行项目

完成上述步骤后，您可以启动开发服务器来查看效果：

npm run serve

访问http://localhost:8080，您将能够看到一个简单的日历组件，支持简单的事件管理。

总结

通过以上步骤，我们创建了一个简单的日历组件，具备基本的事件管理功能。您可以基于此组件扩展更多功能，例如事件查看、编辑或删除，提高组件的实用性。此外，利用Vue 3的特性，如Composition API和setup语法糖，使得组件的逻辑更为清晰和易于管理。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作