在完整日历中显示基于所选开始和结束日期的数据

Display data based on selected start and end date in fullcalendar

本文关键字：开始 结束 日期 数据 于所选 日历 显示      更新时间：2023-09-26

我使用的是完整日历。我在日历中显示了一些内容。

1） 默认情况下，它会在所有日期字段中显示数据。

2） 我上面有开始日期和结束日期日历。我希望显示基于所选开始和结束日期的数据。例如，如果我选择开始日期01/08/2016和结束日期14/08/2016。

我只想显示基于开始日期和结束日期的数据。

jsfiddle

$('#calendar').fullCalendar({
	header: {
		left: 'prev,next today',
		center: 'title',
		right: 'month,agendaWeek,agendaDay'
	},
	defaultDate: '2014-06-12',
	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 {
	margin-top: 40px;
	text-align: center;
	font-size: 13px;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
	width: 900px;
	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>

因此，在我的示例中，我使用start和end作为静态变量，您需要从start和end获取输入以动态使用它。因此，分配您的开始和结束日期，然后我们将分配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>");
    }
});
相关文章：