当前位置：首页 > VUE

vue怎么实现日历

2026-01-08 08:06:10VUE

实现日历组件的基本方法

使用Vue实现日历组件可以通过以下步骤完成。这里提供一个基础的实现思路，结合Vue 3的Composition API和模板语法。

安装依赖（如需要）

npm install date-fns  # 推荐使用date-fns处理日期

基础日历逻辑

创建一个日历组件，显示当前月份的日期格子，并支持切换月份。

<template>
  <div class="calendar">
    <div class="calendar-header">
      <button @click="prevMonth">上一月</button>
      <h2>{{ currentMonth }}</h2>
      <button @click="nextMonth">下一月</button>
    </div>
    <div class="calendar-weekdays">
      <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
    </div>
    <div class="calendar-days">
      <div 
        v-for="day in daysInMonth" 
        :key="day.date"
        :class="{ 'other-month': !day.isCurrentMonth, 'today': day.isToday }"
        @click="selectDate(day.date)"
      >
        {{ day.day }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isToday, addMonths, subMonths } from 'date-fns';

const currentDate = ref(new Date());
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];

const currentMonth = computed(() => format(currentDate.value, 'yyyy年MM月'));

const daysInMonth = computed(() => {
  const start = startOfMonth(currentDate.value);
  const end = endOfMonth(currentDate.value);
  const days = eachDayOfInterval({ start, end });

  return days.map(date => ({
    date,
    day: format(date, 'd'),
    isCurrentMonth: true,
    isToday: isToday(date)
  }));
});

const prevMonth = () => {
  currentDate.value = subMonths(currentDate.value, 1);
};

const nextMonth = () => {
  currentDate.value = addMonths(currentDate.value, 1);
};

const selectDate = (date) => {
  console.log('Selected date:', format(date, 'yyyy-MM-dd'));
};
</script>

<style>
.calendar {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.weekday {
  text-align: center;
  font-weight: bold;
}
.calendar-days div {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.other-month {
  opacity: 0.5;
}
.today {
  background-color: #eee;
  border-radius: 50%;
}
</style>