当前位置：首页 > VUE

vue实现值班日历

2026-01-20 20:50:05VUE

Vue 实现值班日历的方法

使用 FullCalendar 插件

FullCalendar 是一个功能强大的日历插件，支持 Vue 集成。安装依赖：

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

在 Vue 组件中引入并使用：

<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',
        events: [
          { title: '张三值班', start: '2023-10-01' },
          { title: '李四值班', start: '2023-10-02' }
        ]
      }
    }
  }
}
</script>

自定义实现日历组件

创建一个基础的日历组件，通过计算日期数组渲染日历格子：

<template>
  <div class="calendar">
    <div class="header">
      <button @click="prevMonth">上个月</button>
      <h3>{{ currentYear }}年{{ currentMonth + 1 }}月</h3>
      <button @click="nextMonth">下个月</button>
    </div>
    <div class="days">
      <div v-for="day in dayNames" :key="day" class="day-name">{{ day }}</div>
    </div>
    <div class="dates">
      <div 
        v-for="date in dates" 
        :key="date.date"
        :class="['date', { 'other-month': !date.isCurrentMonth }]"
      >
        {{ date.date.getDate() }}
        <div v-if="getDuty(date.date)" class="duty">
          {{ getDuty(date.date) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth(),
      dayNames: ['日', '一', '二', '三', '四', '五', '六'],
      dutyData: {
        '2023-10-01': '张三',
        '2023-10-02': '李四'
      }
    }
  },
  computed: {
    dates() {
      // 计算当前月所有日期（包括前后月的补位）
    }
  },
  methods: {
    getDuty(date) {
      const key = date.toISOString().split('T')[0]
      return this.dutyData[key]
    }
  }
}
</script>

使用 Vuetify 的 v-calendar

如果项目使用 Vuetify，可以直接使用其内置的日历组件：

<template>
  <v-calendar
    :events="events"
    type="month"
  ></v-calendar>
</template>

<script>
export default {
  data() {
    return {
      events: [
        {
          name: '张三值班',
          start: '2023-10-01',
          color: 'blue'
        }
      ]
    }
  }
}
</script>