A complete AngularJS directive for the Arshaw FullCalendar.
- (fullcalendar.css)
- (JQuery)
- (JQueryUI)
- (AngularJS)
- (fullcalendar.js)
- optional - (gcal-plugin)
We use testacular and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:
npm install -g grunt-cli
npm install
bower install
grunt
We use bower for dependency management. Add
dependencies: {
"angular-ui-calendar": "latest"
}
To your components.json
file. Then run
bower install
This will copy the ui-calendar files into your components
folder, along with its dependencies. Load the script files in your application:
<script type="text/javascript" src="components/jquery/jquery.js"></script>
<script type="text/javascript" src="components/jquery-ui\ui\jquery-ui.custom.js"></script>
<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="components/angular-ui-calendar/calendar.js"></script>
Add the calendar module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.calendar'])
Apply the directive to your div elements:
<div ui-calendar>
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
}
};
});
<div ui-calendar="calendarOptions" ng-model="eventSources">
The ui-calendar directive plays nicely with ng-model.
An Event Sources objects needs to be created to pass into ng-model. This object will be watched for changes and update the calendar accordingly, giving the calendar some Angular Magic.
The ui-calendar directive expects the eventSources object to be any type allowed in the documentation for the fullcalendar. docs
Note that all calendar options are passed directly into fullCalendar
, so you will need to wrap listeners to fullCalendar events in scope.$apply
, as in example above.
To avoid potential issues, by default the calendar object is not available in the parent scope. Access the object by declaring a name:
<div ui-calendar="calendarOptions" ng-model="eventSources" calendar="myCalendar">
Now the calendar object is available in the parent scope:
$scope.myCalendar.fullCalendar
This allows you to declare any number of calendar objects with distinct names.
The calendar works alongside of all the documentation represented here
PR's are welcome at any time. Make sure that if a new feature is added, that the proper tests are created. We are following a linear approach to this directives history, so PR's are never merged through github's client.