├── LICENSE ├── README.md ├── clock.css ├── clock.js ├── clock.png ├── meetings.png └── notify.mp3 /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | 294 | Copyright (C) 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | , 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # clockSchedulerJS 2 | (Beta Version)
3 | Display's a clock with highlighted scheduled area. Also has an alarm with notification for the scheduled time. 4 | 5 | ## USAGE Step-wise::::::: 6 |
  1. Include the `clock.js` in your application's footer area. 
    <script src="clock.js"></script>
    7 | 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. 8 |
  2. Include the `clock.css` stylesheet in your application. 
    <link rel="stylesheet" type="text/css" href="clock.css">
    3. 9 |
  3. Insert this clock snippet in your html-body
    10 | 
    <div class='iasClockDiv'>
11 | 	<canvas class='iasClockCanvas' id='iasClockCanvas' width='150px' height='150px'></canvas>
12 | 	<div class='shadow-element'></div>
13 | 	<div class='hover-element'>
14 | 		<button class='plusBtn' onclick='createMeeting();'>+</button>
15 | 		<button class='listBtn' onclick='listAll();'>List</button>
16 | 	</div>
17 | </div>
    4. 18 |
  4. Call JS function `startClock( MeetingArr, ShowMinutesFlag );` on document load.
    19 | Explaining -
    20 |
    1. There are 2 parameters for the function, as below ::
      2. 21 |
    2. MeetingArr - You need to provide an array of structure (Lx3) where L denotes vertical length and 3 is the width.
      Example::
      22 | 
      [['09:53','10:30','Meeting 1'],['14:30','15:30','Meeting 2'],['15:53','16:30','Meeting 3']]
      23 |
      3. 24 |
    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`.
      4. 25 |
    26 |
    5. 27 |
  5. 28 | After executing the function, you will see a clock in the right bottom corner.
    29 | 30 |
    Easy Right :) 31 |
    6. 32 |
  6. There are 4 color bands used, as shown;
    7. 33 |
  7. You can add your custom functions in `addMeeting` and `delMeeting` (in clock.js), to process data at the backend.
    8. 34 |
  8. Management features are displayed on-hover.
    9. 35 |
36 | -------------------------------------------------------------------------------- /clock.css: -------------------------------------------------------------------------------- 1 | .closePopup{ 2 | width: fit-content; 3 | background-color: red; 4 | color: white; 5 | padding: 2px 5px 2px 5px; 6 | font-size: 15px; 7 | border-radius: 9px; 8 | position: absolute; 9 | font-family: sans-serif; 10 | right: -10px;top: -5px; 11 | cursor:pointer; 12 | } 13 | .listAll > table { 14 | counter-reset: rowNumber; 15 | } 16 | 17 | .listAll > table tr:not(:first-child) { 18 | counter-increment: rowNumber; 19 | } 20 | 21 | .listAll > table tr td:first-child::before { 22 | content: counter(rowNumber); 23 | min-width: 1em; 24 | margin-right: 0.5em; 25 | } 26 | .meetingDisplay{ 27 | border:1px solid #ccc; 28 | box-shadow: 0px 0px 10px; 29 | border-radius: 10px; 30 | padding:3px; 31 | white-space: pre-wrap; 32 | white-space: -moz-pre-wrap; 33 | white-space: -pre-wrap; 34 | white-space: -o-pre-wrap; 35 | word-wrap: break-word; 36 | font-family: monospace; 37 | } 38 | .arrow-down { 39 | position: relative; 40 | margin: 15px; 41 | box-sizing: border-box; 42 | background: #666; 43 | box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4); 44 | } 45 | .arrow-down:after{ 46 | content: ""; 47 | position: absolute; 48 | width: 0; 49 | height: 0; 50 | margin-left: -12px; 51 | top: -16px; 52 | left: 50%; 53 | box-sizing: border-box; 54 | border: 8px solid black; 55 | border-color: transparent transparent #666 #666; 56 | transform-origin: 0 0; 57 | transform: rotate(-45deg); 58 | box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4); 59 | } 60 | .shadow-element{ 61 | display:none; 62 | position: absolute; 63 | background-color: #000; 64 | bottom: 1px; 65 | left: 1px; 66 | text-align: center; 67 | padding-top: auto; 68 | z-index:1; 69 | opacity: 0.85; 70 | border-radius:50%; 71 | } 72 | .hover-element{ 73 | display:none; 74 | margin-bottom: 45%; 75 | position:absolute; 76 | z-index:2; 77 | bottom:0; 78 | text-align:center; 79 | width: 100%; 80 | } 81 | .iasClockDiv:hover > .shadow-element,.iasClockDiv:hover > .hover-element{ 82 | display:block; 83 | } 84 | .c_form{ 85 | position: absolute; 86 | padding: 5px; 87 | border-radius: 5px; 88 | background: #ccc; 89 | z-index: 3; 90 | top: 40%; 91 | margin-left: 40%; 92 | margin-right: auto; 93 | } 94 | .listAll{ 95 | position: absolute; 96 | padding: 5px; 97 | border-radius: 5px; 98 | background: #fff; 99 | width:50%; 100 | z-index: 3; 101 | max-height:95%; 102 | margin-left: 25%; 103 | margin-right: 25%; 104 | } 105 | .shadow-box{ 106 | width: 100%; 107 | height: 100%; 108 | position: fixed; 109 | background-color: black; 110 | top: 0; 111 | left: 0; 112 | opacity: 0.8; 113 | z-index:2; 114 | } 115 | 116 | .listAll > table,.listAll > table td,.listAll > table th { 117 | border: 1px solid #ddd; 118 | text-align: left; 119 | } 120 | 121 | .listAll > table { 122 | border-collapse: collapse; 123 | width: 100%; 124 | } 125 | 126 | .listAll > table th,.listAll > table td { 127 | padding: 4px; 128 | } 129 | .delete-icon{ 130 | font-size: 15px; 131 | font-family: sans-serif; 132 | color: red; 133 | cursor:pointer; 134 | } 135 | .listAll > table td:first-child { 136 | width: 30px; 137 | text-align:center; 138 | } 139 | .listAll > table td:nth-child(2),.listAll > table td:nth-child(3){ 140 | width: 50px; 141 | } 142 | .listAll > table td:last-child{ 143 | width: 30px; 144 | text-align: center; 145 | } 146 | .plusBtn{ 147 | margin-right: 5px; 148 | } 149 | .iasClockCanvas{ 150 | border:1px solid #000000; 151 | border-radius:50%; 152 | box-shadow: 0px 0px 8px; 153 | background-color: white; 154 | } 155 | .iasClockDiv{ 156 | position: absolute; 157 | bottom:10px; 158 | right:10px; 159 | } 160 | .iasSuccessMsgDiv{ 161 | position: absolute; 162 | width:100%; 163 | top:0px; 164 | left:0px; 165 | text-align: center; 166 | } 167 | .iasSuccessMsg{ 168 | width: 200px; 169 | background-color: yellow; 170 | padding: 6px; 171 | box-shadow: 0px 0px 8px; 172 | margin-left: auto; 173 | margin-right: auto; 174 | } 175 | -------------------------------------------------------------------------------- /clock.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("iasClockCanvas"); 2 | ctx = canvas.getContext("2d"); 3 | var radius = canvas.height / 2; 4 | ctx.translate(radius, radius); 5 | radius = radius * 0.90; 6 | minutes_flag=false; 7 | meetingArr=[]; 8 | function drawLines(ctx,radius){ 9 | ctx.beginPath(); 10 | ctx.strokeStyle="#eee"; 11 | ctx.lineWidth=1; 12 | ctx.arc(0,0,radius+4,0,2*Math.PI); 13 | ctx.arc(0,0,radius-2,0,2*Math.PI); 14 | ctx.stroke(); 15 | } 16 | function clearMeetingArea(ctx,radius){ 17 | ctx.beginPath(); 18 | ctx.strokeStyle="white"; 19 | ctx.lineWidth=5; 20 | ctx.arc(0,0,radius+4,0,2*Math.PI); 21 | ctx.arc(0,0,radius-2,0,2*Math.PI); 22 | ctx.stroke(); 23 | } 24 | function drawClock() { 25 | drawFace(ctx, radius); 26 | if(minutes_flag){ 27 | drawMins(ctx,radius); 28 | } 29 | drawNumbers(ctx, radius); 30 | drawTime(ctx, radius); 31 | alarm(); 32 | } 33 | 34 | function drawFace(ctx, radius) { 35 | ctx.beginPath(); 36 | ctx.shadowBlur=0; 37 | ctx.shadowOffsetX= 0; 38 | ctx.shadowOffsetY = 0; 39 | ctx.strokeStyle = '#CCC'; 40 | ctx.arc(0, 0, radius*0.95, 0, 2*Math.PI); 41 | ctx.fillStyle = 'white'; 42 | ctx.fill(); 43 | ctx.lineWidth = 1; 44 | ctx.stroke(); 45 | ctx.beginPath(); 46 | ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI); 47 | ctx.fillStyle = '#000'; 48 | ctx.fill(); 49 | } 50 | 51 | function drawNumbers(ctx, radius) { 52 | var ang; 53 | var num; 54 | ctx.font = radius*0.15 + "px arial"; 55 | ctx.textBaseline="middle"; 56 | ctx.textAlign="center"; 57 | for(num = 1; num < 13; num++){ 58 | ang = num * Math.PI / 6; 59 | ctx.rotate(ang); 60 | ctx.translate(0, -radius*0.85); 61 | ctx.rotate(-ang); 62 | ctx.fillText(num.toString(), 0, 0); 63 | ctx.rotate(ang); 64 | ctx.translate(0, radius*0.85); 65 | ctx.rotate(-ang); 66 | } 67 | } 68 | function drawMins(ctx,radius){ 69 | var i=3; 70 | for(i=0;i<60;i++){ 71 | if(i%5!=0){ 72 | ctx.beginPath(); 73 | ctx.shadowBlur=0; 74 | ctx.shadowOffsetX= 0; 75 | ctx.shadowOffsetY = 0; 76 | ctx.lineWidth = 5; 77 | ctx.lineCap="square"; 78 | ctx.arc(0,0,radius*0.87,i*(0.5/15)*Math.PI,i*(0.5/15)*Math.PI); 79 | ctx.stroke(); 80 | } 81 | } 82 | } 83 | function drawTime(ctx, radius){ 84 | ctx.beginPath(); 85 | var now = new Date(); 86 | var hour = now.getHours(); 87 | var minute = now.getMinutes(); 88 | var second = now.getSeconds(); 89 | ctx.shadowBlur=0; 90 | ctx.shadowOffsetX= 0; 91 | ctx.shadowOffsetY = 0; 92 | //hour 93 | hour=hour%12; 94 | hour=(hour*Math.PI/6)+ 95 | (minute*Math.PI/(6*60))+ 96 | (second*Math.PI/(360*60)); 97 | ctx.strokeStyle="#333"; 98 | drawHand(ctx, hour, radius*0.5, radius*0.07); 99 | //minute 100 | minute=(minute*Math.PI/30)+(second*Math.PI/(30*60)); 101 | drawHand(ctx, minute, radius*0.8, radius*0.07); 102 | // second 103 | second=(second*Math.PI/30); 104 | drawHand(ctx, second, radius*0.9, radius*0.02); 105 | } 106 | 107 | function drawHand(ctx, pos, length, width) { 108 | ctx.beginPath(); 109 | ctx.shadowBlur=0; 110 | ctx.shadowOffsetX= 0; 111 | ctx.shadowOffsetY = 0; 112 | ctx.strokeStyle="#333"; 113 | ctx.lineWidth = width; 114 | ctx.lineCap = "round"; 115 | ctx.moveTo(0,0); 116 | ctx.rotate(pos); 117 | ctx.lineTo(0, -length); 118 | ctx.stroke(); 119 | ctx.rotate(-pos); 120 | } 121 | 122 | function meetingArea(ctx,radius){ 123 | ctx.lineWidth = radius*0.07; 124 | ctx.lineCap="square"; 125 | //angle of every hr: (0.5/3)*Math.PI 126 | //angle of every section: (0.5/15)*Math.PI 127 | //angle of every min by day: angle of every section 128 | //angle of every min by hr: angle of every section/12 i.e 5/60 129 | //every hr has 5 sections 130 | for(i=0;i=12 && loop){ 148 | grd=ctx.createLinearGradient(0,0,10,0); 149 | grd.addColorStop(0,"#c36a3e"); 150 | grd.addColorStop(1,"#4b2a63"); 151 | ctx.strokeStyle=grd; 152 | ctx.arc(0,0,radius+4,getStartingAngle(s_hr,s_min),getEndingAngle(e_hr,e_min)); 153 | }else if(s_hr>12 && e_hr<12){ 154 | grd=ctx.createLinearGradient(0,0,10,0); 155 | grd.addColorStop(0,"#4b2a63"); 156 | grd.addColorStop(1,"#c36a3e"); 157 | ctx.strokeStyle=grd; 158 | ctx.arc(0,0,radius-1.8,getStartingAngle(s_hr,s_min),getEndingAngle(e_hr,e_min)); 159 | }else if(s_hr>11){ 160 | ctx.strokeStyle="#4b2a63"; 161 | ctx.arc(0,0,radius+4,getStartingAngle(s_hr,s_min),getEndingAngle(e_hr,e_min)); 162 | }else{ 163 | ctx.strokeStyle="#c36a3e"; 164 | ctx.arc(0,0,radius-1.8,getStartingAngle(s_hr,s_min),getEndingAngle(e_hr,e_min)); 165 | } 166 | ctx.stroke(); 167 | } 168 | } 169 | function getStartingAngle(hr,min){ 170 | if((hr-3)<0){hr=hr+12;} 171 | return ((hr-3)*5*(0.5/15)*Math.PI)+(min*(0.5/15)*Math.PI/12); 172 | } 173 | function getEndingAngle(hr,min){ 174 | if((hr-3)<0){hr=hr+12;} 175 | return ((hr-3)*5*(0.5/15)*Math.PI)+(min*(0.5/15)*Math.PI/12); 176 | } 177 | var vis = (function(){ 178 | var stateKey, eventKey, keys = { 179 | hidden: "visibilitychange", 180 | webkitHidden: "webkitvisibilitychange", 181 | mozHidden: "mozvisibilitychange", 182 | msHidden: "msvisibilitychange" 183 | }; 184 | for (stateKey in keys) { 185 | if (stateKey in document) { 186 | eventKey = keys[stateKey]; 187 | break; 188 | } 189 | } 190 | return function(c) { 191 | if (c) document.addEventListener(eventKey, c); 192 | return !document[stateKey]; 193 | } 194 | })(); 195 | var tab_visible = true; 196 | 197 | function alarm(){ 198 | vis(function(){ 199 | if(vis()){ 200 | tab_visible=true; 201 | } 202 | else{ 203 | tab_visible=false; 204 | } 205 | }); 206 | for(i=0;iX"+meetingArr[i][2]+"
"); 214 | var audio = new Audio('notify.mp3'); 215 | audio.play(); 216 | /*if(!tab_visible){ 217 | alert(meetingArr[i][2]); 218 | }*/ 219 | } 220 | } 221 | } 222 | } 223 | function closePopUp(pos){ 224 | var position=parseInt(pos); 225 | $('.meet_'+position).remove(); 226 | $('.meet_arrow_'+pos).remove(); 227 | meetingArr[pos][3]=true; 228 | } 229 | //success msg 230 | function suceessMsg(){ 231 | var ut=(+ new Date()); 232 | $('body').prepend('
Meeting has been added
'); 233 | $(function() { 234 | setTimeout(function() { 235 | $(".iasUT_"+ut).remove(); 236 | }, 3000); 237 | }); 238 | } 239 | //add meeting 240 | function addMettingNow(){ 241 | addMeeting($('#meeting_start_time').val(),$('#meeting_end_time').val(),$('#meeting_message').val(),ctx,radius); 242 | removeMeetingForm(); 243 | } 244 | function addMeeting(start,end,msg,ctx,radius){ 245 | meetingArr.push(Array(start,end,msg)); 246 | clearMeetingArea(ctx,radius); 247 | drawLines(ctx,radius); 248 | meetingArea(ctx,radius); 249 | suceessMsg(); 250 | /*Add your function call*/ 251 | } 252 | //del meeting 253 | function delMeeting(pos){ 254 | var position=parseInt(pos); 255 | clearMeetingArea(ctx,radius); 256 | drawLines(ctx,radius); 257 | meetingArr.splice(position,1); 258 | meetingArea(ctx,radius); 259 | /*Add your function call*/ 260 | } 261 | function delRow(obj,pos){ 262 | if(confirm('Are you sure ?')){ 263 | delMeeting(pos); 264 | refreshList(); 265 | } 266 | } 267 | function listAll(){ 268 | var table=""; 269 | if(meetingArr.length==0){ 270 | table+=""; 271 | }else{ 272 | table+=""; 273 | } 274 | for(i=0;i"; 276 | } 277 | table+="
No meetings planned yet
Sr.StartEndMessage
"+meetingArr[i][1]+""+meetingArr[i][2]+"
x
"; 278 | $('body').prepend("
X
"+table+"
"); 279 | } 280 | function refreshList(){ 281 | var table=""; 282 | if(meetingArr.length==0){ 283 | table+=""; 284 | }else{ 285 | table+=""; 286 | } 287 | for(i=0;i"; 289 | } 290 | table+="
No meetings planned yet
Sr.StartEndMessage
"+meetingArr[i][1]+""+meetingArr[i][2]+"
x
"; 291 | $('.listAll').html("
X
"+table+""); 292 | } 293 | function removeMeetingForm(){ 294 | $('.shadow-box').remove(); 295 | $('.c_form').remove(); 296 | } 297 | function hideList(){ 298 | $('.shadow-box').remove(); 299 | $('.listAll').remove(); 300 | } 301 | function startClock(meetingArr1,show_minutes){ 302 | $('.shadow-element').css('width',$(canvas).attr('width')); 303 | $('.shadow-element').css('height',$(canvas).attr('height')); 304 | minutes_flag=show_minutes; 305 | meetingArr=meetingArr1; 306 | setInterval(drawClock, 1000); 307 | drawLines(ctx,radius); 308 | meetingArea(ctx,radius); 309 | } 310 | 311 | function createMeeting(){ 312 | $('body').prepend("
Start time
End time
Details
"); 313 | } 314 | -------------------------------------------------------------------------------- /clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamdshri/clockSchedulerJS/738966f0b587cfbad8a1d6f5db30e864140e0e9b/clock.png -------------------------------------------------------------------------------- /meetings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamdshri/clockSchedulerJS/738966f0b587cfbad8a1d6f5db30e864140e0e9b/meetings.png -------------------------------------------------------------------------------- /notify.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamdshri/clockSchedulerJS/738966f0b587cfbad8a1d6f5db30e864140e0e9b/notify.mp3 --------------------------------------------------------------------------------