fullcalendar日历右侧点击收缩自适应宽度高度

最新推荐文章于 2024-07-25 08:00:00 发布

一渊之隔

最新推荐文章于 2024-07-25 08:00:00 发布

阅读量2.7k

点赞数

分类专栏： jQuery fullcalendar 文章标签：前端 jquery

本文链接：https://blog.csdn.net/qq_37263478/article/details/122101675

版权

本文介绍了如何在FullCalendar日历中，通过点击右侧按钮实现日历的自适应宽度和高度。针对IE7兼容性问题，使用了FullCalendar的1.6.4版本。内容包括左侧日历和右侧日程两个div布局，点击中间按钮可以切换日历的展开和收缩状态。通过销毁并重新初始化日历解决了自适应大小的问题。

摘要由CSDN通过智能技术生成

如图所示，点击右侧按钮左侧日历并没有自适应大小，只有周日变长其他没有变。这里的思路是销毁重新初始化建一个日历因为需要兼容IE7 这里选择用的较为老的版本1.6.4

整个框架是左侧日历一个div，右边日程为另一个div ，默认是展示右侧日程

点击中间按钮展开事件收缩事件，初始化日历事件

		function expand(obj) {//点击右上角展开日程事件
			$(".right").css('display', 'none');//右侧日程
			$(".mything").show();//右上角按钮
			$(".left").width("95%");左侧日历外的div
			$('#calendar').fullCalendar('destroy'); //销毁原来的日历
			initial() //生成新的日历
		}

	function shrink(obj) {//点击中间按钮收缩右侧日程事件
			$(".left").width("56%");
			$(".right").show();
			$(".mything").css('display', 'none');
			$('#calendar').fullCalendar('destroy'); //销毁原来的日历
			initial() //生成新的日历

		}
function initial() { //初始化日历 配置日历相关属性
			var date = new Date();

			var d = date.getDate();

			var m = date.getMonth();

			var y = date.getFullYear();

			var calendar = $('#calendar').fullCalendar({
//自适应高度
				height: window.innerHeight - 100,
				windowResize: function (view) {
					$('#calendar').fullCalendar('option', 'height', window.innerHeight - 100);
				},
				// locale 
				isRTL: false,
				monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
				dayNames: ['星期日', '星期一', '星期二', '星期三