jQuery Ui Calendar, добавить ссылки на выбранные даты возможно? - PullRequest
Новая
       5

jQuery Ui Calendar, добавить ссылки на выбранные даты возможно?

1 голос
/ 07 января 2011

Здравствуйте, я использую календарь jQuery UI для отображения моих событий, дизайн гладкий и работает отлично.

Однако я хотел бы добавить ссылки на свои события (выделенные дни в моем календаре), и я не могу найти ничего, что могло бы помочь мне написать это.

Вот мой код для выбора нужных дней и добавления всплывающей подсказки с именем события: 

$("#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];
}

Единственный синтаксис, который я нашел: 

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

1-й параметр выделяет дату, 2-й - пользовательский CSS, а 3-й - всплывающая подсказка.

Так можно ли добавить ссылку в те дни? почти так же, как я делал с подсказками.

Спасибо.

Ответы [ 2 ]

1 голос
/ 01 февраля 2011

Хорошо, это глупо, но я не нашел лучшего решения там. Я передаю значение с помощью параметра класса.

Он отображает события в календаре jQuery Date Picker, показывает настраиваемую всплывающую подсказку для каждого события, а при щелчке приводит к подробной странице для этого события. 

$("#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);

}
0 голосов
/ 07 января 2011

On Select * Может использоваться свойство .Когда кто-то нажимает на дату, вы можете увидеть, имеет ли эта дата информацию, связанную с ней.

Также вы можете попробовать использовать jQuery wrap , чтобы обернуть отдельные элементы даты html вашей ссылкой

...