AngularJS Configurable Module for Setting An Appointment In The Calendar

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:


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', [

4. Add corner reservation directive on html page.

<!-- angular-reservation directive -->

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


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.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *