当前位置：首页 > VUE

vue实现年历标记

2026-03-06 17:10:23VUE

实现年历标记的步骤

数据准备

创建一个数组存储需要标记的日期，每个日期对象包含日期和标记信息。

markedDates: [
  { date: '2023-10-01', mark: 'holiday' },
  { date: '2023-10-15', mark: 'meeting' }
]

日历组件渲染

使用v-for循环渲染月份，在每个月内部渲染日期格子。比较当前日期是否在标记数组中。

<div v-for="month in months" :key="month">
  <div class="month-title">{{ month }}</div>
  <div class="days-grid">
    <div 
      v-for="day in getDaysInMonth(month)" 
      :key="day"
      :class="{ 'marked': isMarked(month, day) }"
    >
      {{ day }}
    </div>
  </div>
</div>

标记判断方法

实现isMarked方法检查日期是否被标记，格式化日期与标记数组比较。

methods: {
  isMarked(month, day) {
    const dateStr = `${this.year}-${month}-${day}`;
    return this.markedDates.some(item => item.date === dateStr);
  }
}

样式处理

为标记日期添加特殊样式，通过CSS类名控制视觉效果。

.marked {
  background-color: #ffeb3b;
  position: relative;
}
.marked::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  transform: translateX(-50%);
}

月份导航

添加年份和月份切换功能，使用计算属性动态生成日历数据。

vue实现年历标记

computed: {
  months() {
    return Array.from({length: 12}, (_, i) => i + 1);
  }
}

完整示例

export default {
  data() {
    return {
      year: new Date().getFullYear(),
      markedDates: [
        { date: '2023-10-01', mark: 'holiday' },
        { date: '2023-10-15', mark: 'meeting' }
      ]
    }
  },
  methods: {
    getDaysInMonth(month) {
      return new Date(this.year, month, 0).getDate();
    },
    isMarked(month, day) {
      const dateStr = `${this.year}-${month}-${day}`;
      return this.markedDates.some(item => item.date === dateStr);
    }
  }
}