-<div ui-calendar="{height: 450,editable: true}" class="span8 calendar" ng-model="eventSources"></div>
+<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="eventSources"></div>
function CalendarCtrl($scope) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
-
+ /* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
- };
-
+ };
+ /* 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)},
@@ -386,20 +393,64 @@
How?
{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/'}
];
-
- $scope.eventSources = [$scope.events, $scope.eventSource];
-
+ /* event source that calls a function on every view switch */
+ $scope.eventsF = function (start, end, 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);
+ };
+ /* alert on eventClick */
+ $scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
+ $scope.$apply(function(){
+ $scope.alertMessage = ('Day Clicked ' + date);
+ });
+ };
+ /* change view from scope
+ *
+ * a calendar object is attached to the scope,
+ * so that functions can be called at any time to control the calendar.
+ */
+ $scope.changeView = function(view){
+ $scope.calendar.fullCalendar('changeView',view);
+ };
+ /* add and removes an event source of choice */
+ $scope.addRemoveEventSource = function(sources,source) {
+ var canAdd = 0;
+ angular.forEach(sources,function(value, key){
+ if(sources[key] === source){
+ sources.splice(key,1)
+ canAdd = 1;
+ }
+ })
+ if(canAdd === 0){
+ sources.push(source);
+ }
+ };
+ /* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
- end: new Date(y, m, 29)
+ end: new Date(y, m, 29),
+ className: ['openSesame']
});
}
-
+ /* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
}
+ /* config object */
+ $scope.uiConfig = {
+ calendar:{
+ height: 450,
+ editiable: true,
+ dayClick: $scope.alertEventOnClick
+ }
+ };
+ /* event sources array*/
+ $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
diff --git a/js/app.js b/js/app.js
index f0cb15c..752e4fc 100644
--- a/js/app.js
+++ b/js/app.js
@@ -192,13 +192,13 @@ function CalendarCtrl($scope) {
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
-
+ /* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
- };
-
+ };
+ /* 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)},
@@ -207,19 +207,62 @@ function CalendarCtrl($scope) {
{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/'}
];
-
- $scope.eventSources = [$scope.events, $scope.eventSource];
-
+ /* event source that calls a function on every view switch */
+ $scope.eventsF = function (start, end, 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);
+ };
+ /* alert on eventClick */
+ $scope.alertEventOnClick = function( date, allDay, jsEvent, view ){
+ $scope.$apply(function(){
+ $scope.alertMessage = ('Day Clicked ' + date);
+ });
+ };
+ /* change view from scope
+ *
+ * a calendar object is attached to the scope that the calendar is called from, so that functions can be called at any time to control the calendar.
+ */
+ $scope.changeView = function(view){
+ $scope.calendar.fullCalendar('changeView',view);
+ };
+ /* add and removes an event source of choice */
+ $scope.addRemoveEventSource = function(sources,source) {
+ var canAdd = 0;
+ angular.forEach(sources,function(value, key){
+ if(sources[key] === source){
+ sources.splice(key,1)
+ canAdd = 1;
+ }
+ })
+ if(canAdd === 0){
+ sources.push(source);
+ }
+ };
+ /* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
start: new Date(y, m, 28),
- end: new Date(y, m, 29)
+ end: new Date(y, m, 29),
+ className: ['openSesame']
});
}
-
+ /* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
}
+ /* config object */
+ $scope.uiConfig = {
+ calendar:{
+ height: 450,
+ editable: true,
+ dayClick: $scope.alertEventOnClick
+ }
+ };
+ /* event sources array*/
+ $scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
}
/* EOF */