Як гіперпосилання вибраних дат у інтерфейсі jQuery Datepicker?

Чи може хто-небудь допомогти з цим завданням? Я не гусак JavaScript і трохи застряг. Я використовую користувальницький інтерфейс jQuery Datepicker , щоб створити календар подій.

Я хочу гіперпосилання вибраних дат (з назвами подій) на відповідну подію (окрема сторінка або якоря). Ось скрипт, який я використовую, щоб вказати мої події:

$(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


    }});
});

Тут знаходиться jsFiddle з цим календарем.

Головна мета - створити спеціальні підказки для вибраних дат (найпопулярніші події) і зробити ці дати натискати .

Спасибі заздалегідь!

1

2 Відповіді

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">
    
Default popup

</div> <div id="popup1"class="popup">
Popup for event1

</div> <div id="popup2"class="popup">
Popup for event1

</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" );
                }
            }
        });
    }
}

ПОВЕРНЕНА ДЛЯ ДОДАТКОВОЇ ЗАПРОШЕНОЇ ФУНКЦІОНАЛЬНОСТІ

1
додано
ви подивитеся на додавання користувацьких спливаючих вікон?
додано Автор Sinetheta, джерело
Дякую за це! Працює чудово! Чи існує можливість вказувати конкретний спливаюче вікно для кожної дати події, тому, коли я натискаю різні дати, я можу читати різні повідомлення (спливаючі вікна)? Знову дякую.
додано Автор axidos, джерело
Я просто перевірив його. Це просто чудово! Саме те, що я шукав. Дуже дякую!
додано Автор axidos, джерело
 $('#datepicker').datepicker({
    beforeShowDay: function(date) {},
    onSelect: function(dateText, inst){}
  });

Ви можете знайти потрібні Вам події в Документації:

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

Крім того, тут є функція підказки:

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

0
додано
що у вас виникли проблеми з прикладом, який я дав вам?
додано Автор Chris Biscardi, джерело
Я не знаю, що ви хочете зробити всередині своїх функцій. Всередині функції onSelect функція dateText - це день, на який було натиснуто. Вам доведеться викликати інші функції JavaScript, які виконуються з inSelect, щоб зробити щось із цією інформацією.
додано Автор Chris Biscardi, джерело
Привіт. Дякую за відповідь. Я прочитав цю документацію, але знання яваскрипту обмежені. Мені потрібні деякі приклади того, як реалізувати те, що мені потрібно. Я думаю, що це буде корисним для багатьох людей, як я тільки почав вивчати всі ці речі.
додано Автор axidos, джерело
Я просто хочу натиснути на обрану дату та бути гіперпосиланням на інформацію (на тій самій сторінці або окремо) для події, яка відбудеться на цю дату. Я не знаю, як це зробити.
додано Автор axidos, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram