ui-calendar directive 


A complete AngularJS directive for the Arshaw FullCalendar.

Requirements

- (AngularJS)
- (fullcalendar.js 2.0 and it's dependencies)
- optional - (gcal-plugin)

Usage

Using bower run:

bower install --save angular-ui-calendar

Alternatively you can add it to your bower.json like this:

dependencies: {
"angular-ui-calendar": "latest"
}

And then run

bower install

This will copy the ui-calendar files into your components folder, along with its dependencies. Load the script and style files in your application:










Add the calendar module as a dependency to your application module:

var app = angular.module('App', ['ui.calendar'])

Apply the directive to your div elements. The calendar must be supplied an array of documented event sources to render itself:



Define your model in a scope e.g.

$scope.eventSources = [];

Options

All the Arshaw Fullcalendar options can be passed through the directive. This even means function objects that are declared on the scope.

myAppModule.controller('MyController', function($scope) {
/ config object /
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
header:{
left: 'month basicWeek basicDay agendaWeek agendaDay',
center: 'title',
right: 'today prev,next'
},
dayClick: $scope.alertEventOnClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize
}
};
});