Question

Hello Im using the jQuery UI calendar to display my events, the design is slick and it works perfectly.

However I’d like to add links to my events (highlighted days on my calendar) and I can’t find anything to help me code this.

Here is my code to select the days I want and add a tooltip of the event name:

$("#div-calendar").datepicker({ beforeShowDay: highlightDays });
var dates = //Array Containing Events dates, names and link.

//Highlight days on the calendar
function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
        if (date - dates[i][0] == 0) { return [true, '', dates[i][1]]; }
    }
    return [false];
}

The only syntax I found is :

return [true, '', dates[i][1]];

1st parameter is highlight the date, 2nd is custom css and 3rd is tooltip.

So is it possible to add a link on those days? pretty much like I did with tooltips.

Thanks.

Answer 1

Ok this is cheesy, but I found no better solutions out there. I pass the value using the class parameter.

It show events on a jQuery Date Picker calendar, it show a custom tooltip for each event and when clicked, it brings you to a detailed page for that event.

$("#div-calendar").datepicker({ beforeShowDay: highlightDays, onSelect: SelectedDay });
dates = //Array Containing Events [date, name, id] of each event. (from ajax)


//Highlight days on the calendar, the array *dates* in this example.
function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
        if (date - dates[i][0] == 0) { 
            //1st parameter is highlight the date, 2nd is custom css and 3rd is tooltip.
            return [true, 'ID=' + dates[i][2], dates[i][1]]; 
        }
    }
    return [false];
}


//When a highlighted day is clicked
function SelectedDay(date, inst) {

    //hack so the UI is updated see : http://stackoverflow.com/questions/4854635/jquery-datepicker-onselect-event-fired-to-early
    window.setTimeout(function () {

       //Get the clicked cell classes
       var classes = inst.dpDiv.find('.ui-datepicker-current-day a').parent().attr("class").split(" ");

       //loop through classes, read the ID=x class and extract 'x', then redirect to desired page
       for (var i in classes) {
            if (classes[i].substring(0, 3) == "ID=") { location.href = "/mypage.php?ID=" + classes[i].substring(3) }
       }

    }, 0);

}