web-dev-qa-db-ja.com

jQuery UI Datepicker：特定の日付にクリック可能なイベントを追加する方法は？

イベントが関連付けられているjquery datepickerの日付を強調表示する（jsイベントについてではなく、実際のイベントについて説明しています：D）。

  1. イベントの日付をカレンダーに渡す方法は？
  2. クリック可能なようにするには、イベントをURLとともに小さなポップアップヒントに表示するか、イベントページに移動しますか？

それを達成するのに役立つプラグインまたはリソース（チュートリアルなど）が既に利用可能ですか？

ありがとう。

PS：日付ピッカーを使用して日付を選択するのではなく、日付に関連付けられたイベントにアクセスするだけです

PS2：多言語Webサイト（frと英語）で使用します。だから私はdatepickerを考えました

jqueryjquery-uijquery-pluginsdatepickerjquery-ui-datepicker
37
sf_tristanb

これは間違いなく可能であり、私の意見では、datepickerウィジェットの乱用はそれほど多くありません。ウィジェットをインラインで初期化するオプションがあります。これは、上記で説明したとおりのシナリオに使用できます。

実行する必要がある手順がいくつかあります。

  1. 日付ピッカーをインラインで初期化します。 datepickerウィジェットを<div>にアタッチすると、常に表示され、inputにアタッチする必要がなくなります。

    $("div").datepicker({...});

  2. beforeShowDay イベントをタップして、特定のイベントの日付を強調表示します。また、クライアントに入力して送信できる配列でイベントを定義します。

    イベント配列：

    var events = [ 
    { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") }
];

    イベントハンドラー：

    beforeShowDay: function(date) {
    var result = [true, '', null];
    var matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
    });

    if (matching.length) {
        result = [true, 'highlight', null];
    }
    return result;
},

    これは少し複雑に見えるかもしれませんが、それは、上記で定義されたevents配列のエントリを持つdatepickerの日付を強調表示するだけです。

  3. onSelect イベントハンドラを定義します。このイベントハンドラでは、日付がクリックされたときにdatepickerに何をするかを指示できます。

    onSelect: function(dateText) {
    var date,
        selectedDate = new Date(dateText),
        i = 0,
        event = null;

    /* Determine if the user clicked an event: */
    while (i < events.length && !event) {
        date = events[i].Date;

        if (selectedDate.valueOf() === date.valueOf()) {
            event = events[i];
        }
        i++;
    }
    if (event) {
        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
        alert(event.Title);
    }
}

    繰り返しますが、多くのコードのように見えますが、発生しているのは、クリックされた日付に関連付けられたイベントを見つけていることだけです。そのイベントが見つかったら、必要なアクションを実行できます（たとえば、ツールチップを表示します）

完全な作業例は次のとおりです。 http://jsfiddle.net/Zrz9t/1151/ 。イベントを表示するには、必ず2月/ 3月に移動してください。

65
Andrew Whitaker

Andrew Whitakerソリューションに加えて、別の方法があります（実際にはハックですが、タイトルまたは日付が常に適切な識別子ではないため、実際には他の誰かに最適かもしれません）

注：Andrew Whitaker解決策を最初に読んで、変更点を確認してください

// date picker
$("div").datepicker({
    // hook handler
    beforeShowDay: function(tdate) {
        var mydata = $(this).data("mydata");
        var enabled = false;
        var classes = "";
        var title = date;
        $.each(mydata, function() {
            if (this.date.valueOf() === tdate.valueOf()){
                enabled = true;
                classes = "highlight";
                title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;)
            }
        });        
        return [enabled,classes,title];
    },
    // event handler
    onSelect: function() {
        var id = $(this).find(".ui-datepicker-current-day").attr("data-id");
        mydata = $(this).data("mydata"),
        selectedData = null;        
        /* search for data id */
        $.each(mydata,function(){
            if (this.id == id){
                selectedData = this;
            }
        });
        if (selectedData) {
            /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
            alert(selectedData);
        }
    }
}).data("mydata",
    // your data
    [{
        id:1,
        title: "Five K for charity", 
        date: new Date("02/13/2011")
    }, 
    {
        id:2,
        title: "Dinner", 
        date: new Date("02/25/2011")
    }, 
    {
        id:3,
        title: "Meeting with manager", 
        date: new Date("03/01/2011")
    }]);
4
Fareed Alnamrouti