Как сделать гиперссылку на выбранные даты в jQuery Datepicker UI? - PullRequest
Новая
       3

Как сделать гиперссылку на выбранные даты в jQuery Datepicker UI?

1 голос
/ 27 октября 2011

Кто-нибудь может помочь с этой задачей?Я не гуру javascript и немного застрял.Я использую jQuery Datepicker UI для создания календаря событий.

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

$(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 с этим календарем.

Основная цель - создать пользовательские всплывающие подсказки для выбранных дат (Избранные события) и сделать эти даты интерактивными .

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 27 октября 2011

Если вы уже используете пользовательский интерфейс jQuery, я бы посоветовал использовать их модалы для вашего "всплывающего окна". Я также добавил некоторые функциональные возможности для индивидуальных всплывающих окон (запрошено в комментарии) с резервным «defauilt». 

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

ИЗМЕНЕНО ДЛЯ ДОПОЛНИТЕЛЬНОЙ ЗАПРОШЕННОЙ ФУНКЦИОНАЛЬНОСТИ

0 голосов
/ 27 октября 2011 
 $('#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

...