JQuery UI Datepicker: как добавить интерактивные события в определенные даты?

Я хочу выделить даты на jquery datepicker, где есть события, привязанные к нему (я не говорю о событии js, но о реальных событиях: D).

Как передать даты события в календарь?
Как сделать его интерактивным, чтобы отображать события с их URL-адресом в небольшом всплывающем подсказке, чтобы перейти на страницу событий?

Есть ли уже доступные плагины или ресурсы (например, учебные пособия), чтобы помочь мне достичь этого?

Спасибо.

PS: Я не использую datepicker для выбора даты, только для доступа к событиям, прикрепленным к дате

PS2: я буду использовать его на многоязычном веб-сайте (fr и на английском), поэтому я подумал о datepicker

Ответ 1

Это определенно возможно, и, на мой взгляд, не слишком много злоупотреблений виджетами datepicker. Существует возможность инициализировать виджет в строке, который может быть использован именно для описанного выше сценария.

Есть несколько шагов, которые вы должны предпринять:

Инициализируйте datepicker в строке. Прикрепите виджет datepicker к <div>, чтобы он всегда отображался, и вам не нужно прикреплять его к input:
```
$("div").datepicker({...});
```
Нажмите на 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;
},
```
Это может выглядеть немного сложнее, но все, что он делает, - это подсвечивать даты в datepicker, которые имеют записи в массиве events, определенном выше.
Определите 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

в дополнение к решению 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")
    }]);