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("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

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

    March 17th 2010

    Salauat - Thank you very much!

    Reply

    April 19th 2010

    Lucas - This is what I call, usefull stuff !!! I only have one question. How would you modify this to have next/prev controls to show different months; getting the dates of that new Months [I would like to show 3 months at once] via AJAX ?? Gotcha !! xD Thanks man !!

    Reply

    May 14th 2010

    Casey - Exactly what I needed. Thanks for sharing!

    Reply

    May 14th 2010

    Casey - Just ran into a small snag in Safari which kept returning an ajax error. The leading zeroes in my date were making the json format invalid and causing it to return an error. Worked fine on FF and IE, but Safari choked. Simple fix: The date format at line 12 should be changed to $converteddate = date("n,j,Y",$row->eventdate); Thanks again!

    Emir - Thanks Casey. I updated the script.

    Reply

    May 28th 2010

    Ashley - Enjoy the coffee, good work ;)

    Emir - Awesome! THANKS ASHLEY!

    Reply

    June 14th 2010

    Maarten - Hi! Do you have a working demo of this? Since this needs a little bit more configuration then just copy-paste.. i ran into some problems :-) Thanks!

    Reply

    June 24th 2010

    Maarten - Hi there.. can you please let me know if you can create a working demo for me? I'm watching this site everyday :-)

    Emir - Maarten, can you use the contact me link below and email me a link to a page where you are trying to implement this script?

    Reply

    June 28th 2010

    Maarten - Ok, I will.. busy busy but thanks in advance.

    Reply

    July 13th 2010

    Miguel - great job.!!

    Reply

    August 3rd 2010

    Tobur - большое спасибо за заметку! очень пригодилось

    Reply

    August 4th 2010

    Lukas - There's an SQL-injection-vulnerability in your PHP-script: $qry = "SELECT * FROM event_table WHERE eventid = '".$id."'"; should be changed to $qry = "SELECT * FROM event_table WHERE eventid = '".mysql_real_escape_string($id)."'"; otherwise an attacker would be able to execute code in your database.

    Reply

    Add Comment | Contact me