Skip to content

Instantly share code, notes, and snippets.

@joshkurz

joshkurz/app.html

Created September 12, 2012 20:17
Show Gist options
  • Save joshkurz/3709582 to your computer and use it in GitHub Desktop.
Save joshkurz/3709582 to your computer and use it in GitHub Desktop.
Download ZIP
angular calendar
Raw
app.html
<!doctype html>
<html ng-app="dialog">
<head>
<title>Full Calendar Test</title>
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.css"></link>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css"></link>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="https://raw.github.com/arshaw/fullcalendar/master/lib/jquery-ui-1.8.23.custom.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js" ng:autobind></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="app.js"></script>
<script src="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.min.js"></script>
<script src="https://raw.github.com/darrenhinderer/google-calendar-event-parser/master/gcal.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="addChild()">Add Child</button>
<ul>
<li ng-repeat="e in events">
<inplace model="e.title" changed="events"/></inplace>
<a class="left" ng-click="remove($index)">[x]</a>
</li>
</ul>
<div dev-calendar="{height: 400,editable: true}" ng-model='eventSource' changed='eventChanged' ></div>
</body>
</html>​​​
Raw
app.js
var myApp = angular.module('dialog', ['ui']);
function MainCtrl($scope) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$scope.eventChanged = 0;
$scope.eventSource = {
url: "https://www.google.com/calendar/feeds/jkurz25%40gmail.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
// For DEMO only This can be created however you please.
// *************
$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: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 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/'}]
$scope.addChild = function() {
$scope.events.push({
title: 'Click for Google ' + $scope.events.length,
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'http://google.com/'
});
$scope.events.dirty = true;
$scope.eventChanged = $scope.eventChanged + 1;
}
$scope.remove = function(index) {
$scope.events.splice(index,1);
$scope.events.dirty = true;
$scope.eventChanged = $scope.eventChanged + 1;
}
}
/*
* Implementation of JQuery FullCalendar
* inspired by http://arshaw.com/fullcalendar/
*
* Basic Calendar Directive that takes in live events as the ng-model and then calls fullCalendar(options) to render the events correctly.
*
* Authors
* @andyjoslin
* @joshkurz
*/
myApp.directive('devCalendar',['ui.config', '$parse', function (uiConfig,$parse) {
uiConfig.devCalendar = uiConfig.devCalendar || {};
//returns the calendar
return {
require: 'ngModel',
restrict: 'A',
scope: {
eventChanged: "=changed",
events: "=ngModel"
},
link: function(scope, elm, $attrs) {
var ngModel = $parse($attrs.ngModel);
var editEvents = [];
//update the calendar with the correct options
function update() {
//IF the calendar has options added then render them.
var expression,
options = {
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
// add event name to title attribute on mouseover.
eventMouseover: function(event, jsEvent, view) {
if (view.name !== 'agendaDay') {
$(jsEvent.target).attr('title', event.title);
}
},
// Calling the events from the scope through the ng-model binding attribute.
events: scope.events
};
if ($attrs.devCalendar) {
expression = scope.$eval($attrs.devCalendar);
} else {
expression = {};
}
//Set the options from the directive's configuration
angular.extend(options, uiConfig.devCalendar, expression);
elm.html('').fullCalendar(options);
}
update();
/*
*
* This is where I get confused. Not sure why you can only watch events.length to update the scope accordingly. If events is watched The console blows to shreds and nothing happens.
*
*
*/
scope.$watch( 'events.length', function( newVal, oldVal )
{
console.log( 'model changed:', newVal, oldVal );
update();
}, true );
}
};
}]);
//Include angular-ui dependency in resources on the side and as 'ui'
myApp.directive('inplace', function() {
return {
restrict: 'E',
transclude: true,
scope: {
model: '=model',
removeFn: '=onDelete',
events: '=changed'
},
template: '<span>'+
'<span class="c1" ng-hide="editorEnabled"'+
'ng-click="enableEditor();">{{model}}</span>' +
'<input ng-show="editorEnabled" ng-model="editModel"' +
'ng-required ui-keypress="{13: \'unEdit()\'}"'+
'ui-event="{\'blur\': \'unEdit()\'}"/>' +
'</span>',
// The linking function will add behavior to the template
link: function(scope, element, attrs, $parent, $timeout) {
scope.editorEnabled= false;
scope.unEdit = function() {
scope.model = angular.copy(scope.editModel);
scope.editorEnabled= false;
};
scope.enableEditor= function() {
scope.editModel = angular.copy(scope.model);
scope.editorEnabled = true;
};
}
}
});​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment