vue3全年日历组件

最新推荐文章于 2025-10-20 15:16:44 发布

原创

最新推荐文章于 2025-10-20 15:16:44 发布 · 491 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

<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>
    <