FullCalendar插件js原生用法
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>
3. 怎么调整表格的列宽度：
看官方解释：https://fullcalendar.io/docs/dayMinWidth
dayMinWidth：200；
3. 附上官方文档地址：
我选的视图：（js配置和css是滚动条关键）
视图实例: 打开：https://fullcalendar.io/docs/dayMinWidth
