vue3全年日历组件

<template>
  <div class="calendar-container">
    <select v-model="selectedYear" @change="generateYearCalendar">
      <option v-for="year in yearsRange" :key="year" :value="year">{{ year }}</option>
    </select>
    <div class="calendar-grid">
      <div v-for="(month, index) in yearCalendar" :key="index" class="month">
        <div class="month-header">{{ monthNames[index] }}</div>
        <div class="weekdays">
          <div v-for="day in weekdays" :key="day">{{ day }}</div>
        </div>
        <div class="days">
          <div
            v-for="(date, idx) in month.days"
            :key="idx"
            :class="{'empty': !date, 'weekend': date && (idx % 7 === 0 || idx % 7 === 6)}"
          >
            {{ date || '' }}
          </div>
        </div>
      </div>
    </div>
    <button @click="saveCalendar">保存</button>
  </div>
</template>

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

export default {
  setup() {
    const currentYear = new Date().getFullYear();
    const selectedYear = ref(currentYear);
    const yearCalendar = ref([]);
    
    const monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    const weekdays = ["一", "二", "三", "四", "五", "六", "日"];
    
    const yearsRange = computed(() => {
      return Array.from({ length: 21 }, (_, i) => currentYear - 10 + i);
    });

    const generateYearCalendar = () => {
      yearCalendar.value = Array.from({ length: 12 }, (_, monthIndex) => {
        const days = [];
        const firstDayOfMonth = new Date(selectedYear.value, monthIndex, 1).getDay();
        const daysInMonth = new Date(selectedYear.value, monthIndex + 1, 0).getDate();
        
        for (let i = 0; i < (firstDayOfMonth + 6) % 7; i++) {
          days.push(null);
        }
        for (let day = 1; day <= daysInMonth; day++) {
          days.push(day);
        }
        return { days };
      });
    };

    const saveCalendar = () => {
      // 可以添加保存逻辑
      alert("保存日历！");
    };

    onMounted(() => {
      generateYearCalendar();
    });

    return {
      selectedYear,
      yearCalendar,
      monthNames,
      weekdays,
      yearsRange,
      generateYearCalendar,
      saveCalendar
    };
  }
};
</script>

<style scoped>
.calendar-container {
  max-width: 800px;
  margin: auto;
  text-align: center;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.month {
  border: 1px solid #ddd;
  padding: 10px;
}
.month-header {
  font-weight: bold;
  margin-bottom: 5px;
}
.weekdays, .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.empty {
  background-color: #f9f9f9;
}
.weekend {
  color: red;
}
</style>