plugins/js_calendar_pi.php

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