CODEWITHSUNDEEP
javascriptjqueryfullcalendar
sathish kumar
sathish kumar

Reputation: 936

Display data based on selected start and end date in fullcalendar

I am using full calendar. And I displayed some contents in a calendar.

1) By default it has showing data in all date field.

2) I have start date and end date calendar on top. I want to display data based on the selected start and end date. For example, if I select startdate 01/08/2016 and enddate 14/08/2016.

I want to display data based on the start and end dates only.

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>

Upvotes: 0

Views: 2164

Answers (1)

Ryan89
Ryan89

Reputation: 1216

So in my example I use start and end as a static variable you will need to grab the input from start and end to use it dynamically. So assign your start and end dates, then we will assign date as the current objects date attribute value. Then we will create a moment with that date called day and use an if statement to make sure that day is greater than start and less than end and if it passes then you have your handling code. Here is a working 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>");
    }
});

Upvotes: 1

Related Questions