<template>
|
<div class="calender-box">
|
<div class="header">活动</div>
|
<div class="content">
|
<full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import FullCalendar from '@fullcalendar/vue'
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
import interactionPlugin from '@fullcalendar/interaction'
|
import timeGridPlugin from '@fullcalendar/timegrid'
|
// import '@fullcalendar/core/main.css'
|
import '@fullcalendar/daygrid/main.css'
|
|
export default {
|
name: 'calender',
|
components: {
|
FullCalendar
|
},
|
data () {
|
return {
|
calendarOptions: {
|
// timeGridPlugin 可显示每日时间段
|
height: 600,
|
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // 引用的插件
|
// 日历头部按钮位置
|
headerToolbar: {
|
left: 'prev,next today',
|
center: 'title',
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
// right: 'dayGridMonth,dayGridWeek,dayGrid'
|
// right: 'agendaWeek,dayGridWeek,dayGrid'
|
},
|
// 日历头部按钮位置
|
buttonText: {
|
// 设置按钮
|
today: '今天',
|
month: '月',
|
week: '周',
|
day: '天'
|
},
|
initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
|
locale: 'zh-cn', // 设置语言
|
firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
|
weekNumberCalculation: 'ISO', // 与firstDay配套使用
|
eventColor: '#2196f3', // 修改日程背景色
|
timeGridEventMinHeight: '20', // 设置事件的最小高度
|
aspectRatio: '1.5', // 设置日历单元格宽高比
|
displayEventTime: true, // 是否显示事件时间
|
allDaySlot: false, // 周、日视图时，all-day不显示
|
eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
|
eventTimeFormat: {
|
hour: 'numeric',
|
minute: '2-digit',
|
hour12: false
|
},
|
slotLabelFormat: {
|
hour: '2-digit',
|
minute: '2-digit',
|
meridiem: false,
|
hour12: false // 设置时间为24小时制
|
},
|
events: [
|
{
|
id: 1,
|
title: '09:30~11:30 小破孩',
|
start: '2022-03-11', // 事件开始时间必须
|
end: '2022-03-20', // 事件结束事件，可选
|
allDay: false, // 是否为全天事件，可选
|
// color: '#f08f00',
|
// textColor: '#000',
|
className: 'read-all-day'
|
},
|
{
|
id: 3,
|
title: '09:30~11:30 小1破孩',
|
start: '2022-03-11',
|
end: '2022-03-20',
|
color: '#f08f01'
|
},
|
{
|
id: 2,
|
title: '9:30~14:30 项目会议',
|
start: '2022-03-21',
|
end: '2022-03-25',
|
color: '#6bb377'
|
}
|
], // 日程数组
|
// 事件
|
editable: true, // 是否可以进行（拖动、缩放）修改
|
eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
|
eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
|
selectable: true, // 是否可以选中日历格
|
selectMirror: true,
|
selectMinDistance: 0, // 选中日历格的最小距离
|
weekends: true,
|
navLinks: true, // 天链接
|
selectHelper: false,
|
selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
|
dayMaxEvents: true,
|
dateClick: this.handleDateClick, // 日期点击
|
eventsSet: this.handleEvents, // 事件点击
|
eventClick: this.handleEventClick, // 日程点击信息展示
|
eventDrop: this.handleEventDrop, // 日程拖动事件
|
eventResize: this.eventResize, // 日程缩放事件
|
select: this.handleDateSelect,
|
customButtons: {
|
prev: { // this overrides the prev button
|
text: 'PREV',
|
click: () => {
|
this.prev()
|
}
|
},
|
next: { // this overrides the next button
|
text: 'PREV',
|
click: () => {
|
this.next()
|
}
|
},
|
today: {
|
text: '今天',
|
click: () => {
|
this.today()
|
}
|
}
|
}
|
}
|
}
|
},
|
|
mounted () {
|
this.calendarApi = this.$refs.fullCalendar.getApi()
|
},
|
|
methods: {
|
prev () {
|
this.calendarApi.prev()
|
},
|
// 切换下一个按钮事件
|
next () {
|
this.calendarApi.next()
|
},
|
// 点击今天按钮
|
today () {
|
this.calendarApi.today()
|
},
|
// 日程保存
|
saveEvent (val) {
|
const eventsArr = this.calendarOptions.events
|
try {
|
if (eventsArr.length === 0) {
|
eventsArr.push(val)
|
} else {
|
eventsArr.forEach((item, index, eventsArr) => {
|
// 若为修改日程
|
if (item.eventID === val.eventID) {
|
throw new Error(index)
|
}
|
})
|
// 若为新增日程
|
eventsArr.push(val)
|
}
|
} catch (e) {
|
// 若为修改日程
|
eventsArr.splice(e.message, 1, val)
|
}
|
},
|
// 日程删除
|
deleteEvent (val) {
|
const eventsArr = this.calendarOptions.events
|
try {
|
eventsArr.forEach((item, index, eventsArr) => {
|
if (item.eventID === val) {
|
throw new Error(index)
|
}
|
})
|
} catch (e) {
|
// 删除指定日程
|
eventsArr.splice(parseInt(e.message), 1)
|
}
|
},
|
// 日程事件点击
|
handleEvents (info) {
|
console.log('handleEvents.info:', info)
|
// this.currentEvents = events
|
},
|
handleWeekendsToggle () {
|
console.log('handleWeekendsToggle')
|
this.calendarOptions.weekends = !this.calendarOptions.weekends
|
},
|
// 日期点击
|
handleDateClick (selectInfo) {
|
if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件？')) {
|
// 父组件直接调用子组件方法
|
this.$refs.eventDialogue.openDialog('add')
|
// 父组件直接修改子组件变量
|
// this.$refs['eventDialogue'].dialogVisible = true
|
}
|
},
|
// 日程点击信息展示
|
handleEventClick (info) {
|
console.log('handleEventClick.info:', info)
|
info.el.style.borderColor = 'red'
|
this.$refs.eventDialogue.openDialog('view', info)
|
},
|
// 日程事件触发
|
eventClick (info) {
|
console.log('eventClick.info:', info)
|
info.el.style.borderColor = 'red'
|
},
|
// 日程拖动事件
|
handleEventDrop (info) {
|
this.$refs.eventDialogue.eventFormModel.start = info.event.start
|
this.$refs.eventDialogue.eventFormModel.end = info.event.end
|
},
|
// 日程缩放事件
|
eventResize (info) {
|
this.$refs.eventDialogue.eventFormModel.start = info.event.start
|
this.$refs.eventDialogue.eventFormModel.end = info.event.end
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.calender-box {
|
position: absolute;
|
z-index: 99;
|
background: #fff;
|
width: 960px;
|
height: 660px;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
|
.header {
|
padding: 0 10px;
|
line-height: 40px;
|
background: #2196f3;
|
color: #fff;
|
font-size: 18px;
|
}
|
|
.content {
|
margin-top: 10px;
|
padding: 0 10px 10px 10px;
|
height: calc(100% - 50px);
|
}
|
}
|
.read-all-day {
|
background: red;
|
color: green;
|
}
|
</style>
|
