AngularJS + Full Calendar

by Edward Tanguay

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<!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>
    <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="http://dl.dropbox.com/u/1510510/temp/demo/fullcalendar.min.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='events' changed='eventChanged' ></div>
  </body>
</html>

CSS

.fc-header-title h2 {
    font-size: .9em;
    white-space: normal !important;
}
.fc-view-month .fc-event, .fc-view-agendaWeek .fc-event {
    font-size: 10px;
    overflow: hidden;
    height: 20px;
}
.fc-view-agendaWeek .fc-event-vert {
    font-size: 0;
    
    width: 2px !important;
}
.fc-agenda-axis {
    width: 20px !important;
    font-size: .7em;
}

.fc-button-content {
    padding: 0;
}

.dateSelectors{
  float:left;
  margin-top:20px;
}

JavaScript

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;

    // 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...