Features

Appointment Maker convert any div in an appointment box

Features of Appointment Maker

  • Easy setup
  • Easy to configurate
  • Fast
  • No CSS framework needed
  • Compatible with bootstrap
  • Multilingual
  • Unlimited events
  • Seperate configuration for each event
  • Availability check with Ajax
  • No third party plugins required
  • Only 23kb (minified version)
  • Fully responsive
  • Fully customizable by css

Demo

This is a demonstration of Appointment Maker. The demo script does not submit any form

It can be used for bookings of events too. To add a payment step you can use the event 'am.ajax.confirm.sended' after submitting confirmation.

Installation

Step One

Include required scripts and css files in the head of your website

Required stuff:

  • jQuery
  • Moment.js with locales
  • Polyfill (only for IE to fix fill issue because IE does not recognize fill mehtod)
  • Appointment Maker core files
HTML Code Example
<!DOCTYPE html> 
<html lang="en">
<head>
	...
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<!-- CDN files jQuery and Moment .js -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<!-- cdn.polyfill.io - only for IE, to fix fill issue (IE not recognize method fill) -->
	<!-- if you dont use IE, remove it -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
	
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<!-- appointment maker core files .js -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<script src="js/jquery.appointment-maker.min.js"></script>
	
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<!-- appointment maker css files .css -->
	<!-- - - - - - - - - - - - - - - - - - - - - - - -->
	<link href="css/jquery.appointment-maker.min.css" rel="stylesheet">
	...
</head>
	...
</html>

Step Two

Add a container (e.g. div element) to your website

HTML Code Example
<!DOCTYPE html> 
<html lang="en">
	...
<body>	
	...
	<div id="appointment-maker"></div>
	...
</body>	
</html>

Step Three

Initiate Appointment Maker by $(you selector).appointment_maker()

HTML Code Example
<!DOCTYPE html> 
<html lang="en">
	...
<body>	
	...
</body>
<script>
	$('#appointment-maker').appointment_maker();
</script>
</html>

Events

am.ajax.error

Is triggered on ajax error

am.ajax.success

Is triggered when ajax request was successful

am.changed

Is triggered when appointment content has changed

am.before.back

Is triggered before going back

am.after.back

Is triggered after going back

am.time.clicked

Is triggered when clicked on time

am.day.clicked

Is triggered when clicked on a day

am.event.clicked

Is triggered when clicked on an event

am.ajax.confirm.sended

Is triggered if send confirmation was successful

am.new.appointment

Is triggered if make new appointment button was clicked

Methods

get_appointment

$('appointment maker selector').get_appointment() returns object with all infos (Event, Date, Time)

get_appointment()
$('#appointment-maker').get_appointment()
return get_appointment()
{
  "date": [
    "3",
    "2018",
    "11",
    "14"
  ],
  "time": "12:30",
  "event": {
    "listid": 0,
    "name": "Gynecologist",
    "customid": "event_001"
  }
}

Options

eventlist (required) (object)

Object with all events to show
{... name: ...} name is required
{... customid: ...} name is optional. Can be used for own identifier (e.g. in database)

eventlist example
eventlist: {0: {'name': 'Gynecologist', 'customid': 'event_001'},
			1: {'name': 'Dentist', 'customid': 'event_002'},
			2: {'name': 'Ophthalmologist', 'customid': 'event_003'},
			3: {'name': 'Dermatologist', 'customid': 'event_004'},
			4: {'name': 'Other'}}

With eventlist you can also set different appointments for each event. Best practice is to use ajax

eventlist ajax request example
eventlist: function(){
	var result;
	$.ajax({
		url: 'php_scripts/get_events.php',
		method: "POST",
		async: false,
		data: {},
		success: function(data) {
			result = $.parseJSON(data);
		},
		error: function() {
			result = {};
		}
	});
	return result;
}
Example php file for eventlist
<?php 
echo json_encode(array( array('name' => 'Gynecologist', 
							  'customid' => 'event_001', 
							  'start_date' => '2018-11-01', 
							  'end_date' => '2019-02-01', 
							  'disabled_days' => array('2018-11-26', '2018-12-13'),
							  'disabled_weekdays' => array(0,1,6), //(0 = Sunday -> 6 = Saturday)
							  'timelist' => array('0' => null,
												  '1' => array('09:00', '10:00', '11:00', '12:00', '15:00','16:00'),
												  '2' => array('09:00', '10:00', '11:00', '12:00', '15:00','16:00'),
												  '3' => array('09:00', '10:00', '11:00', '12:00'),
												  '4' => array('09:00', '10:00', '11:00', '12:00', '15:00','16:00'),
												  '5' => array('09:00', '10:00', '11:00', '12:00'),
												  '6' => null)),
					    array('name' => 'Dentist', 
							  'customid' => 'event_001', 
							  'disabled_days' => array(),
							  'disabled_weekdays' => array(0,6), //(0 = Sunday -> 6 = Saturday)
							  'timelist' => array('0' => null,
												  '1' => array('09:30', '10:30', '11:30', '12:30'),
												  '2' => array('09:30', '10:30', '11:30', '12:30', '15:30','16:30'),
												  '3' => array('09:30', '10:30', '11:30', '12:30'),
												  '4' => array('09:30', '10:30', '11:30', '12:30', '17:00'),
												  '5' => array('09:30', '10:30', '11:30', '12:30'),
												  '6' => null)),
						array('name' => 'Other')));
?>

disabled_days (array)

Will disable specific dates

disabled_days example
disabled_days: ['10-26-2018', '10-10-2018']

locale (string alpha-2 country code lowercase)

Set the moment.js locale

locale example
locale: 'en'

disabled_weekdays (array)

Will disable day in week

  • 0 = Sunday
  • 1 = Monday
  • 2 = Tuesday
  • 3 = Wednesday
  • 4 = Thursday
  • 5 = Friday
  • 6 = Saturday
disabled_weekdays example
disabled_weekdays: [0,6]

calendar_view (string)

Set the view of calender

Valid values:

  • 'month' = Shows the calender in month view
  • 'week' = Shows the calender in week view
calendar_view example
calendar_view: 'week'

show_format (moment.js format)

Format the show date output

Valid moment.js formats are here

show_format example
show_format: show_format: 'DD. MMMM YYYY' //(output 12. December 2018)

timelist (object)

Set the time list for appointments

timelist example
timelist: [
		[],	// Sunday	
		['09:00', '10:00', '11:00', '12:00', '15:00','16:00'], // Monday
		['09:00', '10:00', '11:00', '12:00', '15:00','16:00'], // Tuesday
		['09:00', '10:00', '11:00'], // Wednesday
		['09:00', '10:00', '11:00', '12:00', '15:00','16:00'], // Thursday
		['09:00', '10:00', '11:00', '12:00', '15:00','16:00'], // Friday
		[] // Saturday
]

use_timelist_ajax_request (boolean)

If true will get the time list with a ajax request. timelist_ajax_path has to be set if use_timelist_ajax_request is true

use_timelist_ajax_request example
use_timelist_ajax_request: true

timelist_ajax_path (path / url)

Only used if use_timelist_ajax_request is set to true. Will get the time list with availabilities from ajax call

$_POST variables are:

  • date['day'] = selected day of month
  • date['month'] = selected month
  • date['year'] = selected year
  • date['weekday'] = day in week (0 = sunday - 6 = saturday)
  • event['listid'] = event js ident
  • event['name'] = event name
  • event['customid'] = event custom ident
timelist_ajax_path example
timelist_ajax_path: 'php_scripts/get_timelist.php'
Example php file to get time list and availablilities
<?php 
echo json_encode(array('timelist' => array('09:30' => array('available' => 15),
										   '10:30' => array('available' => 8),
										   '11:30' => array('available' => 0),
										   '12:30' => array('available' => 20),
										   '15:30' => array('available' => 4),
										   '16:30' => array('available' => 12))));
?>

text_confirm_formfields (object)

Set the form field sfor the last step

Possible fields are:

  • Email
  • First name
  • Last name
  • Mobile number
  • Landline number

{... text: ...} is required
{... placeholder: ...} is optional

text_confirm_formfields example
text_confirm_formfields: {'firstname': {'text':'First name', 'placeholder':'First name (required)'},
						  'lastname': {'text':'Last name'},
						  'mobile': {'text':'Mobile number'},
						  'landline': {'text':'Landline number'},
						  'email': {'text':'Email'}}

If you need e.g just the email field then do following

text_confirm_formfields example
text_confirm_formfields: {'email': {'text':'Email'}}

submit_path (path / url)

Path where to submit the appointment. Submits are maked with ajax calls

$_POST variables are:

  • am-date['day'] = selected day of month
  • am-date['month'] = selected month
  • am-date['year'] = selected year
  • am-date['weekday'] = day in week (0 = sunday - 6 = saturday)
  • am-event['listid'] = event js ident
  • am-event['name'] = event name
  • am-event['customid'] = event custom ident
  • am-time = appointment time
  • am-email = email
  • am-firstname = first name
  • am-lastname = last name
  • am-mobile = mobile number
  • am-landline = landline number

Able to handle returns

submit_path example
submit_path: 'php_scripts/submit_form.php'

text_select_event (string)

Define the text for event selection

text_select_event example
text_select_event: 'Select an event'

text_select_day (string)

Define the text for day selection

text_select_day example
text_select_day: 'Select a day'

text_select_time (string)

Define the text for time selection

text_select_time example
text_select_time: 'Select a time'

text_calendar_week (string)

Define the text the calendar week

text_calendar_week example
text_calendar_week: 'Calendar week'

text_time_availability (string)

Define the text for availability

text_time_availability example
text_time_availability: 'Availability'

text_no_availability (string)

Define the text for no appointments available

text_no_availability example
text_no_availability: 'No appointment available'

text_your_appointment (string)

Define the text for selected appointment

text_your_appointment example
text_your_appointment: 'Your appointment'

text_your_data (string)

Define the text for fill out form

text_your_data example
text_your_data: 'Please fill out the form'

text_confirm_header (string)

Define the text for the confirmation header

text_confirm_header example
text_confirm_header: 'Confirmation'

text_confirm_button (string)

Define the text for the confirmation button

text_confirm_button example
text_confirm_button: 'Confirm Appointment'

text_confirm_done (string)

Define the text for the confirmation done

text_confirm_done example
text_confirm_done: 'Thanks you.<br>We have noted the appointment for you.'

text_another_appointment (string)

Define the text for the make another appointment button

text_another_appointment example
text_another_appointment: 'Make another appointment'