Tutorial: AngularJS Hotel Room Booking (PHP)

This tutorial shows how to create a hotel room booking application using DayPilot AngularJS scheduler plugin. Includes a sample PHP project.
Oct 25, 2015
angularjs hotel room booking tutorial

Features

  • AngularJS Scheduler
  • Displaying one month
  • Switching the month using date navigator control
  • Support for check-in and check-out times (displays overnight hotel reservations)
  • Creating new reservations using drag and drop
  • Status of the reservation is marked using a custom color
  • Status of the room is marked using a custom color ("free", "cleanup", "dirty")
  • PHP backend (based on simple JSON endpoints)

Source code of the tutorial is available for download.

Example: Room Filtering

angularjs-hotel-room-filtering.png

This example shows how the sample application allows filtering rooms using AngularJS:

HTML

<div>
  Room Filter: 
  <select ng-model="roomType">
      <option value="0">All</option>
      <option value="1">Single</option>
      <option value="2">Double</option>
      <option value="4">Family</option>                            
  </select>
</div>

AngularJS Controller

<script>
  var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
      
      $scope.roomType = 0;
      $scope.$watch("roomType", function() {
          loadResources();
      });                    
      
      // ...

      function loadResources() {
          var params = {
              capacity: $scope.roomType
          };
          $http.post("backend_rooms.php", params).success(function(data) {
              $scope.schedulerConfig.resources = data;
              $scope.schedulerConfig.visible = true;
          });
      }
  });
</script>

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