clockSchedulerJS
(Beta Version)
Display's a clock with highlighted scheduled area. Also has an alarm with notification for the scheduled time.
USAGE Step-wise:::::::
- Include the `clock.js` in your application's footer area.
Note:: jQuery is prerequisite. Place it above the clockSchedulerJS.<script src="clock.js"></script>
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>
- Include the `clock.css` stylesheet in your application.
<link rel="stylesheet" type="text/css" href="clock.css">
- 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>
- Call JS function `startClock( MeetingArr, ShowMinutesFlag );` on document load.
Explaining -
- There are 2 parameters for the function, as below ::
- 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']]
- 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`.
- After executing the function, you will see a clock in the right bottom corner.
Easy Right :) - There are 4 color bands used, as shown;
- You can add your custom functions in `addMeeting` and `delMeeting` (in clock.js), to process data at the backend.
- Management features are displayed on-hover.