Question

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

这是js代码

<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>

这是我的css代码

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

Html代码

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

Answer 1

日历上的日期已经是超链接a，但它们已被停用以提供DatePicker功能。要获取每个日期的click事件，请使用onSelect event of the DatePicker。您可以像使用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()来显示消息，而不是转到另一个页面，但您明白了这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: