Display events of a certain day with jquery.datapicker

Question

Display events of a certain day with jquery.datapicker

Navigation

#1 by (0 votes)

0

This event calendar with datepicker displays all the events of the current month, so how do you view events for the day when you click on a particular day? For example, click April 25, you receive all events for that day.

Follow part of JS where print is done.

 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;

jquery datepicker

asked by anonymous 25.04.2017 / 16:12

1 answer

How to RECORD android data in MySQL using webservices (AsyncTask)? Add devices to Quartus II 13.0sp1 using .qdz file

score 0 · Answer 1

If you inspect the calendar element, you can access the HTML structure generated by the plugin. It is easy to note that the divs that have related events have the class .c-event , along with a data-event-day attribute that has the day of the event. So, 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);
});

In this way, if the 25th has an event and clicks on it, an alert with the 25th content is displayed. Also by the browser inspector, we can see that the events that appear on the screen have class .c-event-item and also have the same data-event-day attribute. In this way, we can determine, depending on the value of this attribute, which elements should be displayed or hidden on the page when we click on 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();
});

So, when we click on day 25, only the events of this day will be displayed. If we click on another day, only the events from it will be displayed.

An example can be seen running here .

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