jquery php mysql and datepicker

Datepicker (http://docs.jquery.com/UI/Datepicker and http://marcgrabanski.com/code/ui-datepicker/) is a very good library for jquery. I had some problems to make it work with PHP and MySQL. The main reason was the beforeShowDay, for all events in datepicker it load the beforeShowDay +/- 36 times, one for each day of the month plus few days after and before. To avoid to have a ajax call every time, you need to create a cache in javascript. There are several patterns to do cache I will do one very simple as example. You could also use the inarray jquery function, but I decide to you the loop to be more clear in the example I will not cover:

• jquery
• json
• php
• mysql
• json in PHP, see the very nice article: http://extjs.com/tutorial/creating-json-data-php

Just the basic concepts. The main trick in this are $.ajax (asynch:false and dataType: "json") and cache the days, you can cache a batch of days per month or per year. I will add the comments and everything latter, just quick notes:

• for all events in datepicker it calls dateLoading (beforeShowDay: dateLoading)
• at the time you select a day it calls dateSelected (onSelect: dateSelected)

Libraries you need to load:

• ui.datepicker.css - http://marcgrabanski.com/code/ui-datepicker/core/ui.datepicker.css
• jquery.js - http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.3.min.js
• ui.datepicker.js - http://marcgrabanski.com/code/ui-datepicker/core/ui.datepicker.js

The javscript in the header section

// cache the days and months
var cached_days = [];
var cached_months = [];
$(document).ready(function() {
 $('#dateinput').datepicker({ 
  beforeShowDay: dateLoading,
  onSelect: dateSelected,
  dateFormat: 'yy-mm-dd'
 });
});

function dateLoading(date) { 
 var year_month = ""+ (date.getFullYear()) +"-"+ (date.getMonth()+1) +"";
 var year_month_day = ""+ year_month+"-"+ date.getDate()+"";
 var opts = "";
 var i = 0;
 var ret = false;
 i = 0;
 ret = false;
 
 
 for (i in cached_months) {
  if (cached_months[i] == year_month){
   // if found the month in the cache
   ret = true;
   break;
  };
 };
 
 // check if the month was not caached 
 if (ret == false){
  //  load the month via .ajax
  opts= "month="+ (date.getMonth()+1);
  opts=opts +"&year="+ (date.getFullYear());
  // we will use the "async: false" because if we use async call, the datapickr will wait for the data to be loaded
  $.ajax({
   url: "return_days.php",
   data: opts,
   dataType: "json",
   async: false,
   success: function(data){
    // add the month to the cache
    cached_months[cached_months.length]= year_month ;
    $.each(data.days, function(i, day){
     cached_days[cached_days.length]= year_month +"-"+ day.day +"";
    });
   }
  });
 };
 i = 0;
 ret = false;
 
 // check if date from datapicker is in the cache otherwise return false
 // the .ajax returns only days that exists
 for (i in cached_days) {
  if (year_month_day == cached_days[i]){
   ret = true;
  };
 };
 return [ret, ''];
};

// trigger when the data picker day is selected
// get the data information: images and binaries and fill the id: images and downloads
function dateSelected(date) {
opts = "date="+ date;
 $("#images").html("");
 $.getJSON(
  "return_images.php",
  opts,
  function(data){
   $("#images").append("
");
  }
 );
};

The html body

go to january 2008

The php code to load the days (return_days.php), you can use mysql to populate the $output[]

$output = array();
// it need to return something otherwise the foreach will break in the .ajax side
$output['days'][] = array('day'  => 0);

if ( ($_REQUEST["month"]==1) and ($_REQUEST["year"]==2008) ){
$output['days'][] = array('day'=>2);
$output['days'][] = array('day'=>4);
$output['days'][] = array('day'=>6);
$output['days'][] = array('day'=>8);
$output['days'][] = array('day'=>10);
}
echo json_encode($output);

The php code to load the images (return_images.php), again you can use mysql to populate the $output[]

$output = array();
switch ($_REQUEST["date"]) {
case "2008-01-02":
$output['images'] = "http://farm1.static.flickr.com/214/505956789_d218caee60_t.jpg";
break;
case "2008-01-04":
$output['images'] = "http://us.i1.yimg.com/us.yimg.com/i/ww/news/2007/04/23/24hours.png";
break;
case "2008-01-06":
$output['images'] = "http://farm1.static.flickr.com/149/409748300_69d05e4ff5_m.jpg";
break;
case "2008-01-08":
$output['images'] = "http://farm1.static.flickr.com/21/98559538_e8d7aa99f2_o.jpg";
break;
case "2008-01-10":
$output['images'] = "http://farm1.static.flickr.com/197/443158364_b615c1ffd5_m.jpg";
break;
}
echo json_encode($output);
exit;