1/* 2 * Bic Calendar - v3.2.2 3 * A simple twitter bootstrap calendar / agenda to mark events and select range of dates. 4 * http://bichotll.github.io/bic_calendar 5 * 6 * Made by bichotll 7 * Under Apache License 8 */ 9$.fn.bic_calendar = function(options) { 10 11 var opts = $.extend({}, $.fn.bic_calendar.defaults, options); 12 13 14 15 this.each(function() { 16 17 18 /*** vars ***/ 19 20 //element called 21 var elem = $(this); 22 23 var calendar; 24 var daysMonthLayer; 25 var textMonthCurrentLayer = $('<div class="visualmonth"></div>'); 26 var textYearCurrentLayer = $('<div class="visualyear"></div>'); 27 28 var calendarId = "bic_calendar"; 29 30 var events = opts.events; 31 32 //Date obj to calc the day 33 var objFecha; 34 if (opts.date) { 35 if (typeof opts.date == 'string') { 36 var arrayDate = opts.date.split('/'); 37 objFecha = new Date(parseInt(arrayDate[2]), parseInt(arrayDate[1]) - 1, parseInt(arrayDate[0])); 38 } else { 39 objFecha = opts.date; 40 } 41 } else { 42 objFecha = new Date(); 43 } 44 45 var dayNames; 46 if (typeof opts.dayNames != "undefined") 47 dayNames = opts.dayNames; 48 else 49 dayNames = ["l", "m", "x", "j", "v", "s", "d"]; 50 51 var monthNames; 52 if (typeof opts.monthNames != "undefined") 53 monthNames = opts.monthNames; 54 else 55 monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; 56 57 var showDays; 58 if (typeof opts.showDays != "undefined") 59 showDays = opts.showDays; 60 else 61 showDays = true; 62 63 var popoverOptions; 64 if (typeof opts.popoverOptions != "undefined") 65 popoverOptions = opts.popoverOptions; 66 else 67 popoverOptions = {placement: 'bottom', html: true, trigger: 'hover'}; 68 69 var tooltipOptions; 70 if (typeof opts.tooltipOptions != "undefined") 71 tooltipOptions = opts.tooltipOptions; 72 else 73 tooltipOptions = {placement: 'bottom', trigger: 'hover'}; 74 75 var reqAjax; 76 if (typeof opts.reqAjax != "undefined") 77 reqAjax = opts.reqAjax; 78 else 79 reqAjax = false; 80 81 var enableSelect = false; 82 if (typeof opts.enableSelect != 'undefined') 83 enableSelect = opts.enableSelect; 84 85 var multiSelect = false; 86 if (typeof opts.multiSelect != 'undefined') 87 multiSelect = opts.multiSelect; 88 89 var displayMonthController = true; 90 if (typeof opts.displayMonthController != 'undefined') 91 displayMonthController = opts.displayMonthController; 92 93 var displayYearController = true; 94 if (typeof opts.displayYearController != 'undefined') 95 displayYearController = opts.displayYearController; 96 97 var startWeekDay = 0; 98 if (typeof opts.startWeekDay != 'undefined') 99 startWeekDay = opts.startWeekDay; 100 101 var firstDaySelected = ''; 102 var lastDaySelected = ''; 103 var daySelected = ''; 104 105 /*** --vars-- ***/ 106 107 108 109 110 111 /*** functions ***/ 112 113 /** 114 * init n print calendar 115 */ 116 function showCalendar() { 117
118 //layer with the days of the month (literals) 119 daysMonthLayer = $('<table class="table">'); 120 121 listListeralsWeek(); 122 123 //current year n current month 124 var month = objFecha.getMonth(); 125 var year = objFecha.getFullYear(); 126 127 //show the days of the month n year configured 128 showMonthDays(month, year); 129 130 //next-previous month controllers 131 var nextMonthButton = $('<td><a href="#" class="button-month-next"><i class="glyphicon glyphicon-arrow-right" ></i></a></td>'); 132 //event 133 nextMonthButton.click(function(e) { 134 e.preventDefault(); 135 month = (month + 1) % 12; 136 if (month == 0) 137 year++; 138 changeDate(month, year); 139 }) 140 var previousMonthButton = $('<td><a href="#" class="button-month-previous"><i class="glyphicon glyphicon-arrow-left" ></i></a></td>'); 141 //event 142 previousMonthButton.click(function(e) { 143 e.preventDefault(); 144 month = (month - 1); 145 if (month == -1) { 146 year--; 147 month = 11; 148 } 149 changeDate(month, year); 150 }) 151 152 //next-previous year controllers 153 var nextYearButton = $('<td><a href="#" class="button-year-next"><i class="glyphicon glyphicon-arrow-right" ></i></a></td>'); 154 //event 155 nextYearButton.click(function(e) { 156 e.preventDefault(); 157 year++; 158 changeDate(month, year); 159 }) 160 var previousYearButton = $('<td><a href="#" class="button-year-previous"><i class="glyphicon glyphicon-arrow-left" ></i></a></td>'); 161 //event 162 previousYearButton.click(function(e) { 163 e.preventDefault(); 164 year--; 165 changeDate(month, year); 166 }) 167 168 169 //show the current year n current month text layer 170 var headerLayer = $('<table class="table header"></table>'); 171 172 if (displayYearController === true) { 173 var yearTextLayer = $('<tr></tr>'); 174 var yearControlTextLayer = $('<td colspan=5 class="monthAndYear span6"></td>'); 175 176 yearTextLayer.append(previousYearButton); 177 yearTextLayer.append(yearControlTextLayer); 178 yearTextLayer.append(nextYearButton); 179 yearControlTextLayer.append(textYearCurrentLayer); 180 headerLayer.append(yearTextLayer); 181 } 182 if (displayMonthController === true) { 183 var monthTextLayer = $('<tr></tr>'); 184 var monthControlTextLayer = $('<td colspan=5 class="monthAndYear span6"></td>'); 185 186 monthTextLayer.append(previousMonthButton); 187 monthTextLayer.append(monthControlTextLayer); 188 monthTextLayer.append(nextMonthButton); 189 monthControlTextLayer.append(textMonthCurrentLayer); 190 headerLayer.append(monthTextLayer); 191 } 192 193 //calendar n border 194 calendar = $('<div class="bic_calendar row" id="' + calendarId + '" ></div>'); 195 calendar.prepend(headerLayer); 196 //calendar.append(capaDiasSemana); 197 //daysMonthLayer.prepend(capaDiasSemana); 198 calendar.append(daysMonthLayer); 199 200 //insert calendar in the document 201 elem.append(calendar); 202 203 //check and add events 204 checkEvents(month, year); 205 206 //if enable select 207 checkIfEnableMark(); 208 } 209 210 /** 211 * indeed, change month or year 212 */ 213 function changeDate(month, year) { 214 daysMonthLayer.empty(); 215 listListeralsWeek(); 216 showMonthDays(month, year); 217 checkEvents(month, year); 218 markSelectedDays(); 219 } 220 221 /** 222 * show literals of the week 223 */ 224 function listListeralsWeek() { 225 if (showDays != false) { 226 var capaDiasSemana = $('<tr class="days-month" >'); 227 var codigoInsertar = ''; 228 $(dayNames).each(function(indice, valor) { 229 codigoInsertar += '<td'; 230 if (indice == 0) { 231 codigoInsertar += ' class="first"'; 232 } 233 if (indice == 6) { 234 codigoInsertar += ' class="sunday last"'; 235 } 236 codigoInsertar += ">" + valor + '</td>'; 237 }); 238 codigoInsertar += '</tr>'; 239 capaDiasSemana.append(codigoInsertar); 240 241 daysMonthLayer.append(capaDiasSemana); 242 } 243 } 244 245 /** 246 * show the days of the month 247 */ 248 function showMonthDays(month, year) { 249 250 //print year n month in layers 251 textMonthCurrentLayer.text(monthNames[month]); 252 textYearCurrentLayer.text(year); 253 254 //show days of the month 255 var daysCounter = 1; 256 257 //calc the date of the first day of this month 258 var firstDay = calcNumberDayWeek(1, month, year); 259 260 //calc the last day of this month 261 var lastDayMonth = lastDay(month, year); 262 263 var nMonth = month + 1; 264 265 var daysMonthLayerString = ""; 266 267 //print the first row of the week 268 for (var i = 0; i < 7; i++) { 269 if (i < firstDay) { 270 var dayCode = ""; 271 if (i == 0) 272 dayCode += "<tr>"; 273 //add weekDay 274 dayCode += '<td class="invalid-day week-day-' + i + '"'; 275 dayCode += '"></td>'; 276 } else { 277 var dayCode = ""; 278 if (i == 0) 279 dayCode += '<tr>'; 280 dayCode += '<td id="' + calendarId + '_' + daysCounter + "_" + nM
280onth + "_" + year + '" data-date="' + nMonth + "/" + daysCounter + "/" + year + '" '; 281 //add weekDay 282 dayCode += ' class="day week-day-' + i + '"'; 283 dayCode += '><div><a>' + daysCounter + '</a></div></span>'; 284 if (i == 6) 285 dayCode += '</tr>'; 286 daysCounter++; 287 } 288 daysMonthLayerString += dayCode 289 } 290 291 //check all the other days until end of the month 292 var currentWeekDay = 1; 293 while (daysCounter <= lastDayMonth) { 294 var dayCode = ""; 295 if (currentWeekDay % 7 == 1) 296 dayCode += "<tr>"; 297 dayCode += '<td id="' + calendarId + '_' + daysCounter + "_" + nMonth + "_" + year + '" data-date="' + nMonth + "/" + daysCounter + "/" + year + '" '; 298 //add weekDay 299 dayCode += ' class="day week-day-' + ((currentWeekDay - 1) % 7) + '"'; 300 dayCode += '><div><a>' + daysCounter + '</a></div></td>'; 301 if (currentWeekDay % 7 == 0) 302 dayCode += "</tr>"; 303 daysCounter++; 304 currentWeekDay++; 305 daysMonthLayerString += dayCode 306 } 307 308 //check if the empty cells it have yet to write of the last week of the month 309 currentWeekDay--; 310 if (currentWeekDay % 7 != 0) { 311 dayCode = ""; 312 for (var i = (currentWeekDay % 7) + 1; i <= 7; i++) { 313 var dayCode = ""; 314 dayCode += '<td '; 315 //add weekDay 316 dayCode += ' class="invalid-day week-day-' + (i - 1) + '"'; 317 dayCode += '"></td>'; 318 if (i == 7) 319 dayCode += '</tr>' 320 daysMonthLayerString += dayCode 321 } 322 } 323 324 daysMonthLayer.append(daysMonthLayerString); 325 } 326 327 /** 328 * calc the number of the week day 329 */ 330 function calcNumberDayWeek(day, month, year) { 331 var objFecha = new Date(year, month, day); 332 var numDia = objFecha.getDay(); 333 numDia += startWeekDay; 334 if (numDia == 0) 335 numDia = 6; 336 else 337 numDia--; 338 return numDia; 339 } 340 341 /** 342 * check if a date is correct 343 * 344 * @thanks http://kevin.vanzonneveld.net 345 * @thanks http://www.desarrolloweb.com/manuales/manual-librerias-phpjs.html 346 */ 347 function checkDate(m, d, y) { 348 return m > 0 && m < 13 && y > 0 && y < 32768 && d > 0 && d <= (new Date(y, m, 0)).getDate(); 349 } 350 351 /** 352 * return last day of a date (month n year) 353 */ 354 function lastDay(month, year) { 355 var lastDayValue = 28; 356 while (checkDate(month + 1, lastDayValue + 1, year)) { 357 lastDayValue++; 358 } 359 return lastDayValue; 360 } 361 362 function validateWritedDate(fecha) { 363 var arrayFecha = fecha.split("/"); 364 if (arrayFecha.length != 3) 365 return false; 366 return checkDate(arrayFecha[1], arrayFecha[0], arrayFecha[2]); 367 } 368 369 /** 370 * check if there are ajax events 371 */ 372 function checkEvents(month, year) { 373 if (reqAjax != false) { 374 //peticio ajax 375 $.ajax({ 376 type: reqAjax.type, 377 url: reqAjax.url, 378 data: {mes: month + 1, ano: year}, 379 dataType: 'json' 380 }).done(function(data) { 381 382 if (typeof events == 'undefined') 383 events = []; 384 385 $.each(data, function(k, v) { 386 events.push(data[k]); 387 }); 388 389 markEvents(month, year); 390 391 }); 392 } else { 393 markEvents(month, year); 394 } 395 } 396 397 /** 398 * mark all the events n create logic for them 399 */ 400 function markEvents(month, year) { 401 var temporalMonth = month + 1; 402 403 for (var i = 0; i < events.length; i++) { 404 405 if (events[i].date.split('/')[1] == temporalMonth && events[i].date.split('/')[2] == year) { 406 407 var loopDayTd = $('#' + calendarId + '_' + events[i].date.replace(/\//g, "_")); 408 var loopDayA = $('#' + calendarId + '_' + events[i].date.replace(/\//g, "_") + ' a'); 409 410 loopDayTd.addClass('event'); 411 412 loopDayA.attr('data-original-title', events[i].title); 413 414 //bg color 415 if (events[i].color) 416 loopDayTd.css('background', events[i].color); 417 418 //link 419 if (typeof events[i].link != 'undefined' && events[i].link != '') { 420 loopDayA.attr('href', events[i].link); 421 } 422 if (typeof events[i].linkTarget != 'undefined' && events[i].linkTarget != '') { 423 loopDayA.attr('target', events[i].linkTarget); 424 } 425 426 //class 427 if (events[i].class) 428 loopDayTd.addClass(events[i].class); 429 430 //tooltip vs popover 431 if (events[i].content) { 432 loopDayTd.addClass('event_popover'); 433 loopDayA.attr('rel', 'popover'); 434 loopDayA.attr('data-content', events[i].content); 435 } else { 436 loopDayTd.addClass('event_tooltip'); 437 loopDayA.attr('rel', 'tooltip'); 438 } 439 } 440 } 441 442 $('#' + calendarId + ' ' + '.event_tooltip a').tooltip(tooltipOptions); 443 $('#' + calendarId + ' ' + '.event_popover a').popover(popoverOptions); 444 445 $('.manual_popover').click(function() { 446 $(this).popover('toggle'); 447 }); 448 } 449 450 /** 451 * check if the user can mark days 452 */ 453 function checkIfEnableMark() { 454 if (enableSelect == true) { 455 456 var eventBicCalendarSelect; 457 458 elem.on('click', 'td.day', function() { 459 //if multiSelect 460 if (multiSelect == true) { 461 if (daySelected == '') { 462 daySelected = $(this).data('date'); 463 markSelectedDays(); 464 } else { 465 if (lastDaySelected == '') { 466 //set firstDaySelected 467 firstDaySelected = daySelected; 468 lastDaySelected = $(this).data('date'); 469 470 markSelectedDays(); 471 472 //create n fire event 473 //to change 474 var eventBicCalendarSelect = new CustomEvent("bicCalendarSelect", { 475 detail: {
476 dateFirst: firstDaySelected, 477 dateLast: lastDaySelected 478 } 479 }); 480 document.dispatchEvent(eventBicCalendarSelect); 481 } else { 482 firstDaySelected = ''; 483 lastDaySelected = ''; 484 daySelected = ''; 485 elem.find('.selection').removeClass('middle-selection selection first-selection last-selection'); 486 } 487 } 488 } else { 489 //remove the class selection of the others a 490 elem.find('td div').removeClass('selection'); 491 //add class selection 492 $(this).find('div').addClass('selection'); 493 //create n fire event 494 var eventBicCalendarSelect = new CustomEvent("bicCalendarSelect", { 495 detail: { 496 date: $(this).data('date') 497 } 498 }); 499 document.dispatchEvent(eventBicCalendarSelect); 500 } 501 }) 502 } 503 } 504 505 /** 506 * to mark selected dates 507 */ 508 function markSelectedDays() { 509 if (daySelected != '' && firstDaySelected == '') { 510 var arrayDate = daySelected.split('/'); 511 $('#bic_calendar_' + arrayDate[1] + '_' + arrayDate[0] + '_' + arrayDate[2] + ' div').addClass('selection'); 512 } else if (firstDaySelected != '') { 513 //create array from dates 514 var arrayFirstDay = firstDaySelected.split('/'); 515 var arrayLastDay = lastDaySelected.split('/'); 516 517 //remove all selected classes 518 elem.find('td.selection').removeClass('selection'); 519 520 //create date object from dates 521 var oldSelectedDate = new Date(firstDaySelected); 522 var newSelectedDate = new Date(lastDaySelected); 523 524 //create a loop adding day per loop to set days 525 //turn dates if > 526 if (oldSelectedDate > newSelectedDate) { 527 //turn vars date 528 var tempSelectedDate = oldSelectedDate; 529 oldSelectedDate = newSelectedDate; 530 newSelectedDate = tempSelectedDate; 531 } 532 //set first selection 533 $('#bic_calendar_' + oldSelectedDate.getDate() + '_' + (parseInt(oldSelectedDate.getMonth()) + 1) + '_' + oldSelectedDate.getFullYear() + ' div').addClass('selection first-selection'); 534 while (oldSelectedDate < newSelectedDate) { 535 oldSelectedDate.setDate(oldSelectedDate.getDate() + 1); 536 //set middle-selection 537 $('#bic_calendar_' + oldSelectedDate.getDate() + '_' + (parseInt(oldSelectedDate.getMonth()) + 1) + '_' + oldSelectedDate.getFullYear() + ' div').addClass('selection middle-selection'); 538 } 539 //set last selection 540 $('#bic_calendar_' + oldSelectedDate.getDate() + '_' + (parseInt(oldSelectedDate.getMonth()) + 1) + '_' + oldSelectedDate.getFullYear() + ' div').removeClass('middle-selection').addClass('selection last-selection'); 541 } 542 } 543 544 /*** --functions-- ***/ 545 546 547 548 //fire calendar! 549 showCalendar(); 550 551 552 }); 553 return this; 554};
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.