Test UI-Calendar

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js"></script>
<div ng-app="calendarDemoApp" class="container">
    <section id="directives-calendar" ng-controller="CalendarCtrl">
       
        <div class="well calWell">
            <div class="row-fluid">
                <div class="span8">
                
                    <div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar">
                    
                    </div>
                    </div>
                    </div>
                </div>
                </section></div>

CSS

/* Allows .modal-backdrop to remain on the page without blocking */
 .modal-backdrop {
    overflow: hidden;
    height: 0;
    -webkit-transition: opacity 0.15s linear, height 0 0.2s linear;
    -moz-transition: opacity 0.15s linear, height 0 0.2s linear;
    -ms-transition: opacity 0.15s linear, height 0 0.2s linear;
    -o-transition: opacity 0.15s linear, height 0 0.2s linear;
    transition: opacity 0.15s linear, height 0 0.2s linear;
}
.modal-backdrop.in {
    height: 100%;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    -ms-transition: opacity 0.15s linear;
    -o-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}
/*** Calendar ***/
 .calXBtn {
    float: right;
    margin-top: -5px;
    margin-right: -5px;
}
.calWell {
    float: left;
    margin: 40px;
    background: white;
}
.fc-event.openSesame {
    background-color: rgb(229, 229, 11);
    color: black;
}
.fc-event.customFeed {
    background-color: rgb(132, 222, 175);
    color: black;
}
.calTools {
    margin-bottom: 10px;
}

JavaScript

/**
 * calendarDemoApp - 0.9.0
 */
var calendarDemoApp = angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);

calendarDemoApp.controller('CalendarCtrl',

function ($scope, $compile, $timeout, uiCalendarConfig) {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $scope.currentView = 'month';

    /* 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 */
    $scope.eventsF = function (start, end, timezone, callback) {
        var s = new Date(start).getTime() / 1000;
        var e = new Date(end).getTime() / 1000;
        var m = new Date(start).getMonth();
        var events = [{
            title: 'Feed Me ' + m,
            start: s + (50000),
            end: s + (100000),
            allDay: false,
            className: ['customFeed']
        }];
        callback(events);
    };
    
    $scope.ev = {};
   /* Render Tooltip */
    $scope.eventRender = function (event, element, view) {};
    /* config object */
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            header: {
                left: 'title',
     ...