如何为jQuery UI日历中的高亮日期添加锚点标签

嘿，我来帮你搞定点击高亮日期跳转至事件详情页的需求！核心思路是把事件数据和日期关联起来，然后给动态生成的日期元素绑定点击事件触发跳转。下面是具体的修改步骤和代码：

步骤1：重构事件数据存储 #

原来你把日期、标题、描述分开存成三个数组，这样不方便关联对应关系。我们改成一个包含完整事件信息的对象数组，后续就能轻松拿到对应日期的事件详情：

$(function () {
    var currentdate = new Date();
    $.ajax({
        type: "GET",
        url: "@Url.Action(\"GetEvents\", \"Home\")",
        dataType: "json",
        success: function (data) {
            // 重构为事件对象数组，每个元素包含完整信息
            var events = [];
            $.each(data, function (i, val) {
                events.push({
                    date: CTD(val.Date), // 格式化后的日期字符串
                    title: val.title,
                    description: val.Description,
                    eventId: val.Id // 假设你的事件模型有Id字段，用来唯一标识事件
                });
            });
            HighlighEvents(events); // 把完整事件数组传入高亮函数
        },
        failure: function (response) {
            alert(response.d);
        },
        error: function (response) {
            alert(response.d);
        }
    });

    // 转换为日期对象并格式化（和原逻辑一致）
    function CTD(d) {
        var date = new Date(parseInt(d.substr(6)));
        return FD(date);
    }

    // 格式化日期为dd/mm/yyyy格式
    function FD(d) {
        var dd = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
        return dd;
    }

步骤2：修改日期高亮逻辑，添加事件标识 #

在HighlighEvents函数里，我们不仅标记日期样式，还要给对应日期元素添加自定义数据属性，存储事件的关键标识（比如ID），方便后续跳转时获取：

function HighlighEvents(events) {
        $('#datepicker').datepicker({
            selectOtherMonths: true,
            beforeShowDay: function (date) {
                var formattedDate = FD(date);
                // 找到当前日期匹配的事件
                var matchedEvent = events.find(function(event) {
                    return event.date === formattedDate;
                });

                if (matchedEvent) {
                    if (currentdate > date) {
                        // 过去的事件：返回样式+自定义数据属性
                        return [true, "past", "", { 'data-event-id': matchedEvent.eventId }];
                    } else {
                        // 未来的事件：同样添加数据属性
                        return [true, "event", "", { 'data-event-id': matchedEvent.eventId }];
                    }
                } else {
                    return [true, '', ''];
                }
            }
        });

        // 步骤3：给高亮日期绑定点击跳转事件
        // 用事件委托，因为日期元素是动态生成的，直接绑定会失效
        $('#datepicker').on('click', '.event a, .past a', function(e) {
            e.preventDefault(); // 可选：阻止默认的日期选中行为
            var eventId = $(this).data('event-id');
            // 生成详情页URL，用Url.Action确保路由正确
            var detailUrl = '@Url.Action("EventDetail", "Home")?eventId=' + eventId;
            // 跳转到详情页
            window.location.href = detailUrl;
        });
    }
});

关键说明 #

• 自定义数据属性：通过beforeShowDay的第四个返回值（对象），给日期元素添加data-event-id，点击时就能快速拿到对应事件的唯一标识。
• 事件委托：由于jQuery UI Datepicker的日期元素是动态渲染的，必须用on()方法委托给父元素#datepicker，才能绑定到后续生成的元素上。
• 跳转路由：用@Url.Action生成详情页的正确路由，后端的EventDetail方法就可以根据eventId查询并展示完整的事件内容了。

如果你的事件没有ID，也可以传递日期作为参数（但ID是最可靠的方式），只需要把data-event-id换成data-event-date，然后调整URL参数即可。

保持原有CSS和HTML不变 #

你的CSS样式已经能正确高亮日期，不需要修改：

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

HTML部分也无需改动：

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

内容的提问来源于stack exchange，提问作者Arslan