Clock Style Scheduler With jQuery And Canvas - clockSchedulerJS
File Size: | 13.4 KB |
---|---|
Views Total: | 1823 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.