js_calendar_pi.php

Go to the documentation of this file.
00001 <?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
00002 /**
00003  * CodeIgniter
00004  *
00005  * An open source application development framework for PHP 4.3.2 or newer
00006  *
00007  * @package             CodeIgniter
00008  * @author              ExpressionEngine Dev Team
00009  * @copyright   Copyright (c) 2006, EllisLab, Inc.
00010  * @license             http://codeigniter.com/user_guide/license.html
00011  * @link                http://codeigniter.com
00012  * @since               Version 1.0
00013  * @filesource
00014  */
00015 
00016 // ------------------------------------------------------------------------
00017 
00018 /*
00019 Instructions:
00020 
00021 Load the plugin using:
00022 
00023         $this->load->plugin('js_calendar');
00024 
00025 Once loaded you'll add the calendar script to the <head> of your page like this:
00026 
00027 <?php echo js_calendar_script('my_form');  ?>
00028 
00029 The above function will be passed the name of your form.
00030 
00031 Then to show the actual calendar you'll do this:
00032 
00033 <?php echo js_calendar_write('entry_date', time(), true);?>
00034 <form name="my_form">
00035 <input type="text" name="entry_date" value="" onblur="update_calendar(this.name, this.value);" />
00036 <p><a href="javascript:void(0);" onClick="set_to_time('entry_date', '<?php echo time();?>')" >Today</a></p>
00037 </form>
00038 
00039 
00040 Note:  The first parameter is the name of the field containing your date, the second parameter contains the "now" time,
00041 and the third tells the calendar whether to highlight the current day or not.
00042 
00043 Lastly, you'll need some CSS for your calendar:
00044 
00045 .calendar {
00046         border: 1px #6975A3 solid;
00047         background-color: transparent;
00048 }
00049 .calheading {
00050         background-color: #7C8BC0;
00051         color: #fff;
00052         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00053         font-size: 11px;
00054         font-weight: bold;
00055         text-align: center;
00056 }
00057 .calnavleft {
00058         background-color: #7C8BC0;
00059         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00060         font-size: 10px;
00061         font-weight: bold;
00062         color: #fff;
00063         padding: 4px;
00064         cursor: pointer;
00065 }
00066 .calnavright {
00067         background-color: #7C8BC0;
00068         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00069         font-size: 10px;
00070         font-weight: bold;
00071         color: #fff;
00072         text-align:  right;
00073         padding: 4px;
00074         cursor: pointer;
00075 }
00076 .caldayheading {
00077         background-color: #000;
00078         color: #fff;
00079         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00080         font-size: 10px;
00081         text-align: center;
00082         padding: 6px 2px 6px 2px;
00083 }
00084 .caldaycells{
00085         color: #000;
00086         background-color: #D1D7E6;
00087         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00088         font-size: 11px;
00089         text-align: center;
00090         padding: 4px;
00091         border: 1px #E0E5F1 solid;
00092         cursor: pointer;
00093 }
00094 .caldaycellhover{
00095         color: #fff;
00096         background-color: #B3BCD4;
00097         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00098         font-size: 11px;
00099         text-align: center;
00100         padding: 4px;
00101         border: 1px #B3BCD4 solid;
00102         cursor: pointer;
00103 }
00104 .caldayselected{
00105         background-color: #737FAC;
00106         color:  #fff;
00107         font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
00108         font-size: 11px;
00109         font-weight: bold;
00110         text-align: center;
00111         border: 1px #566188 solid;
00112         padding: 3px;
00113         cursor: pointer;
00114 }
00115 .calblanktop {
00116         background-color: #fff;
00117         padding: 4px;
00118 }
00119 .calblankbot {
00120         background-color: #fff;
00121         padding: 4px;
00122 }
00123 
00124 
00125 */
00126 
00127 function js_calendar_script($form_name = 'entryform')
00128 {               
00129 $CI =& get_instance();
00130 $CI->load->language('calendar');
00131 ob_start();
00132 ?>
00133 <script type="text/javascript">
00134 <!--
00135 var form_name   = "<?php echo $form_name; ?>";
00136 var format              = 'us'; // eu or us
00137 var days                = new Array(
00138                                         '<?php echo $CI->lang->line('cal_su');?>', // Sunday, short name
00139                                         '<?php echo $CI->lang->line('cal_mo');?>', // Monday, short name
00140                                         '<?php echo $CI->lang->line('cal_tu');?>', // Tuesday, short name
00141                                         '<?php echo $CI->lang->line('cal_wed');?>', // Wednesday, short name
00142                                         '<?php echo $CI->lang->line('cal_thu');?>', // Thursday, short name
00143                                         '<?php echo $CI->lang->line('cal_fri');?>', // Friday, short name
00144                                         '<?php echo $CI->lang->line('cal_sat');?>' // Saturday, short name
00145                                 );
00146 var months              = new Array(
00147                                         '<?php echo $CI->lang->line('cal_january');?>',
00148                                         '<?php echo $CI->lang->line('cal_february');?>',
00149                                         '<?php echo $CI->lang->line('cal_march');?>',
00150                                         '<?php echo $CI->lang->line('cal_april');?>',
00151                                         '<?php echo $CI->lang->line('cal_mayl');?>',
00152                                         '<?php echo $CI->lang->line('cal_june');?>',
00153                                         '<?php echo $CI->lang->line('cal_july');?>',
00154                                         '<?php echo $CI->lang->line('cal_august');?>',
00155                                         '<?php echo $CI->lang->line('cal_september');?>',
00156                                         '<?php echo $CI->lang->line('cal_october');?>',
00157                                         '<?php echo $CI->lang->line('cal_november');?>',
00158                                         '<?php echo $CI->lang->line('cal_december');?>'
00159                                 );
00160 var last_click  = new Array();
00161 var current_month  = '';
00162 var current_year   = '';
00163 var last_date  = '';
00164         
00165 function calendar(id, d, highlight, adjusted)
00166 {               
00167         if (adjusted == undefined)
00168         {       
00169                 var d = new Date(d * 1000);
00170         }
00171 
00172         this.id                 = id;
00173         this.highlight  = highlight;
00174         this.date_obj   = d;
00175         this.write              = build_calendar;
00176         this.total_days = total_days;
00177         this.month              = d.getMonth();
00178         this.date               = d.getDate();
00179         this.day                = d.getDay();
00180         this.year               = d.getFullYear();
00181         this.hours              = d.getHours();
00182         this.minutes    = d.getMinutes();
00183         this.seconds    = d.getSeconds();
00184         this.date_str   = date_str;
00185                                 
00186         if (highlight == false)
00187         {
00188                 this.selected_date = '';
00189         }
00190         else
00191         {
00192                 this.selected_date = this.year + '' + this.month + '' + this.date;
00193         }
00194                         
00195         //      Set the "selected date"
00196         d.setDate(1);
00197         this.firstDay = d.getDay();
00198         
00199         //then reset the date object to the correct date
00200         d.setDate(this.date);
00201 }
00202                 
00203 //      Build the body of the calendar
00204 function build_calendar()
00205 {
00206         var str = '';
00207         
00208         //      Calendar Heading
00209         
00210         str += '<div id="cal' + this.id + '">';
00211         str += '<table class="calendar" cellspacing="0" cellpadding="0" border="0" >';
00212         str += '<tr>';
00213         str += '<td class="calnavleft" onClick="change_month(-1, \'' + this.id + '\')">&lt;&lt;<\/td>';
00214         str += '<td colspan="5" class="calheading">' + months[this.month] + ' ' + this.year + '<\/td>';
00215         str += '<td class="calnavright" onClick="change_month(1, \'' + this.id + '\')">&gt;&gt;<\/td>';
00216         str += '<\/tr>';
00217         
00218         //      Day Names
00219         
00220         str += '<tr>';
00221         
00222         for (i = 0; i < 7; i++)
00223         {
00224                 str += '<td class="caldayheading">' + days[i] + '<\/td>';
00225         }
00226         
00227         str += '<\/tr>';
00228         
00229         //      Day Cells
00230                 
00231         str += '<tr>';
00232         
00233         selDate = (last_date != '') ? last_date : this.date;
00234         
00235         for (j = 0; j < 42; j++)
00236         {
00237                 var displayNum = (j - this.firstDay + 1);
00238                 
00239                 if (j < this.firstDay) // leading empty cells
00240                 {
00241                         str += '<td class="calblanktop">&nbsp;<\/td>';
00242                 }
00243                 else if (displayNum == selDate && this.highlight == true) // Selected date
00244                 {
00245                         str += '<td id="' + this.id +'selected" class="caldayselected" onClick="set_date(this,\'' + this.id + '\')">' + displayNum + '<\/td>';
00246                 }
00247                 else if (displayNum > this.total_days())
00248                 {
00249                         str += '<td class="calblankbot">&nbsp;<\/td>'; // trailing empty cells
00250                 }
00251                 else  // Unselected days
00252                 {
00253                         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>';
00254                 }
00255                 
00256                 if (j % 7 == 6)
00257                 {
00258                         str += '<\/tr><tr>';
00259                 }
00260         }
00261 
00262         str += '<\/tr>';        
00263         str += '<\/table>';
00264         str += '<\/div>';
00265         
00266         return str;
00267 }
00268 
00269 //      Total number of days in a month
00270 function total_days()
00271 {       
00272         switch(this.month)
00273         {
00274                 case 1: // Check for leap year
00275                         if ((  this.date_obj.getFullYear() % 4 == 0
00276                                 && this.date_obj.getFullYear() % 100 != 0)
00277                                 || this.date_obj.getFullYear() % 400 == 0)
00278                                 return 29;
00279                         else
00280                                 return 28;
00281                 case 3:
00282                         return 30;
00283                 case 5:
00284                         return 30;
00285                 case 8:
00286                         return 30;
00287                 case 10:
00288                         return 30
00289                 default:
00290                         return 31;
00291         }
00292 }
00293 
00294 //      Highlight Cell on Mouseover
00295 function cell_highlight(td, num, cal)
00296 {
00297         cal = eval(cal);
00298 
00299         if (last_click[cal.id]  != num)
00300         {
00301                 td.className = "caldaycellhover";
00302         }
00303 }               
00304 
00305 //      Reset Cell on MouseOut
00306 function cell_reset(td, num, cal)
00307 {       
00308         cal = eval(cal);
00309 
00310         if (last_click[cal.id] == num)
00311         {
00312                 td.className = "caldayselected";
00313         }
00314         else
00315         {
00316                 td.className = "caldaycells";
00317         }
00318 }               
00319 
00320 //      Clear Field
00321 function clear_field(id)
00322 {                               
00323         eval("document." + form_name + "." + id + ".value = ''");
00324         
00325         document.getElementById(id + "selected").className = "caldaycells";
00326         document.getElementById(id + "selected").id = "";       
00327         
00328         cal = eval(id);
00329         cal.selected_date = '';         
00330 }               
00331 
00332 
00333 //      Set date to specified time
00334 function set_to_time(id, raw)
00335 {                       
00336         if (document.getElementById(id + "selected"))
00337         {                       
00338                 document.getElementById(id + "selected").className = "caldaycells";
00339                 document.getElementById(id + "selected").id = "";       
00340         }
00341         
00342         document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'">&nbsp;<'+'/div>';                              
00343                 
00344         var nowDate = new Date();
00345         nowDate.setTime = raw * 1000;
00346         
00347         current_month   = nowDate.getMonth();
00348         current_year    = nowDate.getFullYear();
00349         current_date    = nowDate.getDate();
00350         
00351         oldcal = eval(id);
00352         oldcal.selected_date = current_year + '' + current_month + '' + current_date;                           
00353 
00354         cal = new calendar(id, nowDate, true, true);            
00355         cal.selected_date = current_year + '' + current_month + '' + current_date;      
00356         
00357         last_date = cal.date;
00358         
00359         document.getElementById('tempcal'+id).innerHTML = cal.write();  
00360         
00361         insert_date(cal);
00362 }
00363 
00364 //      Set date to what is in the field
00365 var lastDates = new Array();
00366 
00367 function update_calendar(id, dateValue)
00368 {
00369         if (lastDates[id] == dateValue) return;
00370         
00371         lastDates[id] = dateValue;
00372         
00373         var fieldString = dateValue.replace(/\s+/g, ' ');
00374         
00375         while (fieldString.substring(0,1) == ' ')
00376         {
00377                 fieldString = fieldString.substring(1, fieldString.length);
00378         }
00379         
00380         var dateString = fieldString.split(' ');
00381         var dateParts = dateString[0].split('-')
00382 
00383         if (dateParts.length < 3) return;
00384         var newYear  = dateParts[0];
00385         var newMonth = dateParts[1];
00386         var newDay   = dateParts[2];
00387         
00388         if (isNaN(newDay)  || newDay < 1 || (newDay.length != 1 && newDay.length != 2)) return;
00389         if (isNaN(newYear) || newYear < 1 || newYear.length != 4) return;
00390         if (isNaN(newMonth) || newMonth < 1 || (newMonth.length != 1 && newMonth.length != 2)) return;
00391         
00392         if (newMonth > 12) newMonth = 12;
00393         
00394         if (newDay > 28)
00395         {
00396                 switch(newMonth - 1)
00397                 {
00398                         case 1: // Check for leap year
00399                                 if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
00400                                 {
00401                                         if (newDay > 29) newDay = 29;
00402                                 }
00403                                 else
00404                                 {
00405                                         if (newDay > 28) newDay = 28;
00406                                 }
00407                         case 3:
00408                                 if (newDay > 30) newDay = 30;
00409                         case 5:
00410                                 if (newDay > 30) newDay = 30;
00411                         case 8:
00412                                 if (newDay > 30) newDay = 30;
00413                         case 10:
00414                                 if (newDay > 30) newDay = 30;
00415                         default:
00416                                 if (newDay > 31) newDay = 31;
00417                 }
00418         }
00419         
00420         if (document.getElementById(id + "selected"))
00421         {                       
00422                 document.getElementById(id + "selected").className = "caldaycells";
00423                 document.getElementById(id + "selected").id = "";       
00424         }
00425         
00426         document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'">&nbsp;<'+'/div>';                              
00427                 
00428         var nowDate = new Date();
00429         nowDate.setDate(newDay);
00430         nowDate.setMonth(newMonth - 1);
00431         nowDate.setYear(newYear);
00432         nowDate.setHours(12);
00433         
00434         current_month   = nowDate.getMonth();
00435         current_year    = nowDate.getFullYear();
00436 
00437         cal = new calendar(id, nowDate, true, true);                                            
00438         document.getElementById('tempcal'+id).innerHTML = cal.write();  
00439 }
00440 
00441 //      Set the date
00442 function set_date(td, cal)
00443 {                                       
00444 
00445         cal = eval(cal);
00446         
00447         // If the user is clicking a cell that is already
00448         // selected we'll de-select it and clear the form field
00449         
00450         if (last_click[cal.id] == td.firstChild.nodeValue)
00451         {
00452                 td.className = "caldaycells";
00453                 last_click[cal.id] = '';
00454                 remove_date(cal);
00455                 cal.selected_date =  '';
00456                 return;
00457         }
00458                                 
00459         // Onward!
00460         if (document.getElementById(cal.id + "selected"))
00461         {
00462                 document.getElementById(cal.id + "selected").className = "caldaycells";
00463                 document.getElementById(cal.id + "selected").id = "";
00464         }
00465                                                                         
00466         td.className = "caldayselected";
00467         td.id = cal.id + "selected";
00468 
00469         cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;                  
00470         cal.date_obj.setDate(td.firstChild.nodeValue);
00471         cal = new calendar(cal.id, cal.date_obj, true, true);
00472         cal.selected_date = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;                  
00473         
00474         last_date = cal.date;
00475 
00476         //cal.date
00477         last_click[cal.id] = cal.date;
00478                                 
00479         // Insert the date into the form
00480         insert_date(cal);
00481 }
00482 /*
00483 //      Insert the date into the form field
00484 function insert_date(cal)
00485 {
00486         cal = eval(cal);
00487         fval = eval("document." + form_name + "." + cal.id);    
00488         
00489         if (fval.value == '')
00490         {
00491                 fval.value = cal.date_str('y');
00492         }
00493         else
00494         {
00495                 time = fval.value.substring(10);
00496                 new_date = cal.date_str('n') + time;
00497                 fval.value = new_date;
00498         }       
00499 }
00500 */              
00501 //      Remove the date from the form field
00502 function remove_date(cal)
00503 {
00504         cal = eval(cal);
00505         fval = eval("document." + form_name + "." + cal.id);    
00506         fval.value = '';
00507 }
00508 
00509 //      Change to a new month
00510 function change_month(mo, cal)
00511 {               
00512         cal = eval(cal);
00513 
00514         if (current_month != '')
00515         {
00516                 cal.date_obj.setMonth(current_month);
00517                 cal.date_obj.setYear(current_year);
00518         
00519                 current_month   = '';
00520                 current_year    = '';
00521         }
00522                                 
00523         var newMonth = cal.date_obj.getMonth() + mo;
00524         var newDate  = cal.date_obj.getDate();
00525         
00526         if (newMonth == 12)
00527         {
00528                 cal.date_obj.setYear(cal.date_obj.getFullYear() + 1)
00529                 newMonth = 0;
00530         }
00531         else if (newMonth == -1)
00532         {
00533                 cal.date_obj.setYear(cal.date_obj.getFullYear() - 1)
00534                 newMonth = 11;
00535         }
00536         
00537         if (newDate > 28)
00538         {
00539                 var newYear = cal.date_obj.getFullYear();
00540                 
00541                 switch(newMonth)
00542                 {
00543                         case 1: // Check for leap year
00544                                 if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
00545                                 {
00546                                         if (newDate > 29) newDate = 29;
00547                                 }
00548                                 else
00549                                 {
00550                                         if (newDate > 28) newDate = 28;
00551                                 }
00552                         case 3:
00553                                 if (newDate > 30) newDate = 30;
00554                         case 5:
00555                                 if (newDate > 30) newDate = 30;
00556                         case 8:
00557                                 if (newDate > 30) newDate = 30;
00558                         case 10:
00559                                 if (newDate > 30) newDate = 30;
00560                         default:
00561                                 if (newDate > 31) newDate = 31;
00562                 }
00563         }
00564         
00565         cal.date_obj.setDate(newDate);
00566         cal.date_obj.setMonth(newMonth);
00567         new_mdy = cal.date_obj.getFullYear() + '' + cal.date_obj.getMonth() + '' + cal.date;
00568         
00569         highlight = (cal.selected_date == new_mdy) ? true : false;                      
00570         cal = new calendar(cal.id, cal.date_obj, highlight, true);                      
00571         document.getElementById('cal' + cal.id).innerHTML = cal.write();        
00572 }
00573 
00574 //      Finalize the date string
00575 function date_str(time)
00576 {
00577         var month = this.month + 1;
00578         if (month < 10)
00579                 month = '0' + month;
00580                 
00581         var day         = (this.date  < 10)     ?  '0' + this.date              : this.date;
00582         var minutes     = (this.minutes  < 10)  ?  '0' + this.minutes   : this.minutes;
00583                 
00584         if (format == 'us')
00585         {
00586                 var hours       = (this.hours > 12) ? this.hours - 12 : this.hours;
00587                 var ampm        = (this.hours > 11) ? 'PM' : 'AM'
00588         }
00589         else
00590         {
00591                 var hours       = this.hours;
00592                 var ampm        = '';
00593         }
00594         
00595         if (time == 'y')
00596         {
00597                 return this.year + '-' + month + '-' + day + '  ' + hours + ':' + minutes + ' ' + ampm;         
00598         }
00599         else
00600         {
00601                 return this.year + '-' + month + '-' + day;
00602         }
00603 }
00604 
00605 //-->
00606 </script>
00607 <?php
00608 
00609 $r = ob_get_contents();
00610 ob_end_clean();
00611 return $r;
00612 }
00613 
00614 
00615 function js_calendar_write($field_id, $time = '', $highlight = TRUE)
00616 {
00617         if ($time == '')
00618                 $time = time();
00619 
00620         return
00621         '<script type="text/javascript">
00622                 var '.$field_id.' = new calendar("'.$field_id.'", '.$time.', '.(($highlight == TRUE) ? 'true' : 'false').');
00623                 document.write('.$field_id.'.write());
00624         </script>';     
00625 }       
00626 
00627 
00628 /* End of file js_calendar_pi.php */
00629 /* Location: ./system/plugins/js_calendar_pi.php */