如何使用jquery ui在日历中的高亮日期应用锚标记 [英] 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

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

推荐答案

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

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";
}

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

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>

这篇关于如何使用jquery ui在日历中的高亮日期应用锚标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！