我正在使用angular-ui
/将fullcalendar.js添加到有角度的应用程序中ui-calendar
。
(angularjs 1.3.10
,fullcalendar 2.2.6
,ui-calendar 0.9.0-beta.1
,jQuery 2.1.3
,moment 2.9.0
和angular-moment 0.9.0
)
在日历中,我使用dayClick
as作为日期选择器类型的功能来:
-将选定的日期写入范围(用于应用程序中的其他用途)
-events
用选定的日期更新事件源对象数组
-显示选定的日期(即新近更新)event
)
我没有完成第一项和第二项任务的问题,但是第三项没有自动更新。
从文档中:
An Event Sources objects needs to be created to pass into ng-model. This object's values will be watched for changes. If a change occurs, then that specific calendar will call the appropriate fullCalendar method.
但是它似乎并没有自动更新日历...
这是错误,ui-calendar
还是我缺少什么?
有趣的是,如果我在ng-if
选项卡中有日历,并在选项卡之间切换,则日历会正确更新(在切换之后)。
请参阅此jsfiddle并:
-运行,然后选择一个日期(注意events
阵列已正确更新)
-切换Tab 2然后回到Tab 1-注意日期现在可以正确显示...
html看起来像:
<div ui-calendar="uiConfig.calendar" ng-model="calendarDate" calendar="myCalendar1"></div>
控制器代码如下所示
myApp.controller('MainCtrl', function($scope, $filter, moment, uiCalendarConfig){
$scope.calendarDate = [
{
events: [
{
title: 'From',
start: '2015-01-31',
allDay: true,
rendering: 'background',
backgroundColor: '#f26522',
},
],
}
];
$scope.setCalDate = function(date, jsEvent, view) {
var dateFrom = moment(date).format('YYYY-MM-DD'); // set dateFrom based on user click on calendar
$scope.calendarDate[0].events[0].start = dateFrom; // update Calendar event dateFrom
$scope.dateFrom = $filter('date')(dateFrom, 'yyyy-MM-dd');; // update $scope.dateFrom
};
$scope.uiConfig = {
calendarFrom : {
editable : false,
aspectRatio: 2,
header : {
left : 'title',
center : '',
right : 'today prev,next'
},
dayClick : $scope.setCalDate,
background: '#f26522',
},
};
});
PS看到了这个问题(类似),但是在很多版本之前就被问到了-另外,calendar.fullCalendar('refetchEvents');
由于calendar
未定义对象,因此建议的解决方案不起作用-不确定calendar.fullCalendar
我的代码是什么...
ui-calendar似乎是一个问题。到目前为止,我还无法解决。但是,作为一种解决方法,您可以创建一个新事件,而不是更新当前事件:只需替换$scope.calendarDate[0].events[0].start = dateFrom;
为$scope.calendarDate[0].events.push({title: 'From', start: selectedDate, allDay: true, rendering: 'background', backgroundColor: '#f26522'});
:http : //jsfiddle.net/gidoca/kwsrnopz/。
附带说明一下,要访问日历对象以调用fullCalendar函数,可以使用$ scope.myCalendar1-ui-calendar将其范围添加到具有HTML日历属性的给定名称的变量。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句