View events for a given day with jquery.datapicker

Question

This calendar of events with datepicker displays all events of the current month, so how to display events for the day when clicking on a given day? For example, click on April 25th, you receive all events for that day.

Follows part of the JS where it does the print.

 function print() {
     loadEvents();

     var dWeekDayOfMonthStart = new Date(dYear, dMonth, 1).getDay() - settings.firstDayOfWeek;

     if (dWeekDayOfMonthStart < 0) {
         dWeekDayOfMonthStart = 6 - ((dWeekDayOfMonthStart + 1) * -1);
     }

     var dLastDayOfMonth = new Date(dYear, dMonth + 1, 0).getDate();
     var dLastDayOfPreviousMonth = new Date(dYear, dMonth + 1, 0).getDate() - dWeekDayOfMonthStart + 1;

Answer 1

If you inspect the calendar element, you can access the HTML structure generated by the plugin. It is easy to notice that the divs that have related events have the class .c-event, along with an attribute data-event-day that has the day of the event. Therefore, to interact with the days that have events, just do:

$(".c-event").on("click", function (e) {
    var day = $(this).attr("data-event-day");

    alert(day);
});

This way, if the day 25 has event and we click on it, an alert with the content 25 is displayed. Also by the browser inspector, we can see that the events that appear on the screen have the class .c-event-item and also have the same attribute data-event-day. In this way, we can determine, according to the value of this attribute, which elements should be displayed or hidden on the page when clicking in a day. This is done as follows:

$(".c-event").on("click", function (e) {
    var day = $(this).attr("data-event-day");

    $(".c-event-item[data-event-day!=" + day + "]").hide();
    $(".c-event-item[data-event-day=" + day + "]").show();
});

Thus, by clicking on the 25th, only the events of this day will be displayed. If we click on another day, only the events of this day will be displayed.

An example can be seen working here.

All: the code works perfectly for events that are already loaded on the page, but not for events that are outside the initial range. This happens because the event click is assigned only when the page is loaded, but not when the range of days is changed, generating new elements.