Anzeige der Daten basierend auf dem gewählten Start- und Enddatum im Vollkalender

Question

Ich benutze den vollen Kalender. Und ich habe einige Inhalte in einem Kalender angezeigt.

1) Standardmäßig werden Daten in allen Datumsfeldern angezeigt.

2) Ich habe Startdatum und Enddatum Kalender oben. Ich möchte Daten basierend auf dem ausgewählten Start- und Enddatum anzeigen. Zum Beispiel, wenn ich Startdatum 01/08/2016 und Enddatum 14/08/2016 wähle.

Ich möchte Daten nur auf der Grundlage der Start- und Enddaten anzeigen.

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

So in meinem Beispiel verwende ich Anfang und am Ende als eine statische Variable müssen Sie die Eingabe von Start- und Ende greifen sie dynamisch zu verwenden. Ordnen Sie Ihr Start- und Enddatum zu und weisen Sie dann date als aktuelle Objekte date als Attributwert zu. Dann erstellen wir einen Moment mit diesem Datum day und verwenden eine if-Anweisung, um sicherzustellen, dass day größer ist als start und weniger als end und wenn es passiert, dann haben Sie Ihren Handling-Code. Hier ist eine funktionierende 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>"); 
    } 
});