javascript event calendar angularjs

AngularJS framework allows automatic two-way binding of UI controls and the underlying data. DayPilot includes an Event Calendar AngularJS plugin that will let you use the event calendar component with AngularJS and take advantage of the smooth data binding.

Tutorial

Demo

Installation

In order to use the AngularJS event calendar from DayPilot Pro for JavaScript package you need to include two libraries:

  • angular.min.js
  • daypilot-all.min.js

Make sure the that AngularJS library is loaded first.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="daypilot-all.min.js" type="text/javascript"></script>

AngularJS Event Calendar Directive

For performance reasons, the configuration and events are bound using separate attributes:

  • "config" (holds the event calendar configuration; also accessible using "daypilot-config" alias)
  • "events" (holds the event calendar event data; also accessible using "daypilot-events" alias)

You should also have to specify the id of the control:

  • id

The object representing the event calendar (DayPilot.Calendar class) will be stored in the $scope using the value of id attribute.

This example uses id="dp":

<div ng-app="main" ng-controller="CalendarCtrl" >
  <daypilot-calendar id="dp" ... ></daypilot-calendar>
</div>

You can access the object as $scope.dp later:

<script type="text/javascript">

  var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function($scope) {

      // ...

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

  });

</script>

Configuration

Specify the config variable using config attribute:

<daypilot-calendar id="dp" config="config" ... ></daypilot-calendar>

The structure of the config object is identical to the options object that can be passed to DayPilot.Calendar() constructor.

As soon as you set or change the config object the event calendar will be updated:

<script type="text/javascript">

  var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function($scope) {

      // ...

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

  });

</script>

Loading Event Data

Specify the events variable using events attribute:

<daypilot-calendar id="dp" events="events" ... ></daypilot-calendar>

The variable should hold an array of event data objects.

As soon as you set or change the events object the event calendar will be updated:

<script type="text/javascript">

  var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function($scope) {

      // ...

      $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"
          }
      ];

  });

</script>

Complete Example

<div ng-app="main" ng-controller="CalendarCtrl" >
  <daypilot-calendar id="dp" config="config" events="events" ></daypilot-calendar>
  <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('CalendarCtrl', function($scope) {

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

      $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>

AngularJS "Controller As" Syntax

You can use the event calendar with AngularJS "controller as" syntax:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="daypilot-all.min.js" type="text/javascript"></script>

<div ng-app="main" ng-controller="CalendarCtrl as ctrl" >
  <daypilot-calendar id="dp" config="ctrl.config" events="ctrl.events" publish-as="ctrl.calendar"></daypilot-calendar>
</div>

<script>
  var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function() {
    this.config = {
        startDate: "2014-09-01",
        viewType: "Week"
    };

    this.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"
        }
    ];

  });
</script>

The "controller as" syntax allows avoiding $scope parameter - it uses the controller instance for storing the context.

The DayPilot.Calendar object is stored in a variable specified using "publish-as" attribute.

See Also

AngularJS Event Calendar Module

The AngularJS event calendar plugin is part of the "daypilot" module. You should add it to the dependencies:

var app = angular.module('main', ['daypilot']).controller('CalendarCtrl', function($scope) {

  // ...

}