vue实现值班日历
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>关键实现点
- 日期计算：生成当前月所有日期数组，处理跨月显示
- 值班数据绑定：将值班人员数据与特定日期关联
- 交互功能：支持月份切换、值班信息编辑等操作
- 样式定制：根据需求调整日历的外观样式
可以根据项目需求选择合适的方法，FullCalendar 功能最全面但体积较大，自定义实现更轻量但需要处理更多细节。
