Connecting DatePicker to JSON Event Data
HTML
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js"></script>
<div id="datepicker"></div>
<div id="dateevents"></div>
JavaScript
// Provide some event data in JSON format
var events = {
"2018-09-07": [{
"title": "Friday!!!!",
"description": "Weekend is starting!!!"
}],
"2016-05-18": [{
"title": "Friday!!!!",
"description": "Weekend is starting!!!"
}],
"2016-03-21": [{
"title": "Friday!!!!",
"description": "Weekend is starting!!!"
}]
};
// Setup our datepicker
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
onSelect: findEvents,
onChangeMonthYear: function(year, month) {
setTimeout(changeBackground, 1, year, month)
}
});
var d = new Date();
changeBackground(d.getFullYear(), d.getMonth() + 1);
function changeBackground(year, month) {
for (var date in events) {
var d = new Date(date);
// if same day and year
if (d.getFullYear() === year && d.getMonth() + 1 === month) {
var day = d.getDate();
// retrieve all elements containing day
var elements = $('a:contains(' + day + ')');
elements.each(function(index) {
if ($(this).text() == day) {
$(this).css("background", "red");
}
});
};
}
}
// Provide a function to find and display events
function findEvents(date) {
var d = new Date(date);
setTimeout(changeBackground, 1, d.getFullYear(), d.getMonth() + 1)
// Start by emptying our data container
$("#dateevents").empty();
// Potential date object
var dateObj = events[date];
// If no events exist for the selected date
if (!dateObj) {
return $("#dateevents").html("<h2>" + date + ": No Events</h2>");
}
// If we've made it this far, we have events!
$("#dateevents").html("<h2>" + date + ": " + dateObj.length + " Events Planned</h2>");
// Cycle over every event for this date
$.each(dateObj, function(index, event) {
// Build a list for each event
var $list = $("<ul>");
// Add all event details to list
$.each(event, function(name, desc) {
$("<li>").html(name + ": " + desc).appendTo($list);
});
// Place list in...