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

This tutorial shows how to create an event calendar with day and week views in AngularJS. Includes sample projects with PHP and ASP.NET MVC 5 source code.
Mar 15, 2015
angularjs event calendar 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

angularjs-event-calendar-week-data.png

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>

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java