1/*! 2 * dyCalendar is a JavaScript library for creating Calendar. 3 * 4 * Author: Yusuf Shakeel 5 * https://github.com/yusufshakeel 6 * 7 * GitHub Link: https://github.com/yusufshakeel/dyCalendarJS 8 * 9 * MIT license 10 * Copyright (c) 2016 Yusuf Shakeel 11 * 12 * Date: 2014-08-17 sunday 13 */ 14/*! dyCalendarJS | (c) 2016 Yusuf Shakeel | https://github.com/yusufshakeel/dyCalendarJS */ 15(function (global, $) { 16 "use strict"; 17 18 var //this will be used by the user. 19 dycalendar = {}, 20 //window document 21 document = global.document, 22 //starting year 23 START_YEAR = 1900, 24 //end year 25 END_YEAR = 9999, 26 //name of the months 27 monthName = { 28 full: [ 29 "January", 30 "February", 31 "March", 32 "April", 33 "May", 34 "June", 35 "July", 36 "August", 37 "September", 38 "October", 39 "November", 40 "December" 41 ], 42 mmm: [ 43 "Jan", 44 "Feb", 45 "Mar", 46 "Apr", 47 "May", 48 "Jun", 49 "Jul", 50 "Aug", 51 "Sep", 52 "Oct", 53 "Nov", 54 "Dec" 55 ] 56 }, 57 //name of the days 58 dayName = { 59 full: [ 60 "Sunday", 61 "Monday", 62 "Tuesday", 63 "Wednesday", 64 "Thursday", 65 "Friday", 66 "Saturday" 67 ], 68 d: ["S", "M", "T", "W", "T", "F", "S"], 69 dd: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 70 ddd: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] 71 }; 72 73 /** 74 * this function will create month table. 75 * 76 * @param object data this contains the calendar data 77 * @param object option this is the settings object 78 * @return html 79 */ 80 function createMonthTable(data, option) { 81 var table, tr, td, r, c, count; 82 83 table = $("<table>"); 84 tr = $("<tr>"); 85 86 //create 1st row for the day letters 87 for (c = 0; c <= 6; c = c + 1) { 88 td = $("<td>"); 89 td.html("SMTWTFS"[c]); 90 tr.append(td); 91 } 92 table.append(tr); 93 94 //create 2nd row for dates 95 tr = $("<tr>"); 96 97 //blank td 98 for (c = 0; c <= 6; c = c + 1) { 99 if (c === data.firstDayIndex) { 100 break; 101 } 102 td = $("<td>"); 103 tr.append(td); 104 } 105 106 //remaing td of dates for the 2nd row 107 count = 1; 108 while (c <= 6) { 109 td = $("<td>"); 110 td.html(count); 111 if ( 112 data.today.date === count && 113 data.today.monthIndex === data.monthIndex && 114 option.highlighttoday === true 115 ) { 116 td.addClass("dycalendar-today-date"); 117 } 118 if ( 119 option.date === count && 120 option.month === data.monthIndex && 121 option.highlighttargetdate === true 122 ) { 123 td.addClass("dycalendar-target-date"); 124 } 125 tr.append(td); 126 count = count + 1; 127 c = c + 1; 128 } 129 table.append(tr); 130 131 //create remaining rows 132 for (r = 3; r <= 7; r = r + 1) { 133 tr = $("<tr>"); 134 for (c = 0; c <= 6; c = c + 1) { 135 if (count > data.totaldays) { 136 table.append(tr); 137 return table; 138 } 139 td = $("<td>"); 140 td.html(count); 141 if ( 142 data.today.date === count && 143 data.today.monthIndex === data.monthIndex && 144 option.highlighttoday === true 145 ) { 146 td.addClass("dycalendar-today-date"); 147 } 148 if ( 149 option.date === count && 150 option.month === data.monthIndex && 151 option.highlighttargetdate === true 152 ) { 153 td.addClass("dycalendar-target-date"); 154 } 155 count = count + 1; 156 tr.append(td); 157 } 158 table.append(tr); 159 } 160 161 return table; 162 } 163 164 /** 165 * this function will draw Calendar Month Table 166 * 167 * @param object data this contains the calendar data 168 * @param object option this is the settings object 169 * @return html 170 */ 171 function drawCalendarMonthTable(data, option) { 172 var table, div, container, elem; 173 174 //get table 175 table = createMonthTable(data, option); 176 177 //calendar container 178 container = $("<div>"); 179 container.addClass("dycalendar-month-container"); 180 181 //-------------------------- Header ------------------ 182 183 //header div 184 div = $("<div>"); 185 div.addClass("dycalendar-header"); 186 div.attr("data-option", JSON.stringify(option)); 187 188 //prev button 189 if (option.prevnextbutton === "show") { 190 elem = $("<span>"); 191 elem.addClass("dycalendar-prev-next-btn prev-btn"); 192 elem.attr("data-date", option.date); 193 elem.attr("data-month", option.month); 194 elem.attr("data-year", option.year); 195 elem.attr("data-btn", "prev"); 196 elem.html(` 197 <img src="${ 198 dycalendar_local_script.assets_url + "img/prev.svg" 199 }" alt="prev" style="height: 14px; 200 margin-right: 5px;" /> Previous 201 `); 202 //add prev button span to header div 203 div.append(elem); 204 } 205 206 //month span 207 elem = $("<span>"); 208 elem.addClass("dycalendar-span-month-year"); 209 if (option.monthformat === "mmm") { 210 elem.html(data.monthName + " " + data.year); 211 } else if (option.monthformat === "full") { 212 elem.html(data.monthNameFull + " " + data.year); 213 } 214 215 //add month span to header div 216 div.append(elem); 217 218 //next button 219 if (option.prevnextbutton === "show") { 220 elem = $("<span>"); 221 elem.addClass("dycalendar-prev-next-btn next-btn"); 222 elem.attr("data-date", option.date); 223 elem.attr("data-month", option.month); 224 elem.attr("data-year", option.year); 225 elem.attr("data-btn", "next"); 226 elem.html(` 227 Next <img src="${ 228 dycalendar_local_script.assets_url + "img/next.svg" 229 }" alt="next" style="height: 14px; 230 margin-left: 5px;" /> 231 `); 232 //add next button span to header div 233 div.append(elem); 234 } 235 236 //add header div to container 237 container.append(div); 238 239 //-------------------------- Body ------------------ 240 241 //body div 242 div = $("<div>"); 243 div.addClass("dycalendar-body"); 244 div.append(table); 245 246 //add body div to container div 247 container.append(div); 248 249 //return container 250 return container; 251 } 252 253 /** 254 * this function will draw Calendar Day 255 * 256 * @param object data this contains the calendar data 257 * @param object option this is the settings object 258 * @return html 259 */ 260 function drawCalendarDay(data, option) { 261 var div, container, elem; 262 263 //calendar container 264 container = $("<div>"); 265 container.addClass("dycalendar-day-container"); 266 267 //-------------------------- Header ------------------ 268 269 //header div 270 div = $("<div>"); 271 div.addClass("dycalendar-header"); 272 273 //day span 274 elem = $("<span>"); 275 elem.addClass("dycalendar-span-day"); 276 if (option.dayformat === "ddd") { 277 elem.html(dayName.ddd[data.targetedDayIndex]); 278 } else if (option.dayformat === "full") { 279 elem.html(dayName.full[data.targetedDayIndex]); 280 } 281 282 //add day span to footer div 283 div.append(elem); 284 285 //add header div to container 286 container.append(div); 287 288 //-------------------------- Body ------------------ 289 290 //body div 291 div = $("<div>"); 292 div.addClass("dycalendar-body"); 293 294 //date span 295 elem = $("<span>"); 296 elem.addClass("dycalendar-span-date"); 297 elem.html(data.date); 298 299 //add date span to body div 300 div.append(elem); 301 302 //add body div to container 303 container.append(div); 304 305 //-------------------------- Footer ------------------ 306 307 //footer div 308 div = $("<div>"); 309 div.addClass("dycalendar-footer"); 310 311 //month span 312 elem = $("<span>"); 313 elem.addClass("dycalendar-span-month-year"); 314 if (option.monthformat === "mmm") { 315 elem.html(data.monthName + " " + data.year); 316 } else if (option.monthformat === "full") { 317 elem.html(data.monthNameFull + " " + data.year); 318 } 319 320 //add month span to footer div 321 div.append(elem); 322 323 //add footer div to container 324 container.append(div); 325 326 //return container 327 return container; 328 } 329 330 /** 331 * this function will extend source object with defaults object. 332 * 333 * @param object source this is the source object 334 * @param object defaults this is the default object 335 * @return object 336 */ 337 function extendSource(source, defaults) { 338 var property; 339 for (property in defaults) { 340 if (source.hasOwnProperty(property) === false) { 341 source[property] = defaults[property]; 342 } 343 } 344 return source; 345 } 346 347 /** 348 * This function will return calendar detail. 349 * 350 * @param integer year 1900-9999 (optional) if not set will c
350onsider 351 * the current year. 352 * @param integer month 0-11 (optional) 0 = Jan, 1 = Feb, ... 11 = Dec, 353 * if not set will consider the current month. 354 * @param integer date 1-31 (optional) 355 * @return boolean|object if error return false, else calendar detail 356 */ 357 function getCalendar(year, month, date) { 358 var dateObj = new Date(), 359 dateString, 360 result = {}, 361 idx; 362 363 if (year < START_YEAR || year > END_YEAR) { 364 global.console.error("Invalid Year"); 365 return false; 366 } 367 if (month > 11 || month < 0) { 368 global.console.error("Invalid Month"); 369 return false; 370 } 371 if (date > 31 || date < 1) { 372 global.console.error("Invalid Date"); 373 return false; 374 } 375 376 result.year = year; 377 result.month = month; 378 result.date = date; 379 380 //today 381 result.today = {}; 382 dateString = dateObj.toString().split(" "); 383 384 idx = dayName.ddd.indexOf(dateString[0]); 385 result.today.dayIndex = idx; 386 result.today.dayName = dateString[0]; 387 result.today.dayFullName = dayName.full[idx]; 388 389 idx = monthName.mmm.indexOf(dateString[1]); 390 result.today.monthIndex = idx; 391 result.today.monthName = dateString[1]; 392 result.today.monthNameFull = monthName.full[idx]; 393 394 result.today.date = dateObj.getDate(); 395 396 result.today.year = dateString[3]; 397 398 //get month-year first day 399 dateObj.setDate(1); 400 dateObj.setMonth(month); 401 dateObj.setFullYear(year); 402 dateString = dateObj.toString().split(" "); 403 404 idx = dayName.ddd.indexOf(dateString[0]); 405 result.firstDayIndex = idx; 406 result.firstDayName = dateString[0]; 407 result.firstDayFullName = dayName.full[idx]; 408 409 idx = monthName.mmm.indexOf(dateString[1]); 410 result.monthIndex = idx; 411 result.monthName = dateString[1]; 412 result.monthNameFull = monthName.full[idx]; 413 414 //get total days for the month-year 415 dateObj.setFullYear(year); 416 dateObj.setMonth(month + 1); 417 dateObj.setDate(0); 418 result.totaldays = dateObj.getDate(); 419 420 //get month-year targeted date 421 dateObj.setFullYear(year); 422 dateObj.setMonth(month); 423 dateObj.setDate(date); 424 dateString = dateObj.toString().split(" "); 425 426 idx = dayName.ddd.indexOf(dateString[0]); 427 result.targetedDayIndex = idx; 428 result.targetedDayName = dateString[0]; 429 result.targetedDayFullName = dayName.full[idx]; 430 431 return result; 432 } 433 434 /** 435 * this function will handle the on click event. 436 */ 437 function onClick() { 438 $("body").on("click", ".dycalendar-prev-next-btn", function (e) { 439 e.preventDefault(); 440 441 var date = $(this).data("date"), 442 month = $(this).data("month"), 443 year = $(this).data("year"), 444 btn = $(this).data("btn"), 445 option = $(this).parent().data("option"); 446 447 if (btn === "prev") { 448 month = month - 1; 449 if (month < 0) { 450 year = year - 1; 451 month = 11; 452 } 453 } else if (btn === "next") { 454 month = month + 1; 455 if (month > 11) { 456 year = year + 1; 457 month = 0; 458 } 459 } 460 461 option.date = date; 462 option.month = month; 463 option.year = year; 464 465 drawCalendar(option); 466 }); 467 468 $("body").on("click", ".dycalendar-span-month-year", function (e) { 469 e.preventDefault(); 470 471 var option = $(this).parent().data("option"), 472 dateObj = new Date(); 473 474 option.date = dateObj.getDate(); 475 option.month = dateObj.getMonth(); 476 option.year = dateObj.getFullYear(); 477 478 drawCalendar(option); 479 }); 480 } 481 482 //------------------------------ dycalendar.draw() ---------------------- 483 484 /** 485 * this function will draw the calendar based on user preferences. 486 * 487 * option = { 488 * target : "#id|.class" //(mandatory) for id use #id | for class use .class 489 * type : "calendar-type" //(optional) values: "day|month" (default "day") 490 * month : "integer" //(optional) value 0-11, where 0 = January, ... 11 = December (default current month) 491 * year : "integer" //(optional) example 1990. (default current year) 492 * date : "integer" //(optional) example 1-31. (default current date) 493 * monthformat : "full" //(optional) values: "mmm|full" (default "full") 494 * dayformat : "full" //(optional) values: "ddd|full" (default "full") 495 * highlighttoday : boolean //(optional) (default false) if true will highlight today's date 496 * highlighttargetdate : boolean //(optional) (default false) if true will highlight targeted date of the month year 497 * prevnextbutton : "hide" //(optional) (default "hide") (values: "show|hide") if set to "show" it will show the nav button (prev|next) 498 * } 499 * 500 * @param object option user preferences 501 * @return boolean true if success, false otherwise 502 */ 503 dycalendar.draw = function (option) { 504 //check if option is passed or not 505 if (typeof option === "undefined") { 506 global.console.error("Option missing"); 507 return false;
508 } 509 510 var self = this, //pointing at dycalendar object 511 dateObj = new Date(), 512 //default settings 513 defaults = { 514 type: "day", 515 month: dateObj.getMonth(), 516 year: dateObj.getFullYear(), 517 date: dateObj.getDate(), 518 monthformat: "full", 519 dayformat: "full", 520 highlighttoday: false, 521 highlighttargetdate: false, 522 prevnextbutton: "hide" 523 }; 524 525 //extend user options with predefined options 526 option = extendSource(option, defaults); 527 528 drawCalendar(option); 529 }; 530 531 //------------------------------ dycalendar.draw() ends here ------------ 532 533 /** 534 * this function will draw the calendar inside the target container. 535 */ 536 function drawCalendar(option) { 537 var //variables for creating calendar 538 calendar, 539 calendarHTML; 540 541 //get calendar HTML 542 switch (option.type) { 543 case "day": 544 //get calendar detail 545 calendar = getCalendar(option.year, option.month, option.date); 546 //get calendar html 547 calendarHTML = drawCalendarDay(calendar, option); 548 break; 549 550 case "month": 551 //get calendar detail 552 calendar = getCalendar(option.year, option.month, option.date); 553 //get calendar html 554 calendarHTML = drawCalendarMonthTable(calendar, option); 555 break; 556 557 default: 558 global.console.error("Invalid type"); 559 return false; 560 } 561 562 //draw calendar 563 $(option.target).html(calendarHTML); 564 } 565 566 //events 567 onClick(); 568 569 //attach to global window object 570 global.dycalendar = dycalendar; 571})( 572 typeof window !== "undefined" ? window : this, 573 typeof jQuery !== "undefined" ? jQuery : undefined 574);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.