Appointment-Management-System

Front-end web application written in JS to allow customer booking and management of availability/appointments by a business. This is being designed as a project for an existing website so small modifications might be required for implementation on other websites.

Screenshots

1. Initial user view of the booking panel:

2. View when a reservation time is clicked by user:

3. View when user enters reservation information:

4. View logging in to management panel:

5. View management panel:

Installation

• Download the zip file and unpack into a folder at the directory level your html page is located at.

1. Add the following lines of code to the head to reference the CSS styles:

   <link rel="stylesheet" href="/stylesheet/jsCalender.css">

   <link rel="stylesheet" href="/stylesheet/jsCalenderclean.css">

   <script type="text/javascript" src="/js/jscalender.js"></script>

2. Add the following lines of code to the body to reference the JS scripts:

   <script src="/later-master/later.min.js" type="text/javascript"></script>

   <script src="/schedule-master/schedule.min.js" type="text/javascript"></script>

• The appointment management tool utilizes an SQL database on the localhost to post/get appintment time data. The following configuration is how your SQL database should be configured:
  1. Create tables 'Availability', 'Bookings', and 'Credentials':
  2. Populate columns in 'Availability' as depicted:
  3. Populate columns in 'Bookings' as depicted:
  4. Populate columns in 'Credentials' as depicted: