Tutorial: AngularJS Event Calendar - PHP, ASP.NET MVC 5 (Open-Source)

Features

• AngularJS event calendar
• Day and week view, bound to a shared calendar data source
• Modal dialog for event editing
• Date davigator
• Full source code (open-source)
• PHP backend with source code
• ASP.NET MVC 5 backend with source code

The source code of the tutorial is available for download.

Example - Quick Setup of the AngularJS Event Calendar

HTML

<daypilot-calendar id="week" daypilot-config="weekConfig" daypilot-events="events" ></daypilot-calendar>

AngularJS Controller

<script>
  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
      $scope.events = [];

      $scope.weekConfig = {
          viewType: "Week"
      };

      loadEvents();

      function loadEvents() {
        // using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
        $timeout(function() {
            var params = {
                start: $scope.week.visibleStart().toString(),
                end: $scope.week.visibleEnd().toString()
            }
            $http.post("backend_events.php", params).success(function(data) {
                $scope.events = data;
            });              
        });
      }
  });
</script>