jQuery Ui日历，添加链接到选定的日期可能？ [英] jQuery Ui Calendar, add links to chosen dates possible?

问题描述

Hello Im使用jQuery UI日历来显示我的事件，设计非常漂亮，并且工作完美。

Hello Im using the jQuery UI calendar to display my events, the design is slick and it works perfectly.

但是我想添加到我的事件的链接（我的日历上突出显示的日子），我找不到任何帮助我编写代码。

However I'd like to add links to my events (highlighted days on my calendar) and I can't find anything to help me code this.

这里是我的代码选择我想要的日子，并添加一个工具提示事件名称：

Here is my code to select the days I want and add a tooltip of the event name:

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

第一个参数突出显示日期，第二个是自定义css，第三​​个是工具提示。

1st parameter is highlight the date, 2nd is custom css and 3rd is tooltip.

那么是否可以在那些天添加链接？非常像我用工具提示。

So is it possible to add a link on those days? pretty much like I did with tooltips.

谢谢。

推荐答案

Ok这是奶酪，但我发现没有更好的解决方案。

Ok this is cheesy, but I found no better solutions out there. I pass the value using the class parameter.

它显示jQuery日期选择器日历上的事件，它显示每个事件的自定义工具提示，当点击时，它会带你到

It show events on a jQuery Date Picker calendar, it show a custom tooltip for each event and when clicked, it brings you to a detailed page for that event.

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

}

这篇关于jQuery Ui日历，添加链接到选定的日期可能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！