選択した開始日と終了日をフルカレンダーで表示

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文を使用してが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>"); 
    } 
});