当前位置：首页 > VUE

vue实现mac日历

2026-01-17 10:11:50VUE

Vue 实现 Mac 日历功能

要在 Vue 中实现类似 Mac 日历的功能，可以结合第三方库或自定义组件开发。以下是两种常见方法：

使用 FullCalendar 库

FullCalendar 是一个功能强大的日历库，支持月视图、周视图和日视图，类似 Mac 日历的布局。

vue实现mac日历

安装 FullCalendar：

vue实现mac日历

npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

示例代码：

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

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

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,dayGridWeek,dayGridDay'
        },
        events: [
          { title: 'Meeting', start: new Date() }
        ],
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      alert('Date clicked: ' + arg.dateStr)
    },
    handleEventClick(arg) {
      alert('Event clicked: ' + arg.event.title)
    }
  }
}
</script>

自定义日历组件

如果需要更贴近 Mac 风格的设计，可以自定义实现：

<template>
  <div class="mac-calendar">
    <div class="calendar-header">
      <button @click="prevMonth">←</button>
      <h3>{{ currentMonth }}</h3>
      <button @click="nextMonth">→</button>
    </div>
    <div class="calendar-grid">
      <div v-for="day in days" :key="day" class="day-header">
        {{ day }}
      </div>
      <div 
        v-for="date in visibleDates" 
        :key="date.toISOString()"
        :class="['date-cell', { 'current-month': isCurrentMonth(date) }]"
        @click="selectDate(date)"
      >
        {{ date.getDate() }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
      days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
  },
  computed: {
    currentMonth() {
      return this.currentDate.toLocaleString('default', { month: 'long', year: 'numeric' })
    },
    visibleDates() {
      const start = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1)
      const end = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0)

      // 获取当月第一天是星期几
      const startDay = start.getDay()
      // 获取当月最后一天是星期几
      const endDay = end.getDay()

      // 计算需要显示的上个月和下个月的日期
      const prevMonthDays = startDay
      const nextMonthDays = 6 - endDay

      const dates = []

      // 添加上个月的日期
      for (let i = prevMonthDays; i > 0; i--) {
        const date = new Date(start)
        date.setDate(-i + 1)
        dates.push(date)
      }

      // 添加当月的日期
      for (let i = 1; i <= end.getDate(); i++) {
        const date = new Date(start)
        date.setDate(i)
        dates.push(date)
      }

      // 添加下个月的日期
      for (let i = 1; i <= nextMonthDays; i++) {
        const date = new Date(end)
        date.setDate(end.getDate() + i)
        dates.push(date)
      }

      return dates
    }
  },
  methods: {
    isCurrentMonth(date) {
      return date.getMonth() === this.currentDate.getMonth()
    },
    prevMonth() {
      this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1)
    },
    nextMonth() {
      this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1)
    },
    selectDate(date) {
      this.$emit('date-selected', date)
    }
  }
}
</script>

<style>
.mac-calendar {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}

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

.day-header {
  text-align: center;
  font-weight: bold;
  padding: 5px;
}

.date-cell {
  text-align: center;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.date-cell:hover {
  background-color: #e0e0e0;
}

.current-month {
  background-color: #fff;
}

.date-cell:not(.current-month) {
  color: #aaa;
}
</style>