Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Purvi Agrawal
Purvi Agrawal
7,960 Points
Posted by Purvi Agrawal
Purvi Agrawal
7,960 Points

Unable to render the calendar properly for Full Calendar Angular JS Directive

I am new to Angular js and have to incorporate an Admin LTE full calendar feature in my webapp. I found an angular directive for the Arshaw FullCalenda JQuery plugin. The link to the directive is here : http://angular-ui.github.io/ui-calendar/

Although I am able to display the calendar, I am not able to get the previous, today and next feature work for the calendar. This help to toggle between the months of the calendar. I know this feature is inside the uiConfig but I am not able to understand why this feature doesn't get rendered. Below is my code. I have included all the files neccessary for the plugin but did not show in index.html.

index.html

<div class="calendar" ng-model="testevents" config="uiConfig.calendar" ui-calendar="{{uiConfig.calendar}}"></div>

calendarController.js

app.controller("calendarController", ["$scope", "displayCalendar", "dialogs", "$filter", function ($scope, displayCalendar, dialogs, $filter) {

    $scope.$parent.pageTitle = "Displays Reporting Period Start and End Dates";

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


    $scope.form = {};

    $scope.testevents = {
        events: [
            {
                title: 'event1',
                start: '2015-12-12'
            },
            {
                title: 'event2',
                start: '2015-12-11'
            }
            // etc...
        ],
        color: 'yellow',   // an option!
        textcolor: 'black' // an option!
    };

}]);