Angular uiCalendar ne redenring pas les événements

Je suis en train de construire un planificateur de semaine à partir du calendrier ui angulaire, mais je reçois toujours l'erreur: "Impossible de lire la propriété" format "null" et aucune de mes listes d'événements. Toutes les dépendances sont importées et je déclare le calendrier sur ui index.html comme ceci:Angular uiCalendar ne redenring pas les événements

<body ng-controller="MainCtrl"> 
<div class="row" on-load="renderCalendar('myCalendar');"> 
    <div class="col-md-4"> 
    <h1>All Events</h1> 
    <ul> 
     <li class="event" ng-repeat="event in eventSource"> 
     {{event.title}} 
     <button type="button" class="btn btn-danger" ng-click="removeEvent($index)"> delete</button> 
     </li> 
    </ul> 
    </div> 
    <div class="col-md-8"> 
    <div ui-calendar="uiConfig.calendar" ng-model="eventSource" calendar="myCalendar"></div> 
    </div> 
</div>

Mon Module angulaire declararion:

var app = angular.module('calendar-app', 
['ngResource', 
'ui.calendar'] 
);

Le calendrier apparaît sur la page, mais aucun de mes événements codés durs (Les événements sont déclarés dans mon contrôleur). J'ai un plunker de ce planificateur ici: https://plnkr.co/edit/Plscx3IiZb5h9cE7Wdv6?p=preview

J'ai beaucoup cherché sur des questions connexes, mais je n'ai pas pu trouver de solution à ce problème. Comment puis-je rendre ces événements correctement?

Source

2017-10-17 Tiago Conceiçao

Cannot read property "format" of null est une erreur liée aux heures de début ou de fin - Fullcalendar essaie de formater vos dates et d'échouer. En effet, les événements affichés dans votre Plunker spécifier le début et de fin comme Javascript Date objets:

{title: 'All Day Event',start: new Date(y, m, 6),allDay:true},

Ce n'est pas le format Fullcalendar exige - as the docs describe, vous devez utiliser:

A Moment-ish input, like an ISO8601 string.

Une chaîne ISO8601 ressemble à 2017-10-18. Une solution rapide si vous voulez coller avec l'aide de JavaScript de Date est d'utiliser toISOString():

{title: 'All Day Event', start: new Date(y, m, 6).toISOString(), allDay:true},

Vous pouvez également passer à l'aide de Moment, qui est requis par Fullcalendar est déjà disponible:

{title: 'All Day Event', start: moment().date(6), allDay:true},

Source

2017-10-18 08:08:25

Après tout changé mes événements pour utiliser les entrées instantanées je recevais l'erreur "Impossible de lire la propriété 'myCalendar' de undefined" de: '

' J'ai donc supprimé la référence 'myCalendar' car je n'ai qu'un calendrier et aucune erreur sur la console mais les événements ne sont pas visibles sur mon calendrier. Heres le plunkr résultant: https://plnkr.co/edit/Plscx3IiZb5h9cE7Wdv6?p=preview –

Votre Plunker ne fonctionne pas du tout pour moi, et montre 404s pour diverses bibliothèques JS sur la console. Je ne sais pas Angular donc je ne peux pas vous aider avec ce côté des choses - mais vos événements fonctionnent maintenant bien, [voir ce JSFiddle] (https://jsfiddle.net/w4Le1dqf/). –

Votre droit! Aussi, j'utilisais une ancienne version du calendrier complet qui s'avère avoir un tas de problèmes. Ça fonctionne maintenant! Merci. –

Angular uiCalendar ne redenring pas les événements

Répondre

Questions connexes