vue页面实现日历

实现Vue日历组件的基础方法

使用Vue实现日历功能可以通过原生开发或借助第三方库完成。以下是两种常见实现方式：

原生实现方案 创建Vue组件，计算当前月份的天数及排列方式：

<template>
  <div class="calendar">
    <div class="header">{{ currentMonth }}</div>
    <div class="days">
      <div v-for="day in dayNames" :key="day">{{ day }}</div>
    </div>
    <div class="dates">
      <div 
        v-for="date in visibleDates" 
        :key="date.getTime()"
        :class="{ 'other-month': !isCurrentMonth(date) }"
      >
        {{ date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      dayNames: ['日', '一', '二', '三', '四', '五', '六']
    }
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { 
        month: 'long', 
        year: 'numeric' 
      })
    },
    visibleDates() {
      const start = this.getMonthStart()
      const end = this.getMonthEnd()
      const dates = []

      for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
        dates.push(new Date(d))
      }

      return dates
    }
  },
  methods: {
    isCurrentMonth(date) {
      return date.getMonth() === this.currentDate.getMonth()
    },
    getMonthStart() {
      const date = new Date(this.currentDate)
      date.setDate(1)
      const day = date.getDay()
      date.setDate(date.getDate() - day)
      return date
    },
    getMonthEnd() {
      const date = new Date(this.currentDate)
      date.setMonth(date.getMonth() + 1)
      date.setDate(0)
      const day = date.getDay()
      date.setDate(date.getDate() + (6 - day))
      return date
    }
  }
}
</script>

使用第三方库的实现方案

对于更复杂的日历需求，可以考虑以下流行库：

FullCalendar集成 安装依赖：

npm install @fullcalendar/vue @fullcalendar/daygrid

基础实现代码：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin],
        initialView: 'dayGridMonth',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,dayGridWeek'
        },
        events: [
          { title: '会议', start: '2023-05-01' },
          { title: '生日', start: '2023-05-10' }
        ]
      }
    }
  }
}
</script>

日历功能扩展实现

添加事件管理 在原生实现中增加事件处理：

methods: {
  handleDateClick(date) {
    this.selectedDate = date
    this.showEventModal = true
  },
  addEvent(event) {
    this.events.push({
      date: this.selectedDate,
      title: event.title,
      description: event.description
    })
  }
}

实现月视图切换 添加月份导航功能：

methods: {
  prevMonth() {
    this.currentDate.setMonth(this.currentDate.getMonth() - 1)
    this.currentDate = new Date(this.currentDate)
  },
  nextMonth() {
    this.currentDate.setMonth(this.currentDate.getMonth() + 1)
    this.currentDate = new Date(this.currentDate)
  }
}

样式优化建议

基础日历样式示例：

.calendar {
  width: 350px;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 10px;
  font-size: 1.2em;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 5px 0;
}

.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.dates > div {
  padding: 10px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

.dates > div.other-month {
  opacity: 0.3;
}

.dates > div:hover {
  background-color: #eee;
}

以上方案可根据实际需求进行组合或调整，原生实现适合简单需求，第三方库方案适合需要丰富功能的场景。