how to apply anchor tag on highlight dates in calendar using jquery ui

问题

My project work correctly highlight dates in calendar but I want when click on any highlight date show next page where complete event detail so, please anyone tell me ho to apply anchor tag on calendar date

This is js code

<script>
    $(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 = '<a href=' + aa + '>' + date + '</a>';
                            return [true, "past", ""];
                        }

                        else {
                            return [true, "event", ""];
                        }

                    } else {
                        return [true, '', ''];
                    }
                }
            });
        }
    });
</script>

This is my css code

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

Html code

<div id="datepicker"></div>

回答1:

The dates on the calendar are already hyperlinks a, but they are disabled to provide the DatePicker functionality. To get the click event of each date, use the onSelect event of the DatePicker. You can use it in the same way you used the beforeShowDay event. If you want it to go to another page, use the location.href:

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

Here is a demo. I replaced your Ajax with code that provide two fake dates. This is only for the demo. I also used alert() to display a message, instead of going to another page, but you get the idea:

$(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 = '<a href=' + aa + '>' + date + '</a>';
            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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="datepicker"></div>

来源：https://stackoverflow.com/questions/48538733/how-to-apply-anchor-tag-on-highlight-dates-in-calendar-using-jquery-ui