clockSchedulerJS

(Beta Version)
Display's a clock with highlighted scheduled area. Also has an alarm with notification for the scheduled time.

USAGE Step-wise:::::::

1. Include the `clock.js` in your application's footer area.
   

   <script src="clock.js"></script>

   Note:: jQuery is prerequisite. Place it above the clockSchedulerJS.
   You can use jQuery version of your choice, for easy reference:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. Include the `clock.css` stylesheet in your application.
   

   <link rel="stylesheet" type="text/css" href="clock.css">

3. Insert this clock snippet in your html-body
   

   <div class='iasClockDiv'>
   	<canvas class='iasClockCanvas' id='iasClockCanvas' width='150px' height='150px'></canvas>
   	<div class='shadow-element'></div>
   	<div class='hover-element'>
   		<button class='plusBtn' onclick='createMeeting();'>+</button>
   		<button class='listBtn' onclick='listAll();'>List</button>
   	</div>
   </div>

4. Call JS function `startClock( MeetingArr, ShowMinutesFlag );` on document load.
   Explaining -
   
   1. There are 2 parameters for the function, as below ::
   2. MeetingArr - You need to provide an array of structure (Lx3) where L denotes vertical length and 3 is the width.
      Example::
      

      [['09:53','10:30','Meeting 1'],['14:30','15:30','Meeting 2'],['15:53','16:30','Meeting 3']]

   3. ShowMinutesFlag - Binary param(true/false); if you want minutes to be drawn in the clock then specify as `true` else `false`.
      Note: If clock size is small; it is recommended to keep the flag as `false`.
5. After executing the function, you will see a clock in the right bottom corner.
   
   Easy Right :)
6. There are 4 color bands used, as shown;
   
7. You can add your custom functions in `addMeeting` and `delMeeting` (in clock.js), to process data at the backend.
8. Management features are displayed on-hover.