日历插件---FullCalendar （vue3中实现，常用详细的功能以及样式、有源码）

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 {};}}};

日历插件---FullCalendar （vue3中实现，常用详细的功能以及样式、有源码）相关推荐

fullcalendar php,日历插件fullcalendar+php的使用教程 — 读取json数据
根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历 ...
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
jquery日历插件FullCalendar使用技巧
原文链接:http://blog.csdn.net/u013493957/article/details/44920341 FullCalendar是一款基于jquery的日历控件,它有着很强大的功能 ...
jQuery日历插件FullCalendar使用方法
转载至此 html代码片段 <head> <meta charset='utf-8' /> <link href='../fullcalendar.css' rel='s ...
带记事功能的日历插件fullCalendar
效果图业务常景介绍公司的一款订餐系统,分中饭和晚饭,每天默认为点. 引入 <link rel="stylesheet" type="text/css" ...
工作中jQuery常用实例-主要功能总结整理
1.jQuery鼠标经过选项卡内容切换代码引入jQuery库, <script type="text/javascript" src="js/jquery-1.8 ...
VUE3中实现浏览器全屏功能
1.安装screenfull npm install screenfull 2.在vue页面中引入 import screenfull from 'screenfull' 3.定义全屏方法 const ...
Qt翻金币小游戏详细教程（内涵所有源码、图片资源）
一.项目简介翻金币项目是一款经典的益智类游戏,我们需要将金币都翻成同色,才视为胜利.首先,开始界面如下: 点击start按钮,进入下层界面,选择关卡: 在这里我们设立了20个关卡供玩家选择,假设我们 ...
VTK Examples中MIP和MPR的功能实现与源码分析
本篇博客由Markdown编辑器编辑而成. 1. 前言在之前关于ParaView技术调研中,已经通过修改ParaView5.0的源代码实现了MIP/minIP/aveIP的功能.但是由于对ParaV ...

日历插件---FullCalendar （vue3中实现，常用详细的功能以及样式、有源码）

FullCalendar的使用步骤

日历插件---FullCalendar （vue3中实现，常用详细的功能以及样式、有源码）相关推荐

最新文章

热门文章