如何使用jquery ui在日历中的高亮日期应用锚标记

我的项目工作正确地突出显示日历中的日期，但我想点击任何高亮显示日期显示下一页完整的事件详细信息所以，请任何人告诉我ho在日历日期应用锚标记

这是js代码

 $(function () { var currentdate = new Date(); $.ajax({ type: "GET", url: "@Url.Action("GetEvents", "Home")", dataType: "json", data: "", success: function (data) { var eventDates = []; //An array of upcoming event dates var Title=[]; var Description=[]; $.each(data, function (i, val) { eventDates[i] = CTD(val.Date); //CTD means convert into date Title[i]=val.title; Description[i]=val.Description; }); HighlighEvents(eventDates); }, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); // convert in date function CTD(d) { var date = new Date(parseInt(d.substr(6))); return FD(date); } // format date function FD(d) { var dd = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear(); return dd; } // datepicker function HighlighEvents(eventDates) { $('#datepicker').datepicker({ selectOtherMonths: true, beforeShowDay: function (date) { var highlight = eventDates.indexOf(FD(date)); if (highlight > -1) { if (currentdate > date) { //date = '' + date + ''; return [true, "past", ""]; } else { return [true, "event", ""]; } } else { return [true, '', '']; } } }); } });  

这是我的css代码

   .event a { background-color: green !important; color: White !important; } .past a { background-color: red !important; color: White !important; } 

Html代码

Answer 1

日历上的日期已经是超链接a ，但它们被禁用以提供DatePickerfunction。 要获取每个日期的click事件，请使用DatePicker的onSelect事件 。 您可以像使用beforeShowDay事件一样使用它。 如果您希望它转到另一个页面，请使用location.href ：

 onSelect: function(date) { var highlight = eventDates.indexOf(FD(new Date(date))); if (highlight > -1) location.href = "my_date_details_page.htm"; } 

这是一个演示。 我用提供两个假日期的代码替换了你的Ajax。 这仅适用于演示。 我还使用alert()来显示消息，而不是转到另一个页面，但是你明白了：

 $(function() { var currentdate = new Date(); var eventDates = []; var d = currentdate; d.setDate(d.getDate() - 5); eventDates.push(FD(d)); d.setDate(d.getDate() - 3); eventDates.push(FD(d)); HighlighEvents(eventDates); // format date function FD(d) { var dd = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear(); return dd; } // datepicker function HighlighEvents(eventDates) { $('#datepicker').datepicker({ selectOtherMonths: true, beforeShowDay: function(date) { var highlight = eventDates.indexOf(FD(date)); if (highlight > -1) { if (currentdate > date) { //date = '' + date + ''; return [true, "past", ""]; } else { return [true, "event", ""]; } } else { return [true, '', '']; } }, onSelect: function(date) { var highlight = eventDates.indexOf(FD(new Date(date))); if (highlight > -1) alert(date); else alert("Not a highlighted date!"); } }); } }); 

 .event a { background-color: green !important; color: White !important; } .past a { background-color: red !important; color: White !important; }