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>