1 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
\r
5 * An open source application development framework for PHP 4.3.2 or newer
\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
16 // ------------------------------------------------------------------------
\r
21 Load the plugin using:
\r
23 $this->load->plugin('js_calendar');
\r
25 Once loaded you'll add the calendar script to the <head> of your page like this:
\r
27 <?php echo js_calendar_script('my_form'); ?>
\r
29 The above function will be passed the name of your form.
\r
31 Then to show the actual calendar you'll do this:
\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
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
43 Lastly, you'll need some CSS for your calendar:
\r
46 border: 1px #6975A3 solid;
\r
47 background-color: transparent;
\r
50 background-color: #7C8BC0;
\r
52 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
58 background-color: #7C8BC0;
\r
59 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
67 background-color: #7C8BC0;
\r
68 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
77 background-color: #000;
\r
79 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
82 padding: 6px 2px 6px 2px;
\r
86 background-color: #D1D7E6;
\r
87 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
91 border: 1px #E0E5F1 solid;
\r
96 background-color: #B3BCD4;
\r
97 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
101 border: 1px #B3BCD4 solid;
\r
105 background-color: #737FAC;
\r
107 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
\r
110 text-align: center;
\r
111 border: 1px #566188 solid;
\r
116 background-color: #fff;
\r
120 background-color: #fff;
\r
127 function js_calendar_script($form_name = 'entryform')
\r
129 $CI =& get_instance();
\r
130 $CI->load->language('calendar');
\r
133 <script type="text/javascript">
\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
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
160 var last_click = new Array();
\r
161 var current_month = '';
\r
162 var current_year = '';
\r
163 var last_date = '';
\r
165 function calendar(id, d, highlight, adjusted)
\r
167 if (adjusted == undefined)
\r
169 var d = new Date(d * 1000);
\r
173 this.highlight = highlight;
\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
186 if (highlight == false)
\r
188 this.selected_date = '';
\r
192 this.selected_date = this.year + '' + this.month + '' + this.date;
\r
195 // Set the "selected date"
\r
197 this.firstDay = d.getDay();
\r
199 //then reset the date object to the correct date
\r
200 d.setDate(this.date);
\r
203 // Build the body of the calendar
\r
204 function build_calendar()
\r
208 // Calendar Heading
\r
210 str += '<div id="cal' + this.id + '">';
\r
211 str += '<table class="calendar" cellspacing="0" cellpadding="0" border="0" >';
\r
213 str += '<td class="calnavleft" onClick="change_month(-1, \'' + this.id + '\')"><<<\/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 + '\')">>><\/td>';
\r
222 for (i = 0; i < 7; i++)
\r
224 str += '<td class="caldayheading">' + days[i] + '<\/td>';
\r
233 selDate = (last_date != '') ? last_date : this.date;
\r
235 for (j = 0; j < 42; j++)
\r
237 var displayNum = (j - this.firstDay + 1);
\r
239 if (j < this.firstDay) // leading empty cells
\r
241 str += '<td class="calblanktop"> <\/td>';
\r
243 else if (displayNum == selDate && this.highlight == true) // Selected date
\r
245 str += '<td id="' + this.id +'selected" class="caldayselected" onClick="set_date(this,\'' + this.id + '\')">' + displayNum + '<\/td>';
\r
247 else if (displayNum > this.total_days())
\r
249 str += '<td class="calblankbot"> <\/td>'; // trailing empty cells
\r
251 else // Unselected days
\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
258 str += '<\/tr><tr>';
\r
263 str += '<\/table>';
\r
269 // Total number of days in a month
\r
270 function total_days()
\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
294 // Highlight Cell on Mouseover
\r
295 function cell_highlight(td, num, cal)
\r
299 if (last_click[cal.id] != num)
\r
301 td.className = "caldaycellhover";
\r
305 // Reset Cell on MouseOut
\r
306 function cell_reset(td, num, cal)
\r
310 if (last_click[cal.id] == num)
\r
312 td.className = "caldayselected";
\r
316 td.className = "caldaycells";
\r
321 function clear_field(id)
\r
323 eval("document." + form_name + "." + id + ".value = ''");
\r
325 document.getElementById(id + "selected").className = "caldaycells";
\r
326 document.getElementById(id + "selected").id = "";
\r
329 cal.selected_date = '';
\r
333 // Set date to specified time
\r
334 function set_to_time(id, raw)
\r
336 if (document.getElementById(id + "selected"))
\r
338 document.getElementById(id + "selected").className = "caldaycells";
\r
339 document.getElementById(id + "selected").id = "";
\r
342 document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>';
\r
344 var nowDate = new Date();
\r
345 nowDate.setTime = raw * 1000;
\r
347 current_month = nowDate.getMonth();
\r
348 current_year = nowDate.getFullYear();
\r
349 current_date = nowDate.getDate();
\r
352 oldcal.selected_date = current_year + '' + current_month + '' + current_date;
\r
354 cal = new calendar(id, nowDate, true, true);
\r
355 cal.selected_date = current_year + '' + current_month + '' + current_date;
\r
357 last_date = cal.date;
\r
359 document.getElementById('tempcal'+id).innerHTML = cal.write();
\r
364 // Set date to what is in the field
\r
365 var lastDates = new Array();
\r
367 function update_calendar(id, dateValue)
\r
369 if (lastDates[id] == dateValue) return;
\r
371 lastDates[id] = dateValue;
\r
373 var fieldString = dateValue.replace(/\s+/g, ' ');
\r
375 while (fieldString.substring(0,1) == ' ')
\r
377 fieldString = fieldString.substring(1, fieldString.length);
\r
380 var dateString = fieldString.split(' ');
\r
381 var dateParts = dateString[0].split('-')
\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
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
392 if (newMonth > 12) newMonth = 12;
\r
396 switch(newMonth - 1)
\r
398 case 1: // Check for leap year
\r
399 if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
\r
401 if (newDay > 29) newDay = 29;
\r
405 if (newDay > 28) newDay = 28;
\r
408 if (newDay > 30) newDay = 30;
\r
410 if (newDay > 30) newDay = 30;
\r
412 if (newDay > 30) newDay = 30;
\r
414 if (newDay > 30) newDay = 30;
\r
416 if (newDay > 31) newDay = 31;
\r
420 if (document.getElementById(id + "selected"))
\r
422 document.getElementById(id + "selected").className = "caldaycells";
\r
423 document.getElementById(id + "selected").id = "";
\r
426 document.getElementById('cal' + id).innerHTML = '<div id="tempcal'+id+'"> <'+'/div>';
\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
434 current_month = nowDate.getMonth();
\r
435 current_year = nowDate.getFullYear();
\r
437 cal = new calendar(id, nowDate, true, true);
\r
438 document.getElementById('tempcal'+id).innerHTML = cal.write();
\r
442 function set_date(td, cal)
\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
450 if (last_click[cal.id] == td.firstChild.nodeValue)
\r
452 td.className = "caldaycells";
\r
453 last_click[cal.id] = '';
\r
455 cal.selected_date = '';
\r
460 if (document.getElementById(cal.id + "selected"))
\r
462 document.getElementById(cal.id + "selected").className = "caldaycells";
\r
463 document.getElementById(cal.id + "selected").id = "";
\r
466 td.className = "caldayselected";
\r
467 td.id = cal.id + "selected";
\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
474 last_date = cal.date;
\r
477 last_click[cal.id] = cal.date;
\r
479 // Insert the date into the form
\r
483 // Insert the date into the form field
\r
484 function insert_date(cal)
\r
487 fval = eval("document." + form_name + "." + cal.id);
\r
489 if (fval.value == '')
\r
491 fval.value = cal.date_str('y');
\r
495 time = fval.value.substring(10);
\r
496 new_date = cal.date_str('n') + time;
\r
497 fval.value = new_date;
\r
501 // Remove the date from the form field
\r
502 function remove_date(cal)
\r
505 fval = eval("document." + form_name + "." + cal.id);
\r
509 // Change to a new month
\r
510 function change_month(mo, cal)
\r
514 if (current_month != '')
\r
516 cal.date_obj.setMonth(current_month);
\r
517 cal.date_obj.setYear(current_year);
\r
519 current_month = '';
\r
523 var newMonth = cal.date_obj.getMonth() + mo;
\r
524 var newDate = cal.date_obj.getDate();
\r
526 if (newMonth == 12)
\r
528 cal.date_obj.setYear(cal.date_obj.getFullYear() + 1)
\r
531 else if (newMonth == -1)
\r
533 cal.date_obj.setYear(cal.date_obj.getFullYear() - 1)
\r
539 var newYear = cal.date_obj.getFullYear();
\r
543 case 1: // Check for leap year
\r
544 if ((newYear % 4 == 0 && newYear % 100 != 0) || newYear % 400 == 0)
\r
546 if (newDate > 29) newDate = 29;
\r
550 if (newDate > 28) newDate = 28;
\r
553 if (newDate > 30) newDate = 30;
\r
555 if (newDate > 30) newDate = 30;
\r
557 if (newDate > 30) newDate = 30;
\r
559 if (newDate > 30) newDate = 30;
\r
561 if (newDate > 31) newDate = 31;
\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
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
574 // Finalize the date string
\r
575 function date_str(time)
\r
577 var month = this.month + 1;
\r
579 month = '0' + month;
\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
584 if (format == 'us')
\r
586 var hours = (this.hours > 12) ? this.hours - 12 : this.hours;
\r
587 var ampm = (this.hours > 11) ? 'PM' : 'AM'
\r
591 var hours = this.hours;
\r
597 return this.year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ' ' + ampm;
\r
601 return this.year + '-' + month + '-' + day;
\r
609 $r = ob_get_contents();
\r
615 function js_calendar_write($field_id, $time = '', $highlight = TRUE)
\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
628 /* End of file js_calendar_pi.php */
\r
629 /* Location: ./system/plugins/js_calendar_pi.php */