VUE 3 TS 自定义 Calendar 日历 可以点击选择 和 滑动选择日期 夸月选择

在Vue 3和TypeScript中创建一个可点击和可滑动选择日期的日历组件，你可以使用以下示例代码作为起点：

<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-weekdays">
      <div v-for="weekday in weekdays" :key="weekday">{{ weekday }}</div>
    </div>
    <div class="calendar-days">
      <div
        v-for="day in daysInMonth"
        :key="day"
        :class="{ 'calendar-day-selected': isSelected(day) }"
        @click="selectDay(day)"
        @touchstart="startTouch(day)"
        @touchmove="moveTouch"
        @touchend="endTouch"
      >
        {{ day }}
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const currentYear = ref(new Date().getFullYear());
    const currentMonth = ref(new Date().getMonth() + 1);
    const selectedDay = ref(new Date().getDate());
    const startX = ref(0);
 
    const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    const daysInMonth = ref<number[]>([]);
 
    const isSelected = (day: number) => selectedDay.value === day;
 
    const selectDay = (day: number) => {
      selectedDay.value = day;
    };
 
    const startTouch = (day: number) => {
      startX.value = event.touches[0].clientX;
      selectedDay.value = day;
    };
 
    const moveTouch = (day: number) => {
      const currentX = event.touches[0].clientX;
      if (currentX > startX.value) {
        // Swipe right
        selectDay(day + 1);
      } else if (currentX < startX.value) {
        // Swipe left
        selectDay(day - 1);
      }
      startX.value = currentX;
    };
 
    const endTouch = () => {
      startX.value = 0;
    };
 
    const prevMonth = () => {
      if (currentMonth.value === 1) {
        currentYear.value--;
        currentMonth.value = 12;
      } else {
        currentMonth.value--;
      }
      generateDaysInMonth();
    };
 
    const nextMonth = () => {
      if (currentMonth.value =