Question

任何人都可以帮忙完成这项任务吗？我不是一个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。

主要目标是为所选日期（精选活动）创建自定义工具提示，并使这些日期可点击。

提前致谢！

Answer 1

如果您已经在使用jQuery UI，那么我建议您使用他们的模式作为“弹出窗口”。我还为个性化弹出窗口添加了一些功能（在评论中请求），并带有后备“defauilt”。jsFIddle

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

已获得其他要求的功能

Answer 2

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

如何在jQuery Datepicker UI中超链接所选日期？

2 个答案: