Tutorial: AngularJS Hotel Room Booking (PHP)

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

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>