FullCalendar官网
在vue3中的使用方式
私聊获取源码链接
FullCalendar的使用步骤
- 安装FullCalendar相关插件
"@fullcalendar/core": "^5.9.0",
"@fullcalendar/daygrid": "^5.9.0",
"@fullcalendar/interaction": "^5.9.0",
"@fullcalendar/timegrid": "^5.9.0",
"@fullcalendar/vue3": "^5.9.0",
- 第一种方案（不推荐）完整代码（官网相关事件都有介绍）
<template>
<div class="content_box">
<FullCalendar :options="calendarOptions" />
</div>
</template>
<script lang="ts">
import {
defineComponent } from "vue";
import "@fullcalendar/core/vdom";
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
export default defineComponent({
components: {
FullCalendar,
},
setup() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "dayGridMonth",
customButtons: {
myCustomButton: {
text: "custom",
click: function () {
alert("clicked the custom button!");
},
},
},
headerToolbar: {
left: "dayGridMonth,timeGridWeek,timeGridDay myCustomButton",
center: "title",
right: "prevYear,prev,next,nextYear today",
},
events: [
{
title: "nishizhu",
start: "2021-09-07",
end: "2021-09-09",
}
], //事件事件+文本
eventColor: "#378006", //事件背景颜色
eventClick: (info) => {
alert("Event: " + info.event.title);
info.el.style.borderColor = "red";
},
dateClick: (info) => {
alert("Clicked on: " + info.dateStr);
info.dayEl.style.backgroundColor = "red";
},
editable: true,
dayMaxEventRows: 2,
},
};
},
});
</script>
<style lang="scss" scoped>
</style>
- 第二种方案（推荐）
首先在试图上面添加一个id为calendar的div
<div id="calendar" />
再次在onMounted中获取这个节点（因为得等视图渲染完成之后才能获取到这个节点）
onMounted(() => {
const calendarEl = document.getElementById("calendar");//获取这个节点
calendar = new Calendar(calendarEl as HTMLElement, {
//官网：保姆级教学
height: "auto",
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "dayGridMonth",
headerToolbar: {
left: "dayGridMonth,timeGridWeek,timeGridDay",
center: "title",
right: "prevYear,prev,next,nextYear today",
},
dayMaxEventRows: 3,
eventSources: [
{
events: events as any,//这个events是我这边处理后端返回数据的事件，用于展示在日历中的数据，在下文中会详细说明
id: "1",
},
],
eventClick: function (info) {
//当用户点击事件时触发
const serverData = info.event.extendedProps.ServerByGameIdData;
serverData.FirstOpentime = moment(serverData.FirstOpentime).format(
"YYYY-MM-DD HH:mm:ss"
);
serverData.Id = "" + serverData.Id;
activeKey.value = serverData.Id;
singleData.value = serverData;
visible.value = true;
},
eventDrop: function (info) {
//当拖动停止并且事件移动到不同的日期/时间时触发
Modal.confirm({
title: "Are you sure to change the service opening time?",
async onOk() {
const data = await updateServerFirstOpenTime({
gameId: Number(info.event.id.split(",")[1]),
serverId: Number(info.event.id.split(",")[0]),
firstOpenTime: moment(info.event.start).unix(),
});
if (data.code != 0) {
message.warning(data.msg);
info.revert();
}
},
onCancel() {
info.revert();
return;
},
});
},
dateClick: function (info) {
//当用户点击日期或时间时触发
calendar.changeView("timeGridDay", info.dateStr); //立即切换到不同的视图,这个功能实现的是点击月或者周视图的时候，跳转到这一天的日视图
},
eventTimeFormat: {
//改变的是日历中展示的日期格式
hour: "2-digit",
minute: "2-digit",
hour12: false,
},
editable: [2, 3, 11, 50].includes(storeService.get("auth").Id)
? true
: false,
});
calendar.render();//
watch(
() => state.gameVal,
() => {
calendar.refetchEvents();
}
);
});
最后将后端传过来的数据渲染到日历中
const events = async (info, successCallback) => {
state.startTime = moment(info.start).unix();
state.endTime = moment(info.end).unix();
const data = await getServerByGameID({
gameId: state.gameVal,
startTime: state.startTime,
endTime: state.endTime,
});
if (data.code == 0) {
if (data.data != null) {
exportBoolean = false;
successCallback(
data.data.map(function (eventEl) {
if (eventEl.StatusId == 1) {
eventEl.className = ["green"];
} else if (eventEl.StatusId == 4) {
eventEl.className = ["grey"];
}
eventEl.FirstOpentime = eventEl.FirstOpentime * 1000;
if (
moment(eventEl.FirstOpentime).isAfter(moment().unix() * 1000)
) {
eventEl.className = ["red"];
}
return {
title: eventEl.ServerName + " / " + eventEl.AbbrName,
start: eventEl.FirstOpentime,
ServerByGameIdData: eventEl,
id: [eventEl.ServerId, eventEl.GameId],
backgroundColor: eventEl.className,
classNames: eventEl.className,
borderColor: eventEl.className,
};
})
);
} else {
exportBoolean = true;
return {
};
}
}
};