javascriptangularjsfullcalendarui-calendar

Angular uiCalendar not redenring events

I am trying to build a week scheduler from angular ui calendar but i keep getting the error: 'Cannot read property "format" of null' and none of my list of events are showing. All dependencies are imported and i am declaring the ui calendar on index.html like so:

<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>

My angular module declararion:

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

The calendar appears on the page but none of my hard coded events(Events are declared in my controller). I have a plunker of this scheduler here: https://plnkr.co/edit/Plscx3IiZb5h9cE7Wdv6?p=preview

I have searched a lot on related issues but couldn't find a work around on this problem. How can i render these events properly?

Solution

  • Cannot read property "format" of null is an error related to start or end times - Fullcalendar is trying to format your dates and failing. That's because the events shown in your Plunker specify start and end dates as Javascript Date objects:

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

    That is not the format Fullcalendar requires - as the docs describe, you need to use:

    A Moment-ish input, like an ISO8601 string.

    An ISO8601 string looks like 2017-10-18. A quick fix if you want to stick with using Javascript's Date is to use toISOString():

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

    You could also switch to using Moment, which is required by Fullcalendar so already available:

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