当前位置：首页 > VUE

vue实现日历人员值班

2026-01-19 23:15:39VUE

实现日历人员值班功能

日历人员值班功能可以通过Vue结合第三方日历组件或自定义实现。以下是一种基于FullCalendar的实现方案。

安装依赖

需要安装@fullcalendar/vue及相关插件：

vue实现日历人员值班

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

基本组件结构

创建一个Vue组件来承载日历功能：

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

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

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek'
        },
        events: [
          {
            title: '张三值班',
            start: '2023-11-01',
            end: '2023-11-02',
            color: '#ff9f89'
          },
          {
            title: '李四值班',
            start: '2023-11-05',
            end: '2023-11-07',
            color: '#f6c3d0'
          }
        ],
        editable: true,
        selectable: true,
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      const name = prompt('输入值班人员姓名')
      if (name) {
        this.calendarOptions.events.push({
          title: name + '值班',
          start: arg.date,
          allDay: arg.allDay,
          color: this.getRandomColor()
        })
      }
    },
    handleEventClick(info) {
      if (confirm('确定要删除这个值班安排吗？')) {
        info.event.remove()
      }
    },
    getRandomColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16)
    }
  }
}
</script>

数据持久化

通常需要将值班数据保存到后端：

vue实现日历人员值班

methods: {
  async saveDutySchedule() {
    try {
      const response = await axios.post('/api/duty-schedule', {
        events: this.calendarOptions.events
      })
      console.log('保存成功', response.data)
    } catch (error) {
      console.error('保存失败', error)
    }
  }
}

高级功能实现

实现人员分组和批量分配：

data() {
  return {
    staffGroups: [
      { id: 1, name: '早班', members: ['张三', '李四'] },
      { id: 2, name: '晚班', members: ['王五', '赵六'] }
    ],
    selectedGroup: null
  }
},
methods: {
  assignGroupToDate(date) {
    if (!this.selectedGroup) return

    this.selectedGroup.members.forEach(member => {
      this.calendarOptions.events.push({
        title: member + '值班',
        start: date,
        color: this.getGroupColor(this.selectedGroup.id)
      })
    })
  },
  getGroupColor(groupId) {
    const colors = ['#ff9f89', '#f6c3d0', '#a4e4f9']
    return colors[groupId % colors.length]
  }
}

响应式设计优化

添加响应式处理适应不同屏幕：

computed: {
  calendarOptions() {
    return {
      ...this.baseCalendarOptions,
      headerToolbar: {
        left: window.innerWidth > 768 ? 'prev,next today' : 'prev,next',
        center: 'title',
        right: window.innerWidth > 768 ? 'dayGridMonth,timeGridWeek' : 'dayGridMonth'
      }
    }
  }
}