AngularJS

Example

<div ng-app="main" ng-controller="DemoCtrl" >
  <daypilot-month id="dp" daypilot-config="config" daypilot-events="events" ></daypilot-month>
  <div>
      New event:
      <button ng-click="add()">Add</button>
  </div>
  <div>
      First event:
      <button ng-click="move()">Move</button>
      <button ng-click="rename()">Rename</button>
  </div>
  <div>
      Object:
      <button ng-click="message()">Show Message</button>
  </div>
  <div>
      Events array (debug):
      <div ng-repeat="item in events">
          {{item}}
      </div>

  </div>
</div>

<script type="text/javascript">

  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope) {
      $scope.name = "me";

      $scope.config = {
          startDate: "2014-09-01"
      };

      $scope.events = [
          {
              start: new DayPilot.Date("2014-09-01T10:00:00"),
              end: new DayPilot.Date("2014-09-01T14:00:00"),
              id: DayPilot.guid(),
              text: "First Event"
          }
      ];

      $scope.add = function() {
          $scope.events.push(
              {
                  start: new DayPilot.Date("2014-09-01T10:00:00"),
                  end: new DayPilot.Date("2014-09-01T12:00:00"),
                  id: DayPilot.guid(),
                  text: "Simple Event"
              }
          );
      };

      $scope.move = function() {
          var event = $scope.events[0];
          event.start = event.start.addDays(1);
          event.end = event.end.addDays(1);
      };

      $scope.rename = function() {
          $scope.events[0].text = "New name";
      };

      $scope.message = function() {
          $scope.dp.message("Hi");
      };

  });

</script>