plugins/js_calendar_pi.php

   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 /*
  19 Instructions:
  20
  21 Load the plugin using:
  22
  23         $this->load->plugin('js_calendar');
  24
  25 Once 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
  29 The above function will be passed the name of your form.
  30
  31 Then 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
  40 Note:  The first parameter is the name of the field containing your date, the second parameter contains the "now" time,
  41 and the third tells the calendar whether to highlight the current day or not.
  42
  43 Lastly, 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
 127 function js_calendar_script($form_name = 'entryform')
 128 {
 129 $CI =& get_instance();
 130 $CI->load->language('calendar');
 131 ob_start();
 132 ?>
 133 <script type="text/javascript">
 134 <!--
 135 var form_name   = "<?php echo $form_name; ?>";
 136 var format              = 'us'; // eu or us
 137 var 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                                 );
 146 var 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                                 );
 160 var last_click  = new Array();
 161 var current_month  = '';
 162 var current_year   = '';
 163 var last_date  = '';
 164
 165 function 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
 204 function 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 + '\')">&lt;&lt;<\/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 + '\')">&gt;&gt;<\/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">&nbsp;<\/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">&nbsp;<\/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
 270 function 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
 295 function 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
 306 function 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
 321 function 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
 334 function 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+'">&nbsp;<'+'/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
 365 var lastDates = new Array();
 366
 367 function 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+'">&nbsp;<'+'/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
 442 function 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
 484 function 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
 502 function 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
 510 function 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
 575 function 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();
 610 ob_end_clean();
 611 return $r;
 612 }
 613
 614
 615 function 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 */