1

I am building an event scheduling app by using angular js framework and fullcalendar plugin. I tried to google and implement different ways to make the calendar visible but it's not working. I have attached my snippets as follows:

HTML:

Planning App

<!-- the following 5 js files are required to use CSOM -->
<script type="text/javascript" src="../_layouts/1033/init.js"></script>
<script type="text/javascript" src="../_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="../_layouts/15/sp.js"></script>
<script type="text/javascript" src="../_layouts/15/sp.core.js"></script>

<!--StyleSheets-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.css" />
<link href="../Content/App.css" rel="stylesheet" />

<!--jQuery-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.min.js"></script>

<script type="text/javascript" src="../Scripts/App.js"></script>
<script type="text/javascript" src="../Scripts/LoginCtrl.js"></script>
<script type="text/javascript" src="../Scripts/calendarCtrl.js"></script>

<div class="container">


     <div ng-controller="calendarEvent">
    <div id="calendar" ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>
 </div>

</div>

CalendarCtrl.js

'use strict';

scheduleApp.controller('calendarEvent', ['$scope', '$compile', function ($scope, $compile) { 

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


    /* event source that contains custom events on the scope */
    $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/' }
    ];
    /* event source that calls a function on every view switch */


    /* Render Tooltip */
    $scope.eventRender = function (event, element, view) {
        element.attr({
            'tooltip': event.title,
            'tooltip-append-to-body': true
        });
        $compile(element)($scope);
    };

    /* config object */
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next'
            },
            eventRender: $scope.eventRender
        }   
    };
    /* event sources array*/
    $scope.eventSources = [$scope.events];

}]);

App.js

var scheduleApp = angular.module('scheduleApp', ['ngRoute', 'ui.calendar', 'ui.bootstrap']);
  • Where is ng-app="scheduleApp"? – eirikb Jun 13 '15 at 12:42
  • sorry for not putting the code properly. I have it on my index.html . <html lang="en" xmlns="w3.org/1999/xhtml" data-ng-app="scheduleApp"> – gunu Jun 13 '15 at 13:13

protected by Community Dec 5 '16 at 1:29

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Browse other questions tagged or ask your own question.