根據選定的開始日期和結束日期顯示完整日曆數據

Question

我正在使用完整日曆。我在日曆中顯示了一些內容。

1）默認情況下，它顯示所有日期字段中的數據。

2）我有頂部的開始日期和結束日期日曆。我想根據選定的開始和結束日期顯示數據。例如，如果我選擇開始日期01/08/2016和結束日期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>"); 
    } 
});