jQuery UI Datepicker - >月に基づくイベントのリストを表示

Question

jQuery UI datepickerウィジェットを使用していて、いくつかのイベントを設定しています。私が望むのは、ユーザーが選択した月に基づいて、その下に月次イベントのリストを表示することです。例は次のようになります。

<ここではイベントの--list - >

、彼らは4月に変更した場合、その後、リストは4月のイベントに更新します。このウィジェットでこれは可能ですか？私はしばらくの間、試して研究してきました。

今私が設定し、いくつかの定期的な休日があります。

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