how can i make simple news calendar on jQuery datepicker - php

Question

I have code:
$(function() {
$('#datepicker').datepicker({
beforeShowDay: daysToMarkAndLink
});
});
function daysToMarkAndLink(date) {
.....(if daysToMarkAndLink matches){
......(link goes here and also highlight);
}
return [false];
}
<?
$sql = mysql_query("SELECT * FROM news");
while ($row = mysql_fetch_array($sql))
{
print $row["time_added"];
}
?>
i want to do something like, highlight the only days i have in database also and link them on my news page, filter by date_added.
i want a very simple news calendar on jQuery datepicker.
thanks

Answer 1

To implement this, you need to use a mix of beforeShowDay and onSelect like this:
<input type="textbox" id="mydate"></input>
<script>
//<![CDATA[
var dateArray = new Array();
// generate these from mysql. Replace the date by your date field
dateArray.push({date: new Date('2011/7/5'), link: 'http://mylink1.com'});
dateArray.push({date: new Date('2011/7/6'), link: 'http://mylink2.com'});
dateArray.push({date: new Date('2011/7/10'), link: 'http://mylink3.com'});
dateArray.push({date: new Date('2011/7/15'), link: 'http://mylink4.com'});
function formatDate(date) // we use function to convert date to a string we can debug
{
var mon = date.getMonth(); // 0-based
var day = date.getDate(); // 1-based
var yyy = date.getFullYear();
return (mon+1)+'/'+day+'/'+yyy;
}
$(function(){
$("#mydate").datepicker({
beforeShowDay: function(date) {
var bFound = false;
var sDate = formatDate(date);
for (var i = 0; i < dateArray.length; i++) {
var compDate = formatDate(dateArray[i].date);
if (sDate == compDate) {
bFound = true;
break;
}
}
return [bFound,'',''];
},
onSelect: function(dateText, inst) {
var sDate = formatDate(new Date(dateText));
for (var i = 0; i < dateArray.length; i++) {
var compDate = formatDate(dateArray[i].date);
if (sDate == compDate) {
document.location.href = dateArray[i].link;
break;
}
}
}
});
});
//]]>
</script>