fullcalendar的属性windowResize浏览器自适应不起作用

一渊之隔

已于 2022-03-03 17:29:40 修改

阅读量553

点赞数

分类专栏： fullcalendar jQuery 文章标签： css css3 html

于 2022-03-03 17:29:08 首次发布

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

版权

jQuery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

fullcalendar

3 篇文章 0 订阅

订阅专栏

本文介绍了如何设置全屏日历的最大宽度，确保其在不同屏幕尺寸下保持良好显示。通过销毁原有日历并重新初始化，解决了窗口缩放时数据不断请求的问题，提升了网站性能和稳定性。此外，还提供了详细的日历初始化配置代码，包括各种日期和时间格式，以及自定义按钮文本。

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

给calendar设置最大宽度即可同时先销毁原来的日历，再次对日历进行初始化即可

代码参考

        #calendar {

            max-width: 1200px;



            margin: 0 auto;

        }

function initial() {
		var date = new Date();

		var d = date.getDate();

		var m = date.getMonth();

		var y = date.getFullYear();

		var calendar = $('#calendar').fullCalendar({

			contentHeight: window.innerHeight - 200,
			handleWindowResize: true,

			// locale 
			isRTL: false,
			monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
			dayNamesShort: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
			buttonText: {
				prev: '‹',
				next: '›',
				today: '今天',
				right: '添加'
			},
			firstDay: 1,
			buttonIcons: {
				prev: 'circle-triangle-w',
				next: 'circle-triangle-e'
			},
			header: {
				left: ' today', //左边按钮
				center: 'prev,title,next',
				right: ' ' //右边按钮
			},
			titleFormat: "yyyy年M月", //设置的是title上显示的日期
			timeFormat: "HH:mm", //设置的是添加的具体的日程上显示的时间
			weekMode: 'fixed',
			selectable: true,
			selectHelper: true,
			editable: false,
			events: [],
			windowResize: function (view) {
				$('#calendar').fullCalendar('destroy'); //销毁原来的日历
				initial() //生成新的日历

			}
		});
	}

这里注意的是，数据刷新需要去除即 eventRender属性请求接口获取日程，否则在拖动浏览器过程中会不断进行数据请求，不利于网站稳定性，会加大负载