How to hyperlink the selected dates in jQuery Datepicker UI?

Question

Can anybody help with this task? I am not a javascript guru and got stuck little bit. I'm using a jQuery Datepicker UI to create events calendar.

I want to hyperlink the selected dates (with events names) to appropriate event (separate page or anchor). Here is the script I'm using to specify my events:

$(function() {
    // format: specialDays.year.month.day
    var specialDays = {
        '2011': { 
                '10': { 
                        '1': {content: "Event numer 1", className: "museumevent"},
                        '2': {content: "Event numer 2", className: "museumevent"},
                        '3': {content: "Event numer 3", className: "museumevent"},
                        '4': {content: "Event numer 4", className: "museumevent"},
                        '5': {content: "Event numer 5", className: "museumevent"},
                        '6': {content: "Event numer 6", className: "museumevent"},
                        '7': {content: "Event numer 7", className: "museumevent"},
                        '8': {content: "Event numer 8", className: "museumevent"},
                        '9': {content: "Event numer 9", className: "museumevent"},
                        '10': {content: "Event numer 10", className: "museumevent"},
                        '11': {content: "Event numer 11", className: "museumevent"},
                        '12': {content: "Event numer 12", className: "museumevent"},
                        '13': {content: "Event numer 13", className: "museumevent"},
                        '25': {content: "Event numer 14", className: "museumevent"},
                        '26': {content: "Event numer 15", className: "museumevent"},
                        '27': {content: "Event numer 16", className: "museumevent"},
                        '28': {content: "Event numer 17", className: "museumevent"} }

                }
    }; 

    $('#datepicker').datepicker({beforeShowDay: function(date) {
        var d = date.getDate(),
            m = date.getMonth()+1,
            y = date.getFullYear();

        if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
            var s = specialDays[y][m][d];
            return [true, s.className, s.content]; // selectable

        }
        return [false,'']; // non-selectable


    }});
});

Here is the the jsFiddle with this calendar.

The main goal is to create custom Tooltips for the selected dates (Featured Events) and make these dates clickable.

Thanks in advance!

Answer 1

If you're already using the jQuery UI then I would advise using their modals for your "popup". I have also added some functionality for individualised popups (requested in comment) with a fallback "defauilt".jsFIddle

<div id="datepicker"></div>
<div id="popup" class="popup">
    <p>Default popup</p>
</div>
<div id="popup1"class="popup">
    <p>Popup for event1</p>
</div>
<div id="popup2"class="popup">
    <p>Popup for event1</p>
</div>

...

var specialDays = {
    '2011': {
        '10': {
            '1': {
                content: "Event numer 1",
                className: "museumevent",
                popupID: "popup1"
            }

...

onSelect: function(dateText, inst){
        var d = parseInt(dateText.split("/")[1], 10),
            m = parseInt(dateText.split("/")[0], 10),
            y = parseInt(dateText.split("/")[2], 10);

    if ( specialDays[y][m][d].hasOwnProperty("popupID") ) {
        var s = specialDays[y][m][d];
        $('#' + s.popupID).dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    }else{
    $('#popup').find('.date').text(dateText).end()
        .dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    }
}

EDITED FOR ADDITIONAL REQUESTED FUNCTIONALITY

Answer 2

 $('#datepicker').datepicker({
    beforeShowDay: function(date) {},
    onSelect: function(dateText, inst){}
  });

You can find the events you need in the Documentation:

http://docs.jquery.com/UI/Datepicker#event-onSelect

also, here is the function for your tooltips:

http://docs.jquery.com/UI/Datepicker#event-beforeShowDay