Clock Style Scheduler With jQuery And Canvas - clockSchedulerJS

clockSchedulerJS is a jQuery scheduler plugin which can be used to visualize scheduled tasks on an analog clock interface. Relies on jQuery library, HTML5 canvas and modern browsers.

Features:

• Shows a popup when the task starts.
• Allows you to add tasks.
• Allows you to display all scheduled tasks in a list.

How to use it:

1. Include jQuery library together with the clockSchedulerJS plugin's files on the webpage.

<link href="clock.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="clock.js"></script>

2. Create the HTML for the scheduler clock.

• canvas: for the clock interface
• shadow-element: for the background overlay on hover
• hover-element: for the task management

<div class="iasClockDiv">
  <canvas class="iasClockCanvas" id="iasClockCanvas" width="350px" height="350px"></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>

3. Define an array of scheduled tasks as follows:

const tasks = [
      ['10:00','10:30','Task 1'],
      ['14:30','15:30','Task 2'],
      ['16:30','17:30','Task 3']
]

4. Display the scheduled tasks on the clock. Done.

startClock( tasks );

5. Decide whether or not to show the minutes on the click. Default: false.

startClock( tasks, true );

---

This awesome jQuery plugin is developed by iamdshri. For more Advanced Usages, please check the demo page or visit the official website.