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