Я пытаюсь реализовать угловой календарь. Я установил все необходимые зависимости с помощью bower, включил скрипты следующим образом:
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/gcal.js"></script>
HTML:
<div id="calendar" ui-calendar="calendarOptions.calendar" ng-model="eventSources" ng-controller="MyController"></div>
Ниже приведен код JavaScript:
myAppModule.controller('MyController', function($scope) {
/* config object */
$scope.eventSources = {
events: [
{
title: 'Event1',
start: '2014-07-19'
},
{
title: 'Event2',
start: '2011-07-20'
}
],
color: 'red', // an option!
textColor: 'black' // an option!
};
$scope.calendarOptions = {
calendar:{
height: 300,
editable: true,
header:{
left: 'title',
center: '',
right: 'prev,next basicWeek month agendaDay'
},
dayClick: function(date, jsEvent, view) {
$('.calendar-input').show();
console.log(this)
$('#create-event').click(function() {
$scope.eventSources.events.push({
title: 'Event2',
start: '2014-07-20',
end: '2014-07-22'
});
$('.calendar-input').hide();
});
},
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize
}
};
});
UI работает отлично для меня, кнопки также отлично работают при переключении между режимами календаря (basicWeek, month и AgendaDay). Но когда я обновляю страницу, я вижу 4 идентичные ошибки в консоли:
TypeError: Cannot read property 'length' of undefined
at Object.getTokens (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular-ui- calendar/src/calendar.js:86:36)
at Scope.$digest (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:12439:40)
at Scope.$apply (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:12712:24)
at file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1419:15
at Object.invoke (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:3918:17)
at doBootstrap (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1417:14)
at bootstrap (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1431:12)
at angularInit (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:1344:5)
at HTMLDocument.<anonymous> (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/angular/angular.js:21817:5)
at j (file:///Users/vtaliar/Dropbox/Phil/Company/bower_components/jquery/dist/jquery.min.js:2:26860) angular.js:9997
(anonymous function) angular.js:9997
(anonymous function) angular.js:7299
Scope.$digest angular.js:12466
Scope.$apply angular.js:12712
(anonymous function) angular.js:1419
invoke angular.js:3918
doBootstrap angular.js:1417
bootstrap angular.js:1431
angularInit angular.js:1344
(anonymous function) angular.js:21817
j jquery.js:3073
k.fireWith jquery.js:3185
n.extend.ready jquery.js:3391
Как вы можете видеть, я пытаюсь показать два события, когда страница загружена, но я не могу. Кроме того, в мероприятии dayClick я хочу расширить свою модель и добавить еще одно событие в календарь.
В документации говорится, что при нажатии на какую-либо ячейку (срабатывает событие dayClick) это должно указывать на текущий элемент td, который был нажат, но в моем случае это как-то указывает на окно.
Может ли кто-нибудь сказать мне, что я делаю неправильно? У меня нет большого опыта работы с Angular, возможно, я ошибся здесь. Большое спасибо за вашу помощь.
С наилучшими пожеланиями
eventsources должен быть массивом массива объектов событий. Измените свои источники событий на что-то вроде следующего.
$scope.events = [
{
title: 'Event1',
start: '2014-07-19'
},
{
title: 'Event2',
start: '2011-07-20'
}
];
$scope.eventSources = [$scope.events];
Надеюсь, это поможет
Мне было интересно несколько вещей, поэтому я создал Plunk, чтобы проверить это.
Единственная проблема, которую я обнаружил, – это dayClick передает 4 аргумента (event, date, jsEvent, view) это, скорее всего, из-за того, что вы получили объект окна, добавив, что событие прошло элемент в моем тестировании.
Ошибка длины относится к GetTokens, которая, глядя на код календаря, показывает, что она относится к длине массива конфигурации. Убедитесь, что ваш массив закрыт правильно и не имеет каких-либо ошибочных точек с запятой, вы отрезали конец функции, поэтому я не могу сказать точно.
Все остальное выглядит хорошо, мне пришлось включить moment.js, но вы должны получить сообщение об ошибке, если это случится для вас, Боувер, вероятно, позаботился об этом.
http://plnkr.co/edit/AIHgM2lz5OlmzOVGroQ0?p=info
Используемая документация: