Показать данные на основе выбранной даты начала и окончания в fullcalendar

Question

Я использую полный календарь. И я отобразил некоторое содержимое в календаре.

1) По умолчанию он отображает данные во всем поле даты.

2) У меня есть дата начала и дата окончания календаря сверху. Я хочу отображать данные на основе выбранной даты начала и окончания. Например, если я выбираю startdate 01/08/2016 и enddate 14/08/2016.

Я хочу отображать данные только на начальную и конечную даты.

jsfiddle

$('#calendar').fullCalendar({ 
 
\t header: { 
 
\t \t left: 'prev,next today', 
 
\t \t center: 'title', 
 
\t \t right: 'month,agendaWeek,agendaDay' 
 
\t }, 
 
\t defaultDate: '2014-06-12', 
 
\t editable: true, 
 
}); 
 
$("td.fc-day.fc-widget-content").each(function(index) { 
 
    var random = Math.floor(Math.random()*100); 
 
    $(this).append("<span style='font-size: 30px;font-weight: 600;color: green;'>"+random+"%</span>"); 
 
});

body { 
 
\t margin-top: 40px; 
 
\t text-align: center; 
 
\t font-size: 13px; 
 
\t font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 
 
} 
 

 
#calendar { 
 
\t width: 900px; 
 
\t margin: 0 auto; 
 
}

Start Date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""> 
 
End date :<input type="text" id="endDate" name="end_datum" class="input_text" value=""></br></br></br></br> 
 

 
<div id='calendar'></div>

Answer 1

Так в моем примере я использую начало и конец как статической переменной вам нужно будет захватить вход от начала и конца, чтобы использовать его динамически. Поэтому назначьте даты начала и окончания, затем мы назначим date как текущие объекты значения атрибута date. Затем мы создадим момент с этой датой, называемый day, и используем оператор if, чтобы убедиться, что day больше start и менее end, и если он пройдет, то у вас есть код обработки. Вот работа JSFiddle.

$("td.fc-day.fc-widget-content").each(function(index) { 
    var start = moment('2014-06-04'); //start date from start date input 
    var end = moment('2014-06-18'); //end date from end date input 
    var random = Math.floor(Math.random()*100); 
    var date = $(this).data('date'); //get current date in loop 
    var day = moment(date); //create a moment 

    //if day is greater than start date and less than end date, display. 
    if(day > start && day < end) { 
     $(this).append("<span style='font-size: 30px;font-weight: 600;color: green;'>"+random+"%</span>"); 
    } 
});