Angular-ui calendar error

Question

I'm trying to configure the angular-ui calendar but I have an error when I run it.

TypeError: undefined is not a function
at Object.eventsWatcher.onChanged (http://localhost/fisioGest/js/calendar.js:262:41)

I can see the events and everything seems to work right but this error and I can't click on the events.

This the calendar controller of my app.js:

app.controller('main-controller',function($scope){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
this.tab=1;
this.titulopagina='Escritorio';
this.selectTab=function(setTab) {
    this.tab=setTab;
};
this.isSelected=function(checkTab) {
    return this.tab===checkTab;
};

  $scope.eventSources = [
[
    {
        "title": 'All Day Event',
        "start": new Date(y, m, d)
     },
     {
        "title": 'Long Event',
        "start": new Date(y, m, d - 5),
        "end": new Date(y, m, d - 2)
    }
  ]
];

$scope.calendarOptions = {
   calendar: {
   height: 500,
   editable: true,
   header: {
     left: 'title',
     center: '',
     right: 'prev,next basicWeek month agendaDay'
   },
 }
};


});

And this how I define my calendar:

<div id="calendar" ui-calendar="calendarOptions.calendar" ng-model="eventSources " class="p-relative p-10 m-b-20"></div>

Anthony Chu · Accepted Answer · 2014-10-29 17:08:16Z

1

Looking at the source of calendar.js, the line in question appears to be...

event._start = $.fullCalendar.moment(event.start);

It's likely you're missing moment.js. Take a look at their demo page and make sure you've included all the dependencies of fullcalendar.js (which is the library doing the heavy lifting under the covers) and that they're loaded in the proper order...

<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="../bower_components/moment/moment.js"></script>

<script src="../bower_components/angular/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="../bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="../bower_components/fullcalendar/dist/gcal.js"></script>
<script src="../src/calendar.js"></script>
<script src="calendarDemo.js"></script>

answered Oct 29, 2014 at 17:08

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

adpoy Over a year ago

Yes, the order was one of my mistakes. The other one was the libraries that I was using. I included some libraries from my bootstrap theme that doesn't work right with the fullcalendar.js Thanks!!

Blaise Over a year ago

why do you include jquery-ui?

Collectives™ on Stack Overflow

Angular-ui calendar error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related