JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<table id="x"></table>
JavaScript
// Ajax mockup
$.mockjax({
url: "/SomeUrlBeginninWithSlash",
contentType: "application/json;odata=verbose",
responseText: {
d: {
results: [{
ID: "1",
Description: "Test1",
Date: "2016-05-02 09:45"
}, {
ID: "2",
Description: "Test2",
Date: "2016-05-02 10:45"
}, {
ID: "3",
Description: "Test3",
Date: "2016-05-03 11:45"
}, {
ID: "4",
Description: "Test4",
Date: "2016-05-03 11:45",
}]
}
}
});
var items_by_date = {}; // declare an object that will have date indexes
$.ajax({url:"/SomeUrlBeginninWithSlash",
dataType: 'json',
cache: false,
success: function (data) {
console.log("SUCCESS",data);
drawTable(data.d.results);
}
});
var drawTable = function(data) {
// First sort the entries by date:
data = data.sort(function(a, b) {
return (moment(a.Date) - moment(b.Date));
});
// Find the date range to work with by looking at each end of the array:
var firstDate = moment("2016-05-02");
var lastDate = moment("2016-05-05").endOf('day');
// loop through each day in that range
var ret = "";
for (var thisDate = firstDate; thisDate <= lastDate; thisDate.add(1, 'days')) {
ret += '<tr><th>' + thisDate.format("dddd, MMMM D") + "</th></tr>";
var showedAnEventToday=false;
for (var j = 0; j < data.length; j++) {
if (
moment(data[j].Date) > thisDate.startOf('day') &&
moment(data[j].Date) < thisDate.endOf('day')
) {
// the next one belongs on thisDate, so display it:
showedAnEventToday = true;
ret += '<tr><td>' + moment(data[j].Date).format("HH:mm") + " - " + data[j].Description + "</td></tr>";
}
}
if...