jQuery Datepicker UIで選択した日付をハイパーリンクする方法は?

誰でもこの仕事を手伝うことができますか?私は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 があります。

主な目標は、選択した日付(おすすめイベント)のカスタムツールチップを作成し、これらの日付をクリック可能にすることです。

前もって感謝します!

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は、クリックされた日です。その情報で何かをするには、onSelect内から他のjavascript関数を呼び出す必要があります。
追加された 著者 Chris Biscardi,
こんにちは。返信いただきありがとうございます。私はこのドキュメンテーションを読んだが、私のjavascriptに関する知識は限られている。私は必要なものを実装するためのいくつかの例が必要です。私は、私のような多くの人がこのようなことをすべて学んだことが役に立ちそうです。
追加された 著者 axidos,
私はちょうど選択された日付をクリックし、この日に起こることになる予定の情報(同じページ上または別個)にハイパーリンクされたいと思う。私はこれをする方法を知らない。
追加された 著者 axidos,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript