jQuery UI: Highlight multiple dates in jquery datepicker

JavaScript

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",
  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'];

switch ($action){
case 'showdates':
$qry = "SELECT * FROM event_table";
        $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("n,j,Y",$row->eventdate);
                $dates .= '['.$converteddate.'],';
            }
        }while($row = mysql_fetch_object($result));
        $dates =rtrim($dates, ",");
        echo $dates;
        echo ']';
break;
}

Resources

jQuery UI datepicker
http://jqueryui.com/demos/datepicker/

jQuery AJAX

http://docs.jquery.com/Ajax

PHP Date Manual
http://php.net/manual/en/function.date.php

Example

Download

Do you like this script? Support it by downloading the packaged file with an example:

Related Posts:

8 comments