Angular uiCalendar not redenring events

Question

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?

Don't Panic · Accepted Answer · 2017-10-18T14:15:37.110

0

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

edited Oct 18 '17 at 14:15

answered Oct 18 '17 at 08:08

Don't Panic

13,965
5
32
51

After changed all my events to use moment inputs i was getting the error "Cannot read property 'myCalendar' of undefined" from: `
` So i removed the 'myCalendar' reference since i only have one calendar and no erros on console but events still aren't visible on my calendar. Heres the resulting plunkr : https://plnkr.co/edit/Plscx3IiZb5h9cE7Wdv6?p=preview – Tiago Conceiçao Oct 18 '17 at 13:51
Your Plunker does not work at all for me, and shows 404s for various JS libs on the console. I don't know Angular so can't help you with that side of things - but your events now work fine, [see this JSFiddle](https://jsfiddle.net/w4Le1dqf/). – Don't Panic Oct 18 '17 at 14:04
Your right ! Also i was using an old version of full calendar that turns out to have a bunch of issues. It works now! Thanks. – Tiago Conceiçao Oct 18 '17 at 14:23

Angular uiCalendar not redenring events

1 Answers1