jQuery UI Datepicker -> 显示基于月份的事件列表

Question

我正在使用 jQuery UI 日期选择器小部件并设置了一些事件。我想要的是根据用户选择的月份在其下方显示每月事件列表。例如：

然后，如果他们更改为四月，列表将更新为四月的事件。这个小部件可以做到这一点吗？我一直在尝试和研究一段时间。

现在我设置了一些经常性的假期：

var events = {};
for(var i=2017; i < 2027; i++){
events[new Date("01/01/"+i)] = new Event("New Years Day(Closed)", "blue");
events[new Date("02/14/"+i)] = new Event("Valentines Day", "pink");
events[new Date("03/17/"+i)] = new Event("St. Patty's Day", "green");
events[new Date("07/04/"+i)] = new Event("Independence Day(Closed)", "red");
events[new Date("10/31/"+i)] = new Event("Halloween", "orange");
events[new Date("12/25/"+i)] = new Event("Christmas Day(Closed)", "red");

我已经捕获了所有事件：

var eventList = $(".ui-datepicker").find(".ui-datepicker-month").val();
console.log(eventList);

这给了我：

Fri Dec 25 2020 00:00:00 GMT-0800 (Pacific Standard Time)
:
Event
Fri Dec 25 2026 00:00:00 GMT-0800 (Pacific Standard Time)
:
Event
Fri Feb 14 2020 00:00:00 GMT-0800 (Pacific Standard Time)
:
Event
Fri Feb 14 2025 00:00:00 GMT-0800 (Pacific Standard Time)
:
Event
Fri Jan 01 2021 00:00:00 GMT-0800 (Pacific Standard Time)
:
Event
Fri Jul 04 2025 00:00:00 GMT-0700 (Pacific Daylight Time)
:
Event

Answer 1

请使用以下代码。

HTML

<div class="mt1 border-left flex mr2" style="margin-left: 12px; ">
  <span> Date:</span>
  <input type="text" id="Date" name="date" placeholder="">
</div>

JS

$(function() {
    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    function ShowEvents(month) {
        setTimeout(function() {
            $(".ui-datepicker").height(550);
            var Html = "<div style='color:red;'> Events in " + monthNames[month - 1] + " </div>";
            Html += "<br> First Event ";
            Html += "<br> Second Event ";
            Html += "<br> Third Event ";
            $(".ui-datepicker").append(Html);
        }, 5);
    }

    $("#Date").datepicker({
        dateFormat: 'yy-mm-dd',
        inline: true,
        onChangeMonthYear: function(year, month, widget) {
            ShowEvents(month);
        }
    });
    $("#Date").focusin(function() {
        if ($(".ui-datepicker").is(':visible') == false) {
            var d = new Date();
            ShowEvents(d.getMonth() + 1);
        }
    });
});

参考Fiddle