Full calender doesn't display with AngularJS

Question

I am using fullcalender.js and AngularJS. The issue I have now is that my calender does not display and I don't get any error so I am not sure what am I missing.

This is my first time using AngularJS with fullcalender.

HTML:

<div id="calendar" class="fc fc-ltr">
</div>

Scripts:

<script src="../Scripts/fullcalendar.js"></script>
<script src="../Scripts/gcal.js"></script>
<script src="../js/Calender-Controller.js"></script>

JS: This file I got from demo

angular.module('myCalendarApp', ['ui.calendar']);
function CalendarCtrl($scope, $http) {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var currentView = "month";


//event source that pulls from google.com
$scope.eventSource = {
    url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
    className: 'gcal-event',           // an option!
    currentTimezone: 'America/Chicago' // an option!
};


//This will call onLoad and you can assign the values the way you want to the calendar
//here DataRetriever.jsp will give me array of JSON data generated from the database data
//$http.get('DataRetriever.jsp').success(function (data) {
//    for (var i = 0; i < data.length; i++) {
//        $scope.events[i] = { id: data[i].id, title: data[i].task, start: new Date(data[i].start), end: new Date(data[i].end), allDay: false };
//    }
//});


//to explicitly add events to the calendar
//you can add the events in following ways
$scope.events = [
  {title: 'All Day Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)')},
  {title: 'Long Event',start: new Date('Thu Oct 17 2013 10:00:00 GMT+0530 (IST)'),end: new Date('Thu Oct 17 2013 17:00:00 GMT+0530 (IST)')},
  {id: 999,title: 'Repeating Event',start: new Date('Thu Oct 17 2013 09:00:00 GMT+0530 (IST)'),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/'}
];
//we don't need it right now*/


//with this you can handle the events that generated by clicking the day(empty spot) in the calendar
$scope.dayClick = function (date, allDay, jsEvent, view) {
    $scope.$apply(function () {
        $scope.alertMessage = ('Day Clicked ' + date);
    });
};


//with this you can handle the events that generated by droping any event to different position in the calendar
$scope.alertOnDrop = function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
    $scope.$apply(function () {
        $scope.alertMessage = ('Event Droped to make dayDelta ' + dayDelta);
    });
};


//with this you can handle the events that generated by resizing any event to different position in the calendar
$scope.alertOnResize = function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
    $scope.$apply(function () {
        $scope.alertMessage = ('Event Resized to make dayDelta ' + minuteDelta);
    });
};

/*
//this code will add new event and remove the event present on index
//you can call it explicitly in any method
  $scope.events.push({
    title: 'New Task',
    start: new Date(y, m, 28),
    end: new Date(y, m, 29),
    className: ['newtask']
  });

$scope.events.splice(index,1);*/


//with this you can handle the click on the events
$scope.eventClick = function (event) {
    $scope.$apply(function () {
        $scope.alertMessage = (event.title + ' is clicked');
    });
};


//with this you can handle the events that generated by each page render process
$scope.renderView = function (view) {
    var date = new Date(view.calendar.getDate());
    $scope.currentDate = date.toDateString();
    $scope.$apply(function () {
        $scope.alertMessage = ('Page render with date ' + $scope.currentDate);
    });
};


//with this you can handle the events that generated when we change the view i.e. Month, Week and Day
$scope.changeView = function (view, calendar) {
    currentView = view;
    calendar.fullCalendar('changeView', view);
    $scope.$apply(function () {
        $scope.alertMessage = ('You are looking at ' + currentView);
    });
};


/* config object */
$scope.uiConfig = {
    calendar: {
        height: 450,
        editable: true,
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
        dayClick: $scope.dayClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventClick: $scope.eventClick,
        viewRender: $scope.renderView
    }
};

/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
};

Answer 1

Judging by your script inclusions code and considering the demo you mentioned, make sure that all libraries are in place. If the code posted is really everything you got running, your <script> block doesn't include all libraries.

JS

1. jquery-ui.min.js (missing in your libraries)
2. jquery.min.js (missing in your libraries)
3. fullcalendar.js
4. calendar.js (missing in your libraries)
5. angular.js (missing in your libraries)
6. bootstrap.js (missing in your libraries)

CSS

1. fullcalendar.css (missing in your libraries)
2. bootstrap.css (missing in your libraries)

Once you ensure that, probably there must be some error message or clue to get you going.

---

UPDATE

Make sure you have your calendar initialized as below:

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});

from http://arshaw.com/fullcalendar/docs/usage/

Answer 2

First of all, I am not sure how original/correct the blog post tutorial you are following. It seems to be very similar to this , which is the official guide to the Angular UI Calendar. The main mistake you have made following this tutorial is that you have not included calendar.js which can be found here, and essentially the script that creates the 'ui.calendar' module, which your 'myCalendarApp' module is gonna be dependent on.

However, I suggest you ignore the above tutorial and implement the Calendar using the Angular UI-Calendar, which is the 'correct' way of doing.

Using of Angular-UI calendar directive is well documented here. This should be straight forward and produce much clear code.

Answer 3

There is an angular directive for the Arshaw FullCalendar, it's part of the AngularUI project, I use it and it works fine : https://github.com/angular-ui/ui-calendar.