Full Calendar增加自适应大小调整的特性及绑定toolbar事件_使用full calendar,当左侧sidebar收起的时候,full calendar不能随着布-CSDN博客

本文链接：https://blog.csdn.net/promaster/article/details/121783297

本文介绍如何使用FullCalendar在侧栏收缩时动态调整大小，解决宽度固定导致的问题。通过移除硬编码宽度并重置样式属性，实现组件响应式设计。务必在初始化和toolbar点击事件后调用相应函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Full Calendar，当左侧sidebar收起的时候，Full Calendar不能随着布局自动适应大小。
在这里插入图片描述

原因主要是Full Calendar显示星期和日期的2个标签div/table的width属性被设置成了初始化时的大小。当左侧的sidebar收起时，没有消息通知进行重绘。
在这里插入图片描述

解决办法是，去除这几个style='width: xxx"的设置，让宽度自适应。代码如下：

function autoScaleFullCalendar() {
	$(".fc-col-header").removeAttr("style");
	$(".fc-daygrid-body.fc-daygrid-body-unbalanced").removeAttr("style");
	var style = $(".fc-scrollgrid-sync-table").attr("style").split(";");
	var defaultHeigth = "";
	for (let i = 0; i < style.length; i++) {
		const e = style[i].trim();
		if (e.indexOf("height") >= 0) {
			defaultHeigth = e;
		}
	}
	$(".fc-scrollgrid-sync-table").removeAttr("style");
	$(".fc-scrollgrid-sync-table").attr("style", defaultHeigth);
}

在FullCalendar创建之后调用即可。

$(function () {
	var calendar = new Calendar(calendarEl, {
		// do something to init.
	}
	calendar.render();
	// Auto scale
	autoScaleFullCalendar();
	// fullcalendar的toolbar在点击后，会重新计算table的宽度，使自适应失效
	// 绑定点击事件，再次去除相关属性
	$(".fc-toolbar-chunk").on("click", function (params) {
		autoScaleFullCalendar();
	})
}