vue使⽤FullCalendar插件实现会议预约功能，个性化实现周
视图
此案例是做⼀个会议预约的页⾯，可以通过会议室下拉框切换会议室，通过选择⽇期跳转到某⼀天的周视图，其中⼀些个性化的设置包括title和左右切换按钮的样式修改、左侧时间栏显⽰半点、每列头部⽤⽇期加星期上下展⽰等。
话不多说，先上图 ：
开始使⽤：
1.vue项⽬使⽤npm安装插件
npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interaction
2.在会议预约页⾯引⼊js和样式
<script>
import { list } from 'api/personnel/meeting'
import { parseTime } from 'utils/index'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlulgin from '@fullcalendar/timegrid'
import '@fullcalendar/core/locales/zh-cn' // ⽀持中⽂
import momentPlugin from '@fullcalendar/moment'
import interactionPlugin from '@fullcalendar/interaction'
import { isNull, isNotNull } from '@/utils/common'
import * as timeUtils from '@/utils/index'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data () {
return {
tableData: [],
pageIndex: 0,
recordSize: 0,
pageSize: 0,
primaryId: 0,
selectDate:"",
meetingroom:"",
meetingRoomList:[],
calendarPlugins: [dayGridPlugin, timeGridPlulgin, momentPlugin, interactionPlugin], // 随时判断时间是否合法，通过返回true/false来判断是否能够选择
handlerSeelctAllow: info => {
const currentDate = new Date()
const start = info.start
const end = d
return (start <= end && start >= currentDate)
},
pickerOptions: {
disabledDate(time) {
Time() < w() - 8.64e7
}
},
newItem:{},
editItem:{},
events:[]
}
},
created () {
// this.findList()
},
methods: {
/**
* 表头格式设置
*/
columnHeaderHtml(mom){
let array = ['周⽇','周⼀','周⼆','周三','周四','周五','周六']
for(let i=0; i<=6; i++){
Day() === i ){
FullYear()
+ '/'
+ ((Month()+1) <10 ? ('0'+(Month()+1)) : (Month()+1)) + '/'
+ (Date() <10 ? ('0'+Date()) : Date())
+ '<br>' + array[i]
}
}
},
//初始化会议室列表
initRoom(meetingRoomList){
this.findList()
},
// 点击已预约会议
eventClick(info){
let primaryId = info.event.id
if(info.event.backgroundColor == 'orange'){
this.$emit("goEdit", ingroom)
}else {
this.$emit("goEdit", ingroom,true)
}
},
handleDateClick(info){
console.log(info)
},
handleSelect(info){
},
// 检索按钮点击
searchButton() {
this.pageIndex = 0
this.findList()
},
// 检索列表
findList() {
let me = this
me.events = []
// this.$fullCalendar.agenda = 'h:mm{ - h:mm}'
let calendarApi = this.$Api()
if(isNotNull(me.selectDate)){
// 跳转⽇期
calendarApi.viewSpecs.timeGridWeek.options.firstDay = Day()
let ss = this.$fullCalendar
}else{
}
let pageParam = {
pageIndex: me.pageIndex,
pageSize: 0,
meetingRoom: me.meetingroom,
}分页查询插件
me.$store.dispatch('setLoadingArea', '#meetingForm')
list(pageParam).then(data =>{
me.tableData = sult
me.tableData.forEach(t=>{
let meetingDate = timeUtils.ingDate, "{y}-{m}-{d}")
let meetingBeginTime = timeUtils.ingBeginTime, "{h}:{i}")
let meetingEndTime = timeUtils.ingEndTime, "{h}:{i}")
let start = meetingDate + " " + meetingBeginTime + ":00"
let end = meetingDate + " " + meetingEndTime + ":00"
me.events.push({
title: (t.reverseUserName || "") + '《' + (t.topic.length > 6 ? (t.topic.substring(6,0) + '...') : t.topic) + '》', start: start,
end: end,
color: t.isEdit ? 'orange' : '#4286f5',
ingId
})
})
me.pageSize = data.pager.pageSize
})
},
// 时间格式化
dateFormat(row,column){
let date = row[column.property]
if (date == undefined || date == null || date == '') {
return ""
}
return parseTime(date, "{y}-{m}-{d} {h}:{i}:{s}")
},
// 分页点击
pageChange(val) {
this.pageIndex = val - 1
this.findList()
},
// 新增按钮点击
addButton() {
if(ingroom)){
type: 'warning',
message: '请先选择会议室'
})
return
}
this.$emit("goEdit",ingroom)
},
}
}
</script>
页⾯编写：
<template>
<div class="app-container">
<el-row>
<el-col :span="24">
<el-form :inline="true">
<el-form-item>
<el-select placeholder="会议室" v-model="meetingroom" class="input-search-width" filterable @change="findList()">
<el-option v-for="item in meetingRoomList" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker v-model="selectDate" placeholder="⽇期" type="date" :picker-options="pickerOptions" clearable class="input-search-width"> </el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="findList()">搜索</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="24" class="warp-add">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="addButton()">预约</el-button>
</el-col>
<el-col :span="24" class="warp-table" >
<div >
<full-calendar
ref="myfullCalendar"
:plugins="calendarPlugins"
:all-day-slot="false"
:header="{
left:'prev',
center:'title',
right: 'next'
}"
:slot-event-overlap="false"
:events="events"
:button-text="{
today: '今天'
}"
:unselect-auto="false"
:select-overlap="false"
:business-hours="{
startTime: '08:00',
endTime:'24:00',
daysOfWeek: [ 0, 1, 2, 3, 4, 5, 6 ]
}"
:select-allow="handlerSeelctAllow"
:height="670"
columnHeaderFormat="dddd YYYY/M/d"
:columnHeaderHtml="columnHeaderHtml"
select-mirror="true"
:firstDay="(new Date().getDay())"
:minDate="(new Date().getDay())"
aspectRatio=2
min-time="08:00:00"
max-time="24:00:00"
scrollTime = "08:00:00"
selectable="true"
slot-duration="00:30"
slotLabelInterval="00:30"
slot-label-format="HH:mm"
title-format="YYYY年MM⽉D⽇"
default-view="timeGridWeek"
locale="zh-cn"
@eventClick = "eventClick"
@dateClick="handleDateClick"
@select="handleSelect"/>
</div>
</el-col>
</el-row>
</div>
</template>
3.css样式代码：
<style>
.fc-button-primary {
color: #FFF !important;
/
* font-size: 18px !important; */
/* background-color: #4286f5 !important; */
background-color: #EAF2F8 !important;
border-color: #EAF2F8 !important;
border-radius: 100px !important;
width: 40px !important;
height: 40px !important;
}
.fc-button-primary:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(234, 242, 248) !important; box-shadow: 0 0 0 0.2rem rgba(234, 242, 248) !important;
}
.fc-button .fc-icon {
vertical-align: middle;
font-size: 1.5em;
color: #1E65D1;
}
.fc-left{
width:37% !important;
text-align:right !important;
}
.fc-center{
width:26% !important;
text-align:left !important;
margin-left:-502px !important;
}
.fc-right{
width:37% !important;
text-align:left !important;
margin-left:-595px !important;
}
.fc-event {
position: relative;
display: block;
发表评论