jQuery Ui Kalender, Links zu ausgewählten Daten möglich?

Question

Hallo Ich benutze den jQuery UI-Kalender, um meine Ereignisse anzuzeigen, das Design ist glatt und es funktioniert perfekt.

Allerdings möchte ich Links zu meinen Veranstaltungen hinzufügen (markierte Tage in meinem Kalender) und ich kann nichts finden, das mir hilft, dies zu programmieren.

Hier ist mein Code die Tage, die ich will, und fügen Sie ein Tooltip des Ereignisnamen wählen:

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

Die einzige Syntax I ist gefunden:

return [true, '', dates[i][1]]; 

1. Parameter ist das Datum markieren , 2. ist benutzerdefinierte css und 3. ist Tooltip.

So ist es möglich, an diesen Tagen einen Link hinzuzufügen? so ziemlich wie ich es mit Tooltips gemacht habe.

Danke.

Answer 1

Ok das ist kitschig, aber ich fand keine besseren Lösungen gibt. Ich übergebe den Wert mit dem Klassenparameter.

Es zeigt Ereignisse in einem jQuery Date Picker-Kalender, es zeigt einen benutzerdefinierten Tooltip für jedes Ereignis und wenn Sie darauf klicken, gelangen Sie auf eine detaillierte Seite für dieses Ereignis.

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

} 

Answer 2

On Select Eigenschaft kann verwendet werden. Wenn jemand auf ein Datum klickt, können Sie sehen, ob diesem Datum Informationen zugeordnet sind.

Sie können aber auch versuchen jQuery wrap mit einzelnen HTML-Datum Elemente wickeln mit Ihrem Link