自定义日历插件
2024-08-18 本文已影响0人
臭臭的胡子先生
image.png
中文文档 点击下载
cnpm i tippy.js //鼠标移上去弹框
<template>
<div >
<div class="p_r">
<el-button type="primary" plain @click="timeTypeChange" size="mini" >{{initialView == 'timeGridWeek' ?'周':'人'}}</el-button>
<FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions">
<!-- 自定义渲染数据内容 -->
<template #eventContent="{ event }">
<div class="f_view">
<p class="title">{{ event.title }}</p>
<!--v-if="!event.allDay" 判断是不是全天 -->
<p class="time" v-if="!event.allDay">{{event.start}} - {{event.end}}</p>
</div>
</template>
</FullCalendar>
</div>
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import dayGridPlugin from '@fullcalendar/daygrid';
import tippy from "tippy.js"; //引入 tippy.js
import 'tippy.js/dist/tippy.css';//引入 tippy.js
import 'tippy.js/themes/light.css'; //引入主题
import 'tippy.js/animations/scale.css';
export default {
data() {
let that = this
return {
calendarApi: null,
dateInfo:{},//当前时间info
initialView:'timeGridWeek',//默认按周展示
calendarOptions: {
plugins: [interactionPlugin,timeGridPlugin,resourceTimeGridPlugin ], // 需要用哪个插件引入后放到这个数组里
initialView: 'timeGridWeek', // 默认显示月视图 timeGridWeek resourceTimeGridDay
droppable: true, // 可放置，允许外部拖入
locale: 'zh-cn', // 语言
height: '600px', // 高度
allDayText:'全天',
allDay:true, //是否显示全天
allDaySlot: false, // 是否需要全天
firstDay: 1, // 起始日期，0为周日
// weekNumberCalculation: 'ISO',
headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
center: '',
// left: 'today prev,next',
right:'',
left: 'today prev,next title'
},
slotDuration: '00:30', // 间隔时间
slotMinTime: '08:00:00', // 开始时间
slotMaxTime: '24:00:00', // 结束时间
// slotLabelInterval: '00:30', // 间隔时间文字
slotLabelFormat: { // 间隔时间文字格式
hour: 'numeric',
minute: '2-digit',
hour12: false,
},
editable: false,//禁止拖拽
selectable: true,
dayMaxEvents: true,
weekends: true,
resources: [], //以人为主 切换头部导航
events: [], // 定义事件数据
dayClick: function (e) {
console.log(223, e)
},
customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
today: {
text: '今天', // 按钮的展示文本
click: that.todayClick // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
},
next: {
click: that.nextClick
},
prev: {
click: that.prevClick
}
},
eventClick: function (e) {
console.log('点击', e)
},
// eventDrop: function (arg) { // 拖动事件
// let event = arg.event
// let sendObj = {
// proScheduledId: event.id,
// startDate: timestampFormat(+new Date(event.start)),
// endDate: timestampFormat(+new Date(event.end))
// }
// console.log(sendObj)
// },
viewRender:that.viewRender,
eventMouseEnter:that.eventMouseover,//鼠标移入弹框
datesSet: function (dateInfo) {// 获取当前时间
that.dateInfo = dateInfo
that.getHomeRecordGetChart(dateInfo)
}
}
}
},
components:{
FullCalendar
},
mounted() {
this.showPopup()
},
methods:{
// 显示日程弹框
showPopup(){
this.getHomeRecordGetChart()
this.$nextTick(()=>{
this.calendarApi = this.$refs.fullCalendar.getApi()
})
},
eventMouseover: function (calEvent, jsEvent, view) {//鼠标在日程区块上时触发
console.log('-----123123123',calEvent, jsEvent, view)
let content = ""; //content中可以直接设置悬浮框中内容的样式
content = "<div style=''>" + calEvent.event.title + "</div>";
content = content + "<div style=''>" + "开始时间：" + new Date(calEvent.event.start)+ "<div>";
content = content + "<div style=''>" + "结束时间：" + new Date(calEvent.event.end)+ "<div>";
tippy(calEvent.el, {
content: content, //悬浮框展示的内容
// theme: 'light', //悬浮框主题，默认主题中的light主题（白底黑字）
theme: 'tomato', //自定义主题，颜色在style中设置
allowHTML: true, //为true的时候，可以识别content中的html
});
},
// 更新日程数据
getHomeRecordGetChart(){
this.calendarOptions.resources = [
{ id: '1',resourceId: '1', title: 'Room A' ,start: '2024-08-12 14:00:00',end:'2024-08-12 15:00:00',className:'bg_4089FF' },
{ id: '2',resourceId: '1', title: 'Room B', start: '2024-08-12 15:00:00',end:'2024-08-12 16:00:00',className:'bg_4089FF' },
]
this.calendarOptions.events = [ { id: '1', resourceId: '1', title: 'Event 1', start: '2024-08-12 14:00:00', allDay:true || false // 表示这是一个全天事件
}] //渲染日程数据
},
// 时间日期切换
timeTypeChange(){
this.initialView = this.initialView == 'timeGridWeek' ? 'resourceTimeGridDay':'timeGridWeek'
this.calendarApi.changeView(this.initialView) // 使用API切换视图
},
todayClick(mouseEvent, htmlElement) {
this.calendarApi.today() // 将日历移动到当前日期。
this.calendarApi.getDate() // 返回日期的日历的当前日期
},
nextClick(mouseEvent, htmlElement) {
this.calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
},
prevClick(mouseEvent, htmlElement) {
this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
},
viewRender(info){
console.log(info)
},
}
}
</script>
<style lang="scss" scoped>
.m_r_10{
margin-right:10px;
}
.m_l_10{
margin-left:10px;
}
:deep .fc-toolbar-chunk{
display:flex;
align-items: center;
}
.user_info{
position:absolute;top:0;right:0;
}
.fc .fc-button-primary{
}
.fc .fc-timegrid-col.fc-day-today{
background:rgba(0,0,0,0);
}
.bg_4089FF{
border:none;
border-top:1px solid #4089FF;
background: linear-gradient(top, #5b90e5, #7a90b4);
}
.bg_d7282a{
border:none;
border-top:1px solid #d7282a;
background: linear-gradient(top, #d7282a, #f39294);
}
.f_view{
width:100%;height:100%;
padding:0 4px;overflow:hidden;
.title{
font-size: 14px!important;
color: #333!important;
line-height:20px;margin-top:2px;
}
.time{
font-size: 12px;
color: #666666;margin-top:2px;
line-height:12px;margin-top:2px;
}
}
</style>
