🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

clockSchedulerJS is a jQuery scheduler plugin which can be used to visualize scheduled tasks on an analog clock interface.

Schedule

Documentation

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.

You May Also Like