jQuery UI: Highlight multiple dates in jQuery datepicker
The events are stored as UNIX timestamps in a MySQL table. We'll be getting those events from the database via AJAX and highlight them in the jQuery UI datepicker widget.
HTML
Javascript
$.ajax({
url: "dates.php",
data: "action=showdates&id=1",
dataType: "json",
success: function(calendarEvents){
$(".calendarwidget'").datepicker({
// [rows, columns] if you want to display multiple calendars.
numberOfMonths: [1, 1],
showCurrentAtPos: 0,
beforeShowDay: function (date){
for (i = 0; i < calendarEvents.length; i++) {
if (date.getMonth() == calendarEvents[i][0] - 1
&& date.getDate() == calendarEvents[i][1]
&& date.getFullYear() == calendarEvents[i][2]) {
//[disable/enable, class for styling appearance, tool tip]
return [false,"ui-state-active","Event Name"];
}
}
return [true, ""];//enable all other days
}
});
}
});
PHP
Here is our AJAX service. Assumption here is that we are getting the date from a UNIX timestamp stored in a MySQL table.
$action = $_REQUEST['action'];
$id = $_REQUEST['id'];
switch ($action){
case 'showdates':
$qry = "SELECT * FROM event_table WHERE eventid = '".$id."'";
$result = mysql_query($qry) or die ("Error in query: $qry. " . mysql_error());
echo '[';
do{
if($row->eventid != ''){//makes sure no blanks are returned
//this assumes that "eventdate" is UNIX timestamp
$converteddate = date("m,d,Y",$row->eventdate);
$dates .= '['.$converteddate.'],';
}
}while($row = mysql_fetch_object($result));
$dates =rtrim($dates, ",");
echo $dates;
echo ']';
break;
}
Resources
jQuery UI datepickerhttp://jqueryui.com/demos/datepicker/
jQuery AJAX
http://docs.jquery.com/Ajax
PHP Date Manual
http://php.net/manual/en/function.date.php
Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.

Comments
January 27th 2010
nurion - Thanks! You pointed the right direction for me and saved my head from being achy ;)
Reply
February 8th 2010
Mamaun - THANKS!!! Very useful!
Reply