2011-01-07 5 views
1

こんにちは、私のイベントを表示するためにjQueryのUIカレンダーを使用して、デザインは滑らかで、それは完全に動作します。jQuery Ui Calendar、選択した日付にリンクを追加できますか?

しかし、私のイベント(私のカレンダーのハイライトされた日)へのリンクを追加したいと思います。これをコード化するのに役立つものは何も見つかりません。ここで

は、私がしたい日を選択して、イベント名のツールチップを追加するための私のコードです:

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

第一パラメータは日付をハイライトであります2番目はカスタムCSS、3番目はツールチップです。

当時はリンクを追加できますか?私はツールチップでやったのとほとんど同じです。

ありがとうございました。

答えて

1

との個別のhtml日付要素をラップするjQuery wrapを使用して試すことができます[OK]を、これは安っぽいですが、私はそこには良い解決策を見つけました。クラスパラメータを使用して値を渡します。

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

On Selectプロパティを使用できます。誰かが日付をクリックすると、その日付に関連する情報があるかどうかを確認できます。

また、あなたがあなたのリンク

+0

いくつかの例をリンクできますか?私は誰かがこれに入る前にスターターとして働くのを見たいと思う。 –

+0

私は公式の文書にリンクしました。他にどのような例がありますか? – iBiryukov

関連する問題