vue-fullcalendar插件
作者：互联网
------------恢复内容开始------------
参考 ：
https://blog.csdn.net/w3chhhhhh/article/details/90256252
https://blog.csdn.net/ju__ju/article/details/103117790
https://blog.csdn.net/ju__ju/article/details/103117790
https://blog.csdn.net/qq_33594380/article/details/79738423
<template>
<div class="container" style="width:60%; margin: 0 auto;">
<FullCalendar
:plugins="calendarPlugins"
:slotEventOverlap="false"
:allDaySlot="false"
:header="{
left:'prev',
center:'title',
right: 'today ,next'
}"
:events="[
{
title: '计算机学院小组会议',
start: '2020-04-01 10:00:00',
end: '2020-04-01 16:00:00',
color:'orange'
},
{
start: '2020-04-02 10:00:00',
end: '2020-04-02 14:00:00',
title: '东南大学计算机学术会议',
color:'green'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
},
{
start: '2020-03-31 10:00:00',
end: '2020-03-31 14:00:00',
title: '东南大学计算机学术会议',
color:'red'
}
]"
:button-text="{
today: '今天'
}"
:slotLabelFormat="{ // 周，日视图时，左侧的显示的时间格式，以下为：00:00，00:30...5:30
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12: false
}"
:columnHeaderHtml="columnHeaderHtml"
default-view="timeGridWeek"
:unselect-auto="false"
:select-overlap="false"
:select-allow="handlerSeelctAllow"
select-mirror="false"
selectable="true"
slot-duration="00:15:00"
slot-label-interval="01:00"
locale="zh-cn"
@dateClick="handleDateClick"
@select="handleSelect"
/>
</div>
</template>
<script>
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 { get, post } from "@/api/ylapi"
import { mapGetters } from "vuex"
export default {
components: {
FullCalendar
},
data () {
return {
calendarPlugins: [dayGridPlugin, timeGridPlulgin, interactionPlugin],
// 随时判断时间是否合法，通过返回true/false来判断是否能够选择
handlerSeelctAllow: info => {
const currentDate = new Date()
const start = info.start
const end = info.end
return (start <= end && start >= currentDate)
},
columnHeaderHtml: function (date) {
let map = {
0: '周日',
1: '周一',
2: '周二',
3: '周三',
4: '周四',
5: '周五',
6: '周六'
}
let month = date.getMonth() + 1
let day = date.getDate()
let week = date.getDay()
return map[week]
+ '<br>'
+ (month < 10 ? ('0' + month) : month)
+ '/'
+ (day < 10 ? ('0' + day) : day)
},
}
},
created () {
this.getConferenceRecord()
},
computed: {
...mapGetters(["staffId"])
},
methods: {
//获取当前周的所有会议
async getConferenceRecord () {
let reqStr = {
"autoCount": true,
"confTypes": ["NC", "VGCP"],
"data": null,
"limit": 1000,
"orderbys": [
{
"field": "conferenceTimePattern.conferenceTime.startDateTimeStamp",
"order": 1
}
],
"role": null,
"skip": 0,
"states": ["ready", "create", "ongoing", "end"],
"total": 0
}
const res = await post(`/conference/record/${this.staffId}/pagedList`, reqStr)
if (res.ret > 0) {
}
},
// 当点击时候
handleDateClick (arg) {
console.log(arg)
},
// 当选择结束的时候获取开始和结束时间
handleSelect (info) {
console.log('form' + info.startStr + ' to ' + info.endStr)
}
}
}
</script>
<style lang="scss" scope>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
</style>
------------恢复内容结束------------
标签：info,插件,vue,const,fullcalendar,month,let,import 来源： https://www.cnblogs.com/moon-yyl/p/12717817.html