How to hyperlink the selected dates in jQuery Datepicker UI?

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!

newest questions tagged jquery – Stack Overflow

About Admin