最近在客戶端的日程中用到的fullcalendar的框架，記錄一下每窖！
官方文檔：https://fullcalendar.io/docs
安裝插件
npm install --save @fullcalendar/vue
@fullcalendar/daygrid
@fullcalendar/interaction
@fullcalendar/timegrid
@fullcalendar/timegrid
封裝組件
<template>
<div class="fullCalendarapege">
<div class="top-content">
<a-row type="flex">
<a-col :span="8">
<a-checkbox-group v-model="taskSchedule" style="float: left;" @change="changeTask">
<a-row style="margin-top: 7px;margin-right: 15px;">
<a-col :span="12">
<a-checkbox value="0">任務(wù)</a-checkbox>
</a-col>
<a-col :span="12">
<a-checkbox value="1">日程</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
<a-button shape="round" @click="todayFn" :disabled="disabledtoday" style="height:28px;font-size: 12px;margin-top: 5px;">今天 </a-button>
</a-col>
<a-col :span="11" style="line-height: 30px;color: #333333;font-size: 14px;">
<span @click="prevFn" class="icoprev">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiangzuo"></use>
</svg>
</span>
<span class="datattile">{{titlehearsd}}</span>
<span @click="nextFn" class="iconext">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xiangzuo"></use>
</svg>
</span>
</a-col>
<a-col :span="5" style=" text-align: right;">
<a-radio-group v-model="viewType" @change="changeViewTypeFn(viewType)">
<a-radio-button value="timeGridWeek">周</a-radio-button>
<a-radio-button value="dayGridMonth">月</a-radio-button>
</a-radio-group>
</a-col>
</a-row>
</div>
<FullCalendar ref="fullCalendar" :options="calendarOptions"></FullCalendar>
</div>
</template>
<script>
import '@/assets/Lunar.js';
import FullCalendar from '@fullcalendar/vue'
// import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'//日期
import interactionPlugin from '@fullcalendar/interaction'//提供事件拖放抬纸，調(diào)整大小咙俩，dateClick和可選動(dòng)作的功能
import timeGridPlugin from '@fullcalendar/timegrid'//時(shí)間
import momentPlugin from '@fullcalendar/moment'//日期
import rrulePlugin from '@fullcalendar/rrule'
import calenderFormate from "@/utils/calendarnongli.js" //農(nóng)歷計(jì)算方法
import * as calendar from '@/utils/calendar.js'//將日期對(duì)象轉(zhuǎn)換成 2020-01-01 格式的日期
import '@/assets/css/fullCalendarapege.css'
export default {
components: {
FullCalendar
},
props:{
myCalendar: { type: Boolean,default: true},
calendarEvents:{ type: Array}, //事件數(shù)據(jù)
firstday:{ type: Number},//設(shè)置一周中顯示的第一天是哪天，周日是0松却，周一是1
taskSval:{ type: Array}
},
data() {
return {
calendar: null,
instance: null,
taskSchedule:this.taskSval,
today:calendar.getNewDate(new Date()),
viewType:'dayGridMonth',
disabledtoday:true,
year:null,
month:null,
dayInWeek:null,
ismyCalendar:this.myCalendar,
thsiWeekFirstDay:null,
thisWeekLastDay :null,
//initialDate: '2020-05-12',
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, momentPlugin , rrulePlugin ],
events:[],
initialView: 'dayGridMonth',
locale: "zh-cn",
eventLimit: true, // 設(shè)置月日程，與all-day slot的最大顯示數(shù)量溅话，超過的通過彈窗顯示
weekNumberCalculation:"ISO",
firstDay:this.firstday,//設(shè)置一周中顯示的第一天是哪天晓锻，周日是0，周一是1
allDaySlot:false,//是否在日歷上方顯示all-day(全天)
allDayText : "全天", //自定義全天視圖的名稱
handleWindowResize:true,//是否隨瀏覽器窗口大小變化而自動(dòng)變化飞几。
dayMaxEventRows: true,
//displayEventEnd:true,//所有視圖顯示結(jié)束時(shí)間
slotEventOverlap: true, // 相同時(shí)間段的多個(gè)日程視覺上是否允許重疊砚哆，默認(rèn)true允許
//自定義視圖
views: {
//單元格最多顯示6條
timeGrid: {
dayMaxEventRows: 5
},
dayGridMonth: { //轉(zhuǎn)農(nóng)歷
dayCellContent(item) {
let mark = sessionStorage.getItem('joinholiday')
let _date = new Date(item.date).toLocaleDateString().split('/');
let _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2]);
let _datelunarFestival = _dateF.lunarFestival ? _dateF.lunarFestival : ''
let datefestival = _dateF.festival ? _dateF.festival : ''
if (item.dayNumberText == mark + '日') {
return {
html: `<p style="padding-left: 4px;"><label>${_dateF.cDay}</label></p><p style="padding-left: 4px;font-size: 11px;line-height: 20px;">(<span>${_dateF.IDayCn}<b style="color: #c71010;;padding-left: 4px;">${_datelunarFestival}${datefestival}</b></span>)</p)>`
}
} else
return {
html: `<p style="padding-left: 4px;"><label>${_dateF.cDay}</label></p><p style="padding-left: 4px;font-size: 11px;line-height: 20px;">(<span>${_dateF.IDayCn}<b style="color: #c71010;;padding-left: 4px;">${_datelunarFestival}${datefestival}</b></span>)</p)>`
}
}
},
},
//dayMaxEvents:true,
moreLinkContent : function(arg) {
let args = '還有'+arg.num+'個(gè)'
return args
},
selectable: false,//允許用戶通過單擊并拖動(dòng)來突出顯示多天或多個(gè)時(shí)段。
headerToolbar: false,
slotLabelFormat: {
hour: '2-digit',
minute: '2-digit',
meridiem: false,
hour12: false, //設(shè)置時(shí)間為24小時(shí)
},
timeFormat: {agenda:'H:mm{-H:mm}',month:'H:mm'}, //日程的時(shí)間顯示格式
scrollTime:"06:00:00",
maxTime:"24:00:00",
minTime:'00:00:00',
//slotDuration:'02:00:00',
editable: false, //支持Event日程拖動(dòng)修改屑墨，默認(rèn)false
eventStartEditable : false, //Event日程開始時(shí)間可以改變躁锁，默認(rèn)true纷铣，如果是false其實(shí)就是指日程塊不能隨意拖動(dòng)，只能上下拉伸改變他的endTime
eventDurationEditable : false, //Event日程的開始結(jié)束時(shí)間距離是否可以改變战转，默認(rèn)true搜立，如果是false則表示開始結(jié)束時(shí)間范圍不能拉伸，只能拖拽
/**
* 事件
*/
eventDidMount: this.eventDidMount,
dateClick: this.handleDateClick,
eventClick:this.eventClick
},
timeStamp: [],// 返回一周時(shí)間的集合
currentFirstDate: new Date(),
}
},
mounted(){
this.calendarApi = this.$refs.fullCalendar.getApi()
this.year = this.today.year
this.month = this.today.month
this.calendarOptions.events = this.calendarEvents
this.setDate(this.addDate(this.currentFirstDate,-1))
},
watch: {
calendarEvents:{
handler: function(val, oldVal) {
this.calendarOptions.events = val
},
deep: true
},
myCalendar:{
handler: function(val, oldVal) {
this.ismyCalendar = val
},
deep: true
},
taskSval:{
handler: function(val, oldVal) {
this.taskSchedule = val
},
deep: true
},
},
computed:{
titlehearsd:function(){
if(this.calendarOptions.initialView == 'dayGridMonth'){
return this.year+'年'+this.month+'月'
}else{
return this.timeStamp[0]+'—'+this.timeStamp[6]
}
},
},
methods: {
/**
* 自定義頭部事件
*/
changeViewTypeFn(val){
this.calendarApi.changeView(val)
this.calendarOptions.initialView = val
this.todayFn()
},
getDates(date) {
var year = date.getFullYear()
var month = ((date.getMonth() + 1)).length === 2 ? ('0' + (date.getMonth() + 1) ) : (date.getMonth() + 1)
var day = (date.getDate() + '').length === 1 ? ('0' + date.getDate()) : date.getDate()
this.timeStamp.push(year +'年'+ month +'月'+day+'日')
return year + month + day
},
addDate(date, n) {
date.setDate(date.getDate() + n)
return date
},
setDate(date) {
this.timeStamp = []
var week = date.getDay() - 1
date = this.addDate(date, week * -1)
this.currentFirstDate = new Date(date)
for (var i = 0; i < 7; i++) {
this.getDates(i === 0 ? date : this.addDate(date, 1)) // 星期一開始
}
},
prevFn(){
if(this.calendarOptions.initialView == 'dayGridMonth'){
if(this.month == 1){
this.month = 12
this.year--
this.calendarApi.prev()
this.disabledtoday = false
}else{
this.month--
this.calendarApi.prev()
this.disabledtoday = false
}
}
if(this.calendarOptions.initialView == 'timeGridWeek'){
this.calendarApi.prev()
this.setDate(this.addDate(this.currentFirstDate, -7))
this.disabledtoday = false
}
},
nextFn(){
if(this.calendarOptions.initialView == 'dayGridMonth'){
if(this.month == 12){
this.month = 1
this.year++
this.calendarApi.next()
this.disabledtoday = false
}else{
this.month++
this.calendarApi.next()
this.disabledtoday = false
}
}
if(this.calendarOptions.initialView == 'timeGridWeek'){
this.setDate(this.addDate(this.currentFirstDate, 7))
this.calendarApi.next()
this.disabledtoday = false
}
},
todayFn () {
this.calendarApi.today()
this.disabledtoday = true
if(this.calendarOptions.initialView == 'dayGridMonth'){
this.today = calendar.getNewDate(new Date())
this.year = this.today.year
this.month = this.today.month
}else{
this.currentFirstDate = new Date()
this.setDate(this.addDate(this.currentFirstDate,-1))
}
},
//點(diǎn)擊日期
handleDateClick: function(info) {
console.log( this.$refs.fullCalendar.style)
if(this.ismyCalendar == true){
this.$emit('handleDateClick', info)
}else{
return
}
},
//點(diǎn)擊事件
eventClick: function(info) {
this.$emit('eventClick', info)
},
//選擇日程或者任務(wù)
changeTask(val){
this.$emit('changeTask', val)
},
},
beforeDestroy () {
// this.calendar = null
// this.instance = null
this.calendarApi.render()
},
destroyed() {
this.calendarApi.destroy()
}
}
</script>
<style scoped>
.fc table>thead>tr>th div {
font-weight: bold;
color: #25992E;
font-size: 16px;
}
.fc-sat span, .fc-sun div {
color: #ED6D23 !important;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
width: 100%;
text-align: right;
display: block;
font-size: 20px;
font-family: Arial;
font-weight: 600;
padding: 12px 12px 0 12px;
line-height: 23px;
height: 23px;
color: #555;
}
.fc-day-cnTerm {
text-align: right;
padding: 12px 12px 0 12px;
color: #6ABA49;
font-size: 12px;
}
.fc-day-cnDate {
text-align: right;
padding: 12px 12px 0 12px;
color: #999;
font-size: 12px;
}
</style>
組件使用
firstday:設(shè)置一周中顯示的第一天是哪天槐秧，周日是0啄踊，周一是1
taskSval:日程還是任務(wù)【你們不需要可以刪除，】
calendarEvents, //日歷顯示時(shí)間數(shù)據(jù)
myCalendar：是不是自己日程【你們不需要可以刪除刁标，】
<Calendar
ref="Calendars"
:firstday="firstday"
:myCalendar="myCalendar"
:calendarEvents="programmevents"
:taskSval="taskSval"
@handleDateClick="DateClick"
@eventClick="eventClick"
@changeTask="changeTask"
></Calendar>
日程添加重復(fù)任務(wù)
安裝fullcalendar中第三方插件rrulePlugin颠通，npm install --save @fullcalendar/rrule
在上一步代碼已經(jīng)導(dǎo)入，import rrulePlugin from '@fullcalendar/rrule'
> 我這邊后臺(tái)給數(shù)據(jù)不合符fullcalendar中數(shù)據(jù)格式膀懈，我轉(zhuǎn)一下顿锰，你們可以根據(jù)自己需求的
//轉(zhuǎn)化數(shù)據(jù)
getenev(date){
let starts = ''
let ends = ''
let newdata = []
let color= ''//狀態(tài)顏色
let endNewDate =''
for (let i = 0; i < date.length; i++) {
//優(yōu)先級(jí)，0-低启搂，1-普通硼控，2-緊急，3-非常緊急
if(date[i].priorityLevel){
switch (date[i].priorityLevel){
case 0:
color ="rgb(245,147,8, 0.2)"
break;
case 1:
color ="rgb(0,255,0, 0.2)"
break;
case 2:
color ="rgb(1,190,216, 0.2)"
break;
case 3:
color =" rgb(248,82,67, 0.2)"
break;
}
}
newdata.push({
id:date[i].id,
title:date[i].title,
start:date[i].startDate+' '+date[i].startTime,
end: date[i].endDate+' '+date[i].endTime,
// startRecur: '2021-01-1T10:00:00',
// endRecur: '2021-01-17T16:00:00',
extendedProps: {
describes: date[i].describes,
place:date[i].place,
startDate:date[i].startDate,
endDate:date[i].endDate,
startTime:date[i].startTime,
endTime:date[i].endTime,
title:date[i].title,
id:date[i].id,
// jobId:date[i].jobId,
repeatTime:date[i].repeatTime,//重復(fù)時(shí)間狐血，0-不重復(fù)淀歇，1-每天重復(fù)，2每周重復(fù)匈织，3-每月重復(fù)浪默，4-每年重復(fù)，5-工作日重復(fù)
reminderTime:date[i].reminderTime,//提醒時(shí)間 0不提醒缀匕，1五分鐘纳决，2十五分鐘，3三十分鐘乡小，4一個(gè)小時(shí)阔加，5一天前，6一個(gè)月前
remindMode:date[i].remindMode,//提醒方式 0應(yīng)用提醒满钟，1短信提醒胜榔，2電話提醒
priorityLevel:date[i].priorityLevel,//優(yōu)先級(jí)，0-低湃番，1-普通夭织，2-緊急，3-非常緊急
taskSchedule:date[i].taskSchedule,//任務(wù)或者日程吠撮，0任務(wù)尊惰，1日程
privacyPatter:date[i].privacyPatter,//隱私模式，0公開模式，1隱私模式
calendarNotifyDtoList:date[i].calendarNotifyDtoList,//renyuan
},
borderColor:color,
color: color,
textColor: 'black' ,
//displayEventEnd:false ,
// allDay : true,
})
let _this =this
newdata.forEach( function(item){
//每天重復(fù)
if(item.extendedProps.repeatTime == 1){
let rrule ={}
_this.$set(item, 'rrule',{
freq: "daily",
dtstart: item.start,
until: item.end,
interval:1
})
}
//2每周重復(fù)
if(item.extendedProps.repeatTime == 2){
let rrule ={}
_this.$set(item, 'rrule',{
freq: "weekly",
dtstart: item.start,
//byweekday: ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'su' ],
until: item.end,
//interval:1
})
}
//3-每月重復(fù)
if(item.extendedProps.repeatTime == 3){
let rrule ={}
_this.$set(item, 'rrule',{
freq: "monthly",
dtstart: item.start,
until: item.end,
interval:1
})
}
//4-每年重復(fù)
if(item.extendedProps.repeatTime == 4){
let rrule ={}
_this.$set(item, 'rrule',{
freq: "yearly",
dtstart: item.start,
until: item.end,
interval:1
})
}
})
}
return newdata
},
日程添加農(nóng)歷顯示
calendarnongli.js是農(nóng)歷計(jì)算js
https://download.csdn.net/download/lny1126/15117097
總結(jié)
我這邊主要是根據(jù)我需求改弄屡，你們可以根據(jù)自己需求题禀，不用代碼可以刪除，
在這里插入圖片描述
