我已经使用带有 Angular UI 的 FullCalendar 设置了一个日历。它工作正常,我可以很好地切换事件类别,但是每次更新 eventSource 时,日历视图都会设置为当前日期。
我已经尝试使用该gotoDate
方法,我可以看到它可以工作(它也可以从控制台工作),但几乎是在日历恢复到当前日期之后立即进行的。由于我是 AngularJS 的新手,我可能把它gotoDate
放在了错误的地方。但我无能为力把它放在别处。
我正在使用一个服务,它返回一堆事件对象并将它们推送到eventSources
日历元素的 ng-model 中。没什么特别的,在控制器中我有:
$scope.eventSources = [];
var promise = UserCalendarEvents.get(groupName);
promise.then(
function(events) {
$scope.eventSources.push(events);
$('#events-calendar').fullCalendar('gotoDate', 2012, 11);
},
function(reason) {
console.log('Error: ' + reason);
}
);
在这种情况下,将获取并$scope.eventSources
填充事件。然后将日历视图设置为 2012 年 12 月,之后,几乎立即,视图切换到当前日期。是否是某种 ng-model 的手表重新渲染了 fullcalender,如果是这样,我该如何设置选择的日期?
更新:我结束了使用 joshkurz 修复,但是在一个修改版本中,尊重所选视图,即如果用户选择了 basicWeek 并更改源数据,则视图不应更改为例如月视图。这就是我的用户所需要的。
function update() {
scope.calendar = elm.html('');
var view = scope.calendar.fullCalendar('getView');
var m;
var xtraOptions = {};
//calendar object exposed on scope
if(view){
var viewDate = new Date(view.start);
if(m !== 'Invalid Date'){
y = viewDate.getFullYear();
m = viewDate.getMonth();
d = viewDate.getDate();
if(!isNaN(y) && !isNaN(m) && !isNaN(d)){
xtraOptions = {
year: y,
month: m,
date: d
};
}
}
view = view.name; //setting the default view to be whatever the current view is. This can be overwritten.
}
/* If the calendar has options added then render them */
var expression,
options = { defaultView : view, eventSources: sources };
if (attrs.uiCalendar) {
expression = scope.$eval(attrs.uiCalendar);
// Override defaultView if is set in ui-calendar attribute - OK?
if (expression.defaultView) {
expression.defaultView = view;
}
} else {
expression = {};
}
angular.extend(options, uiConfig.uiCalendar, expression, xtraOptions);
scope.calendar.fullCalendar(options);
}