FullCalendar日历插件动态改变参数问题
$('#calendar').fullCalendar({ selectable: true, //选中样式 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], dayNamesShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], buttonText: { prev: '上一月', next: '下一月', prevYear: '上一年', nextYear: '下一年', today: '今天', month: '月', week: '周', day: '天' }, editable: false, droppable: false, lazyFetching: true, events: { url: "../Calendar/GetUnitWorkCalendarList", type: 'POST', data: { unitNodeId: unitNodeId }, error: function() { alert('there was an error while fetching events!'); }, color: 'yellow', // a non-ajax option textColor: 'black' // a non-ajax option } //返回数据源 })
用法如上,由于每次会传一个参数unitNodeId,翻了边文档,没发现有一个动态设置参数的方法,所以改造了下用另外一种方法实现如下:
$('#calendar').fullCalendar({ selectable: true, //选中样式 monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], dayNamesShort: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], buttonText: { prev: '上一月', next: '下一月', prevYear: '上一年', nextYear: '下一年', today: '今天', month: '月', week: '周', day: '天' }, editable: false, droppable: false, lazyFetching: true, // dayClick: function (date, allDay, jsEvent, view) { // alert(view.name); // }, eventClick: function (event, element) { workCalendarDetailId = event.id $("#dayTypeSave").linkbutton("enable"); $("#dayTypeCancel").linkbutton("enable"); currentEvent = event; } }) $('#calendar').fullCalendar('addEventSource', "../Calendar/GetUnitWorkCalendarList?unitNodeId=" + unitNodeId);
默认添加一个数据源,之后当触发一次参数改变时,先移除数据源,再重新添加一个数据源,用法如下:
var source = "../Calendar/GetUnitWorkCalendarList?unitNodeId=" + id; $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', source); //移除上一次数据源 $('#calendar').fullCalendar('removeEventSource', "../Calendar/GetUnitWorkCalendarList?unitNodeId=" + unitNodeId);
具体上面的一下用法请自行查看API说明。