当前位置: 代码迷 >> 综合 >> fullcalendar的属性windowResize浏览器自适应不起作用
  详细解决方案

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

热度:57   发布时间:2023-11-01 20:14:43.0

给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属性请求接口获取日程,否则在拖动浏览器过程中会不断进行数据请求,不利于网站稳定性,会加大负载

  相关解决方案