1. 先看下要实现的效果图,左侧栏为当日时间,顶部为部门所有人员,表格内容是人员事件,要求数据多的时候,左侧栏和顶部固定,支持横竖滚动条,如图:
2. 这里用的js原生写法:
<html> <head> <title>工作记录详情</title> <meta name="decorator" content="default" /> <script src="${ctxStatic}/jquery-validation/1.11.0/jquery.validate.method.js" type="text/javascript" ></script> <script src="${ctxStatic}/fullcalendar/index.global.js" type="text/javascript" ></script> <style> #calendar { max-width: 100vw; max-height: 90vh; } /* 控制事件的最小高度 */ .fc-event { min-height: 20px; /* 设置事件的最小高度 */ } /* 控制事件内容溢出时的行为 */ .fc-event .fc-event-title { white-space: normal; /* 允许事件内容换行 */ overflow: hidden; /* 隐藏溢出部分 */ text-overflow: ellipsis; /* 添加省略号 */ } .fc-theme-standard td, .fc-theme-standard th { min-height: 50px; } .fc td, .fc th { min-height: 50px; height: 50px; vertical-align: middle; } .fc-scrollgrid-section-liquid tr { height: 80px; } </style> <script> document.addEventListener("DOMContentLoaded", function () { fullcalendarData(); }); function fullcalendarData() { var deptId = $("#deptIdQueryId").val(); var calendarEl = document.getElementById("calendar"); var calendar = new FullCalendar.Calendar(calendarEl, { locale: "zh-cn", // 使用中文语言包 timeZone: "Asia/Shanghai", allDaySlot: false, initialView: "resourceTimeGridDay", slotLabelFormat: { // 格式化Y轴时间为24小时制 hour: "2-digit", minute: "2-digit", hour12: false, // 24小时制 }, eventTimeFormat: { // 格式化节点时间为24小时制 hour: "2-digit", minute: "2-digit", hour12: false, // 24小时制 }, buttonText: { // 自定义按钮文本 today: "今天", }, views: { resourceTimeGridThreeDay: { type: "resourceTimeGrid", }, }, datesAboveResources: true, dayMinWidth: 100, // 格子宽度 slotMinTime: "09:00:00", // 最小时间 slotMaxTime: "24:00:00", // 最大时间 resources: [], events: [], datesSet: function (info) { loading("加载中..."); $.ajax({ url: "${ctx}/perform/tPerform/workScheduleData", type: "GET", data: { deptIdQuery: deptId, startTimeQuery: info.startStr, endTimeQuery: info.endStr, }, success: function (data) { if (data.code == 200) { closeLoading(); var resData = data.data; // 批量更新资源和事件 calendar.batchRendering(function () { // 移除现有的资源和事件 calendar.getResources().forEach(function (resource) { calendar.getResourceById(resource.id).remove(); }); calendar.removeAllEvents(); // 添加新的资源和事件 resData.resources.forEach(function (resource) { calendar.addResource(resource); }); resData.events.forEach(function (event) { calendar.addEvent(event); }); }); } }, error: function () { // 错误处理逻辑 }, }); }, }); calendar.render(); } </script> </head> <body> <br /> <form:form id="searchForm" modelAttribute="TPerform" action="" method="post" class="breadcrumb form-search" > <ul class="ul-form"> <li class="shrink"> <label>部门:</label> <sys:treeselect isAll="true" id="deptIdQuery" name="deptId4Query" value="${TPerform.deptId4Query}" labelName="deptIdQueryName" labelValue="${fns:getOfficeById(TPerform.deptId4Query)}" title="部门" url="/sys/office/treeData?type=2&isAll=true" cssClass="input-small" notAllowSelectParent="false" allowClear="true" /> </li> <li class="btns"> <input id="btnSubmit" class="btn btn-primary" type="button" onclick="fullcalendarData()" value="查询" /> </li> </ul> </form:form> <form:form class="form-horizontal"> <div class="tabbable"> <div id="calendar"></div> </div> </form:form> </body> </html>View Code
3. 怎么调整表格的列宽度:
看官方解释:https://fullcalendar.io/docs/dayMinWidth
dayMinWidth:200;
3. 附上官方文档地址:
我选的视图:(js配置和css是滚动条关键)
视图实例: 打开:https://fullcalendar.io/docs/dayMinWidth
标签:function,24,插件,FullCalendar,js,fc,calendar,height,event From: https://www.cnblogs.com/shyhuahua/p/18205887