/halogy/plugins/js_calendar_pi.php
PHP | 629 lines | 378 code | 86 blank | 165 comment | 100 complexity | ef9a218b4a8058b37f8464ca7c593c8f MD5 | raw file
1<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 2/** 3 * CodeIgniter 4 * 5 * An open source application development framework for PHP 4.3.2 or newer 6 * 7 * @package CodeIgniter 8 * @author ExpressionEngine Dev Team 9 * @copyright Copyright (c) 2008 - 2009, EllisLab, Inc. 10 * @license http://codeigniter.com/user_guide/license.html 11 * @link http://codeigniter.com 12 * @since Version 1.0 13 * @filesource 14 */ 15 16// ------------------------------------------------------------------------ 17 18/* 19Instructions: 20 21Load the plugin using: 22 23 $this->load->plugin('js_calendar'); 24 25Once loaded you'll add the calendar script to the <head> of your page like this: 26 27<?php echo js_calendar_script('my_form'); ?> 28 29The above function will be passed the name of your form. 30 31Then to show the actual calendar you'll do this: 32 33<?php echo js_calendar_write('entry_date', time(), true);?> 34<form name="my_form"> 35<input type="text" name="entry_date" value="" onblur="update_calendar(this.name, this.value);" /> 36<p><a href="javascript:void(0);" onClick="set_to_time('entry_date', '<?php echo time();?>')" >Today</a></p> 37</form> 38 39 40Note: The first parameter is the name of the field containing your date, the second parameter contains the "now" time, 41and the third tells the calendar whether to highlight the current day or not. 42 43Lastly, you'll need some CSS for your calendar: 44 45.calendar { 46 border: 1px #6975A3 solid; 47 background-color: transparent; 48} 49.calheading { 50 background-color: #7C8BC0; 51 color: #fff; 52 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 53 font-size: 11px; 54 font-weight: bold; 55 text-align: center; 56} 57.calnavleft { 58 background-color: #7C8BC0; 59 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 60 font-size: 10px; 61 font-weight: bold; 62 color: #fff; 63 padding: 4px; 64 cursor: pointer; 65} 66.calnavright { 67 background-color: #7C8BC0; 68 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 69 font-size: 10px; 70 font-weight: bold; 71 color: #fff; 72 text-align: right; 73 padding: 4px; 74 cursor: pointer; 75} 76.caldayheading { 77 background-color: #000; 78 color: #fff; 79 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 80 font-size: 10px; 81 text-align: center; 82 padding: 6px 2px 6px 2px; 83} 84.caldaycells{ 85 color: #000; 86 background-color: #D1D7E6; 87 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 88 font-size: 11px; 89 text-align: center; 90 padding: 4px; 91 border: 1px #E0E5F1 solid; 92 cursor: pointer; 93} 94.caldaycellhover{ 95 color: #fff; 96 background-color: #B3BCD4; 97 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 98 font-size: 11px; 99 text-align: center; 100 padding: 4px; 101 border: 1px #B3BCD4 solid; 102 cursor: pointer; 103} 104.caldayselected{ 105 background-color: #737FAC; 106 color: #fff; 107 font-family: Lucida Grande, Verdana, Geneva, Sans-serif; 108 font-size: 11px; 109 font-weight: bold; 110 text-align: center; 111 border: 1px #566188 solid; 112 padding: 3px; 113 cursor: pointer; 114} 115.calblanktop { 116 background-color: #fff; 117 padding: 4px; 118} 119.calblankbot { 120 background-color: #fff; 121 padding: 4px; 122} 123 124 125*/ 126 127function js_calendar_script($form_name = 'entryform') 128{ 129$CI =& get_instance(); 130$CI->load->language('calendar'); 131ob_start(); 132?> 133<script type="text/javascript"> 134<!-- 135var form_name = "<?php echo $form_name; ?>"; 136var format = 'us'; // eu or us 137var days = new Array( 138 '<?php echo $CI->lang->line('cal_su');?>', // Sunday, short name 139 '<?php echo $CI->lang->line('cal_mo');?>', // Monday, short name 140 '<?php echo $CI->lang->line('cal_tu');?>', // Tuesday, short name 141 '<?php echo $CI->lang->line('cal_wed');?>', // Wednesday, short name 142 '<?php echo $CI->lang->line('cal_thu');?>', // Thursday, short name 143 '<?php echo $CI->lang->line('cal_fri');?>', // Friday, short name 144 '<?php echo $CI->lang->line('cal_sat');?>' // Saturday, short name 145 ); 146var months = new Array( 147 '<?php echo $CI->lang->line('cal_january');?>', 148 '<?php echo $CI->lang->line('cal_february');?>', 149 '<?php echo $CI->lang->line('cal_march');?>', 150 '<?php echo $CI->lang->line('cal_april');?>', 151 '<?php echo $CI->lang->line('cal_mayl');?>', 152 '<?php echo $CI->lang->line('cal_june');?>', 153 '<?php echo $CI->lang->line('cal_july');?>', 154 '<?php echo $CI->lang->line('cal_august');?>', 155 '<?php echo $CI->lang->line('cal_september');?>', 156 '<?php echo $CI->lang->line('cal_october');?>', 157 '<?php echo $CI->lang->line('cal_november');?>', 158 '<?php echo $CI->lang->line('cal_december');?>' 159 ); 160var last_click = new Array(); 161var current_month = ''; 162var current_year = ''; 163var last_date = ''; 164 165function calendar(id, d, highlight, adjusted) 166{ 167 if (adjusted == undefined) 168 { 169 var d = new Date(d * 1000); 170 } 171 172 this.id = id; 173 this.highlight = highlight; 174 this.date_obj = d; 175 this.write = build_calendar; 176 this.total_days = total_days; 177 this.month = d.getMonth(); 178 this.date = d.getDate(); 179 this.day = d.getDay(); 180 this.year = d.getFullYear(); 181 this.hours = d.getHours(); 182 this.minutes = d.getMinutes(); 183 this.seconds = d.getSeconds(); 184 this.date_str = date_str; 185 186 if (highlight == false) 187 { 188 this.selected_date = ''; 189 } 190 else 191 { 192 this.selected_date = this.year + '' + this.month + '' + this.date; 193 } 194 195 // Set the "selected date" 196 d.setDate(1); 197 this.firstDay = d.getDay(); 198 199 //then reset the date object to the correct date 200 d.setDate(this.date); 201} 202 203// Build the body of the calendar 204function build_calendar() 205{ 206 var str = ''; 207 208 // Calendar Heading 209 210 str += '<div id="cal' + this.id + '">'; 211 str += '<table class="calendar" cellspacing="0" cellpadding="0" border="0" >'; 212 str += '<tr>'; 213 str += '<td class="calnavleft" onClick="change_month(-1, \'' + this.id + '\')"><<<\/td>'; 214 str += '<td colspan="5" class="calheading">' + months[this.month] + ' ' + this.year + '<\/td>'; 215 str += '<td class="calnavright" onClick="change_month(1, \'' + this.id + '\')">>><\/td>'; 216 str += '<\/tr>'; 217 218 // Day Names 219 220 str += '<tr>'; 221 222 for (i = 0; i < 7; i++) 223 { 224 str += '<td class="caldayheading">' + days[i] + '<\/td>'; 225 } 226 227 str += '<\/tr>'; 228 229 // Day Cells 230 231 str += '<tr>'; 232 233 selDate = (last_date != '') ? last_date : this.date; 234 235 for (j = 0; j < 42; j++) 236 { 237 var displayNum = (j - this.firstDay + 1); 238 239 if (j < this.firstDay) // leading empty cells 240 { 241 str += '<td class="calblanktop"> <\/td>'; 242 } 243 else if (displayNum == selDate && this.highlight == true) // Selected date 244 { 245 str += '<td id="' + this.id +'selected" class="caldayselected" onClick="set_date(this,\'' + this.id + '\')">' + displayNum + '<\/td>'; 246 } 247 else if (displayNum > this.total_days()) 248 { 249 str += '<td class="calblankbot"> <\/td>'; // trailing empty cells 250 } 251 else // Unselected days 252 { 253 str += '<td id="" class="caldaycells" onClick="set_date(this,\'' + this.id + '\'); return false;" onMouseOver="javascript:cell_highlight(this,\'' + displayNum + '\',\'' + this.id + '\');" onMouseOut="javascript:cell_reset(this,\'' + displayNum + '\',\'' + this.id + '\');" >' + displayNum + '<\/td>'; 254 } 255 256 if (j % 7 == 6) 257 { 258 str += '<\/tr><tr>'; 259 } 260 } 261 262 str += '<\/tr>'; 263 str += '<\/table>'; 264 str += '<\/div>'; 265 266 return str; 267} 268 269// Total number of days in a month 270function total_days() 271{ 272 switch(this.month) 273 { 274 case 1: // Check for leap year 275 if (( this.date_obj.getFullYear() % 4 == 0 276 && this.date_obj.getFullYear() % 100 != 0) 277 || this.date_obj.getFullYear() % 400 == 0) 278 return 29; 279 else 280 return 28; 281 case 3: 282 return 30; 283 case 5: 284 return 30; 285 case 8: 286 return 30; 287 case 10: 288 return 30 289 default: 290 return 31; 291 } 292} 293 294// Highlight Cell on Mouseover 295function cell_highlight(td, num, cal) 296{ 297 cal = eval(cal); 298 299 if (last_click[cal.id] != num) 300 { 301 td.className = "caldaycellhover"; 302 } 303} 304 305// Reset Cell on MouseOut 306function cell_reset(td, num, cal) 307{ 308 cal = eval(cal); 309 310 if (last_click[cal.id] == num) 311 { 312 td.className = "caldayselected"; 313 } 314 else 315 { 316 td.className = "caldaycells"; 317 } 318} 319 320// Clear Field 321function clear_field(id) 322{ 323 eval("document." + form_name + "." + id + ".value = ''"); 324 325 document.getElementById(id + "selected").className = "caldaycells"; 326 document.getElementById(id + "selected").id = ""; 327 328 cal = eval(id); 329 cal.selected_date = ''; 330} 331 332 333// Set date to specified time 334function set_to_time(id, raw) 335{ 336 if (document.getElementById(id + "selected")) 337 { 338 document.getElementById(id + "selected").className = "caldaycells"; 339 document.getElementById(id + "selected").id = ""; 340 } 341 342 document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>'; 343 344 var nowDate = new Date(); 345 nowDate.setTime = raw * 1000; 346 347 current_month = nowDate.getMonth(); 348 current_year = nowDate.getFullYear(); 349 current_date = nowDate.getDate(); 350 351 oldcal = eval(id); 352 oldcal.selected_date = current_year + '' + current_month + '' + current_date; 353 354 cal = new calendar(id, nowDate, true, true); 355 cal.selected_date = current_year + '' + current_month + '' + current_date; 356 357 last_date = cal.date; 358 359 document.getElementById('tempcal'+id).innerHTML = cal.write(); 360 361 insert_date(cal); 362} 363 364// Set date to what is in the field 365var lastDates = new Array(); 366 367function update_calendar(id, dateValue) 368{ 369 if (lastDates[id] == dateValue) return; 370 371 lastDates[id] = dateValue; 372 373 var fieldString = dateValue.replace(/\s+/g, ' '); 374 375 while (fieldString.substring(0,1) == ' ') 376 { 377 fieldString = fieldString.substring(1, fieldString.length); 378 } 379 380 var dateString = fieldString.split(' '); 381 var dateParts = dateString[0].split('-') 382 383 if (dateParts.length < 3) return; 384 var newYear = dateParts[0]; 385 var newMonth = dateParts[1]; 386 var newDay = dateParts[2]; 387 388 if (isNaN(newDay) || newDay < 1 || (newDay.length != 1 && newDay.length != 2)) return; 389 if (isNaN(newYear) || newYear < 1 || newYear.length != 4) return; 390 if (isNaN(newMonth) || newMonth < 1 || (newMonth.length != 1 && newMonth.length != 2)) return; 391 392 if (newMonth > 12) newMonth = 12; 393 394 if (newDay > 28) 395 { 396 switch(newMonth - 1) 397 { 398 case 1: // Check for leap year 399 if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0) 400 { 401 if (newDay > 29) newDay = 29; 402 } 403 else 404 { 405 if (newDay > 28) newDay = 28; 406 } 407 case 3: 408 if (newDay > 30) newDay = 30; 409 case 5: 410 if (newDay > 30) newDay = 30; 411 case 8: 412 if (newDay > 30) newDay = 30; 413 case 10: 414 if (newDay > 30) newDay = 30; 415 default: 416 if (newDay > 31) newDay = 31; 417 } 418 } 419 420 if (document.getElementById(id + "selected")) 421 { 422 document.getElementById(id + "selected").className = "caldaycells"; 423 document.getElementById(id + "selected").id = ""; 424 } 425 426 document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>'; 427 428 var nowDate = new Date(); 429 nowDate.setDate(newDay); 430 nowDate.setMonth(newMonth - 1); 431 nowDate.setYear(newYear); 432 nowDate.setHours(12); 433 434 current_month = nowDate.getMonth(); 435 current_year = nowDate.getFullYear(); 436 437 cal = new calendar(id, nowDate, true, true); 438 document.getElementById('tempcal'+id).innerHTML = cal.write(); 439} 440 441// Set the date 442function set_date(td, cal) 443{ 444 445 cal = eval(cal); 446 447 // If the user is clicking a cell that is already 448 // selected we'll de-select it and clear the form field 449 450 if (last_click[cal.id] == td.firstChild.nodeValue) 451 { 452 td.className = "caldaycells"; 453 last_click[cal.id] = ''; 454 remove_date(cal); 455 cal.selected_date = ''; 456 return; 457 } 458 459 // Onward! 460 if (document.getElementById(cal.id + "selected")) 461 { 462 document.getElementById(cal.id + "selected").className = "caldaycells"; 463 document.getElementById(cal.id + "selected").id = ""; 464 } 465 466 td.className = "caldayselected"; 467 td.id = cal.id + "selected"; 468 469 cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date; 470 cal.date_obj.setDate(td.firstChild.nodeValue); 471 cal = new calendar(cal.id, cal.date_obj, true, true); 472 cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date; 473 474 last_date = cal.date; 475 476 //cal.date 477 last_click[cal.id] = cal.date; 478 479 // Insert the date into the form 480 insert_date(cal); 481} 482/* 483// Insert the date into the form field 484function insert_date(cal) 485{ 486 cal = eval(cal); 487 fval = eval("document." + form_name + "." + cal.id); 488 489 if (fval.value == '') 490 { 491 fval.value = cal.date_str('y'); 492 } 493 else 494 { 495 time = fval.value.substring(10); 496 new_date = cal.date_str('n') + time; 497 fval.value = new_date; 498 } 499} 500*/ 501// Remove the date from the form field 502function remove_date(cal) 503{ 504 cal = eval(cal); 505 fval = eval("document." + form_name + "." + cal.id); 506 fval.value = ''; 507} 508 509// Change to a new month 510function change_month(mo, cal) 511{ 512 cal = eval(cal); 513 514 if (current_month != '') 515 { 516 cal.date_obj.setMonth(current_month); 517 cal.date_obj.setYear(current_year); 518 519 current_month = ''; 520 current_year = ''; 521 } 522 523 var newMonth = cal.date_obj.getMonth() + mo; 524 var newDate = cal.date_obj.getDate(); 525 526 if (newMonth == 12) 527 { 528 cal.date_obj.setYear(cal.date_obj.getFullYear() + 1) 529 newMonth = 0; 530 } 531 else if (newMonth == -1) 532 { 533 cal.date_obj.setYear(cal.date_obj.getFullYear() - 1) 534 newMonth = 11; 535 } 536 537 if (newDate > 28) 538 { 539 var newYear = cal.date_obj.getFullYear(); 540 541 switch(newMonth) 542 { 543 case 1: // Check for leap year 544 if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0) 545 { 546 if (newDate > 29) newDate = 29; 547 } 548 else 549 { 550 if (newDate > 28) newDate = 28; 551 } 552 case 3: 553 if (newDate > 30) newDate = 30; 554 case 5: 555 if (newDate > 30) newDate = 30; 556 case 8: 557 if (newDate > 30) newDate = 30; 558 case 10: 559 if (newDate > 30) newDate = 30; 560 default: 561 if (newDate > 31) newDate = 31; 562 } 563 } 564 565 cal.date_obj.setDate(newDate); 566 cal.date_obj.setMonth(newMonth); 567 new_mdy = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date; 568 569 highlight = (cal.selected_date == new_mdy) ? true : false; 570 cal = new calendar(cal.id, cal.date_obj, highlight, true); 571 document.getElementById('cal' + cal.id).innerHTML = cal.write(); 572} 573 574// Finalize the date string 575function date_str(time) 576{ 577 var month = this.month + 1; 578 if (month < 10) 579 month = '0' + month; 580 581 var day = (this.date < 10) ? '0' + this.date : this.date; 582 var minutes = (this.minutes < 10) ? '0' + this.minutes : this.minutes; 583 584 if (format == 'us') 585 { 586 var hours = (this.hours > 12) ? this.hours - 12 : this.hours; 587 var ampm = (this.hours > 11) ? 'PM' : 'AM' 588 } 589 else 590 { 591 var hours = this.hours; 592 var ampm = ''; 593 } 594 595 if (time == 'y') 596 { 597 return this.year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ' ' + ampm; 598 } 599 else 600 { 601 return this.year + '-' + month + '-' + day; 602 } 603} 604 605//--> 606</script> 607<?php 608 609$r = ob_get_contents(); 610ob_end_clean(); 611return $r; 612} 613 614 615function js_calendar_write($field_id, $time = '', $highlight = TRUE) 616{ 617 if ($time == '') 618 $time = time(); 619 620 return 621 '<script type="text/javascript"> 622 var '.$field_id.' = new calendar("'.$field_id.'", '.$time.', '.(($highlight == TRUE) ? 'true' : 'false').'); 623 document.write('.$field_id.'.write()); 624 </script>'; 625} 626 627 628/* End of file js_calendar_pi.php */ 629/* Location: ./system/plugins/js_calendar_pi.php */