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

Do you like this or find it useful? Drop me a note or treat me to a double-espresso from my favorite coffee shop.