2016-05-30 25 views
0

Ich habe Probleme bei der Implementierung fullCalendar für Angular. Unten ist mein Code:Wie zu implementieren Angular Vollkalender Ui

<html> 
<meta charset="utf-8"> 
<head> 

    <!-- Stylesheets --> 
    <link rel="stylesheet" href="css/fullcalendar.css"/> 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 

    <!-- JS library. --> 
    <script src="js/lib/jquery.min.js"></script> 
    <script src="js/lib/moment.min.js"></script> 
    <script src="js/lib/angular.js"></script> 
    <script src="js/lib/ui-bootstrap-tpls-1.3.3.min.js"></script> 

    <!-- FullCalendar --> 
    <script src="js/fullcalendar/calendar.js"></script> 
    <script src="js/fullcalendar/fullcalendar.js"></script> 
    <script src="js/fullcalendar/sv.js"></script> 
    <script src="js/fullcalendar/gcal.js"></script> 

    <!-- app/controller --> 
    <script type="text/javascript" src="js/schedule.js"></script> 

</head> 
<body ng-app="schedule"> 
<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"> 

</body> 
</html>` 

Und das ist die app/controller:

'use strict'; 

var app = angular.module('schedule',['ui.calendar']) 
.controller('scheduleCtrl', function($scope){ 

    $scope.events = [ 
        {id: 1, title: 'Test', start:'2016-05-30T16:00:00', end: '2016-05-30T12:00:00'}, 
        ]; 
    $scope.eventSources = [$scope.events]; 

    $scope.uiConfig = { 
      calendar:{ 
      height: 450, 
      editable: true, 
      header: { 
       left: 'month basicWeek basicDay agendaWeek agendaDay', 
       center: 'title', 
       right: 'today prev, next', 
      }, 
      dayClick: $scope.alertEventOnClick, 
      eventDrop: $scope.alertOnDrop, 
      eventResize: $scope.alertOnResize 
      } 
    } 

}); 

Aber ich unten Fehler bin immer von moment.min.js: angezeigt

angular.js:13550 TypeError: Cannot read property '4' of undefined at A.ca [as months] (moment.min.js:6) at o. (moment.min.js:7) at Object.MMMM (moment.min.js:6) at U (moment.min.js:6) at o.wb (moment.min.js:6) at oldMomentFormat (fullcalendar.js:1549) at formatSimilarChunk (fullcalendar.js:1726) at formatRangeWithChunks (fullcalendar.js:1657) at formatRange (fullcalendar.js:1630) at FC.View.Class.extend.formatRange (fullcalendar.js:7944)

nach Erhalt der prev und next Taste und angeklickt. Ich habe herausgefunden, dass es ungefähr Monate in moment.min.js ist.

Antwort

0

Ereignis start und end sollte ein gültiges js aktuell sein

entweder

new Date(year, month, day, hours, minutes, seconds, milliseconds)

oder

with moment(2016-05-30 09:30:26)

können Sie versuchen, Termine, wie unten

$scope.events = [ 
     {title: 'All Day Event',start: new Date(y, m, 1)}, 
     {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)}, 
     {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false}, 
     {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false}, 
     {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false}, 
     {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'} 
    ]; 
Einstellung