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