I have implemented FullCalendar functionality to enable users to select a specific date, retrieve data from a database, and then reload the page with that data. The page is updated with the selected date in the URL.
However, when the page reloads, although the calendar displays the selected date due to the use of the defaultDate parameter, there is no visual highlighting indicating which day has been selected.
$(document).ready(function() {
var newSelectedDate = getUrlVars()["scheduled_date"];
$('#scheduled_calendar').fullCalendar({
<!--Header Section Including Previous,Next and Today-->
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
<!--Default Date-->
defaultDate: newSelectedDate,
editable: true,
eventLimit: true,
dayClick: function (date, jsEvent, view) {
var currentUrl = window.location.href;
$(".fc-state-highlight").removeClass("fc-state-highlight");
$(this).addClass("fc-state-highlight");
newURL = addURLParam(currentUrl,"scheduled_date", date.format())
location.href = newURL;
}
});
if (newSelectedDate > "0000-00-00") {
$('#scheduled_calendar').fullCalendar('gotoDate', newSelectedDate);
}
});