AngularJS configurable module for setting an appointment in the calendar. It can be used to make a reservation in a restaurant, clinic, barber shop, or any type of service provided at intervals.

angular js module dependencies, angularjs module example, angular js module config, angular calendar, free angular scheduler, angular calendar scheduler github

How to make use of it:

Installation:

bower install --save angular-reservation

1. Load AngularJS, dependencies script files, and angular-reservation.min.js script files into your index.html.

<!-- Angular reservation dependencies -->
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<!-- Angular reservation minified -->
<script type="text/javascript" src="bower_components/angular-reservation/dist/angular-reservation.min.js"></script>

2. Load bootstrap css and angular-reservation.min.css into your index.html.

<!-- Compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="components/bootstrap/bootstrap.min.css">
<!-- Angular reservation minified css -->
<link rel="stylesheet" href="bower_components/angular-reservation/dist/angular-reservation.min.css">

3. Add “hm.reservation” to the module’s dependencies list.

angular.module('myApp', [
    'hm.reservation'
])

4. Add corner reservation directive on html page.

<!-- angular-reservation directive -->
<reservation></reservation>

5. Module configuration.

//Minimal configuration of reservation module
angular.module('myApp').config(function (reservationConfigProvider) {
    var config = {
        getAvailableHoursAPIUrl: "API-URL/availableHours", //API url endpoint to load list of available hours
        reserveAPIUrl: "//API-URL/reserve", //API url endpoint to do a reserve
    };

    reservationConfigProvider.set(config);
});

6. You can also extend the unit configuration from the controller.

<!-- angular-reservation directive -->
<reservation config="myCtrl.config"></reservation>

Configuration options

You can configure the angular-reservation module during the config phase by passing configuration options.

• getAvailableDatesFromAPI: Enable/disable a load of available dates from a REST API. The default value is false.
• getAvailableDatesAPIUrl: API URL to load the list of available dates. Only needed if getAvailableDatesFromAPI option is true.
• getAvailableHoursAPIUrl: API URL to load the list of available hours for a selected date.
  reserveAPIUrl: API URL to reserve a selected hour for the selected date, passing client data JSON.
  dateFormat: Date format to show selected date, can be any valid date format. The default value is “yyyy-MM-dd“.
• language: Language to be used, valid values are “en” for English and “es” for Spanish. The default value is “en”.
• showConfirmationModal: Shows or not confirmation modal on reserve button click, valid values are true or false. The default value is true.
• datepickerTemplate: Datepicker template to override default datepicker template, see examples above. The default value is datepicker.html.
• availableHoursTemplate: Available hours template to override default available hours template, see examples above. The default value is availableHours.html.
• noAvailableHoursTemplate: No available hours template to override default no available hours template, see examples above. The default value is noAvailableHours.html.
• clientFormTemplate: Form template to override default client form, see examples above. The default value is clientForm.html.
• confirmationModalTemplate: Modal template to override default confirmation modal, see examples above. The default value is confirmationModal.html.

angularjs configurable reservation module, angular-reservation Plugin/Github, scheduler in angular 8

See Demo And Download

Official Website(hmartos): Click Here

This superior jQuery/javascript plugin is developed by hmartos. For extra advanced usage, please go to the official website.