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:
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:
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;