load->plugin('js_calendar');
Once loaded you'll add the calendar script to the of your page like this:
The above function will be passed the name of your form.
Then to show the actual calendar you'll do this:
Note: The first parameter is the name of the field containing your date, the second parameter contains the "now" time,
and the third tells the calendar whether to highlight the current day or not.
Lastly, you'll need some CSS for your calendar:
.calendar {
border: 1px #6975A3 solid;
background-color: transparent;
}
.calheading {
background-color: #7C8BC0;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.calnavleft {
background-color: #7C8BC0;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
padding: 4px;
cursor: pointer;
}
.calnavright {
background-color: #7C8BC0;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
font-weight: bold;
color: #fff;
text-align: right;
padding: 4px;
cursor: pointer;
}
.caldayheading {
background-color: #000;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 10px;
text-align: center;
padding: 6px 2px 6px 2px;
}
.caldaycells{
color: #000;
background-color: #D1D7E6;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
text-align: center;
padding: 4px;
border: 1px #E0E5F1 solid;
cursor: pointer;
}
.caldaycellhover{
color: #fff;
background-color: #B3BCD4;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
text-align: center;
padding: 4px;
border: 1px #B3BCD4 solid;
cursor: pointer;
}
.caldayselected{
background-color: #737FAC;
color: #fff;
font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
border: 1px #566188 solid;
padding: 3px;
cursor: pointer;
}
.calblanktop {
background-color: #fff;
padding: 4px;
}
.calblankbot {
background-color: #fff;
padding: 4px;
}
*/
function js_calendar_script($form_name = 'entryform')
{
$CI =& get_instance();
$CI->load->language('calendar');
ob_start();
?>
var '.$field_id.' = new calendar("'.$field_id.'", '.$time.', '.(($highlight == TRUE) ? 'true' : 'false').');
document.write('.$field_id.'.write());
';
}
/* End of file js_calendar_pi.php */
/* Location: ./system/plugins/js_calendar_pi.php */