<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h5>April 2015</h5>
<div id="no-more-tables">
<table class="col-lg-12 table-bordered table-striped table-condensed cf">
<tbody>
<thead class="cf">
<tr>
<td class="calendar-header-day">Sun</td>
<td class="calendar-header-day">Mon</td>
<td class="calendar-header-day">Tue</td>
<td class="calendar-header-day">Wed</td>
<td class="calendar-header-day">Thu</td>
<td class="calendar-header-day">Fri</td>
<td class="calendar-header-day">Sat</td>
</tr>
</thead>
<tr>
<td class="calendar-day"></td>
<td class="calendar-day"></td>
<td class="calendar-day"></td>
<td class="calendar-day">1</td>
<td class="calendar-day">2</td>
<td class="calendar-day">3</td>
<td class="calendar-day">4</td>
</tr>
<tr>
<td class="calendar-day">5</td>
<td class="calendar-day">6</td>
<td class="calendar-day">7</td>
<td class="calendar-day">8</td>
<td class="calendar-day">9</td>
<td class="calendar-day">10</td>
<td class="calendar-day">11</td>
</tr>
<tr>
<td class="calendar-day">12</td>
<td class="calendar-day">13</td>
<td class="calendar-day">14</td>
<td class="calendar-day">15</td>
<td class="calendar-day">16</td>
<td class="calendar-day">17</td>
<td class="calendar-day">18</td>
</tr>
<tr>
<td class="calendar-day">19</td>
<td class="calendar-day">20</td>
<td class="calendar-day">21</td>
<td class="calendar-day">22</td>
<td class="calendar-day">23</td>
<td class="calendar-day">24</td>
<td class="calendar-day">25</td>
</tr>
<tr>
<td class="calendar-day">26</td>
<td class="calendar-day">27</td>
<td class="calendar-day">28</td>
<td class="calendar-day">29</td>
<td class="calendar-day">30</td>
<td class="calendar-day"></td>
<td class="calendar-day"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<p class="bg-success" style="padding:10px;margin-top:20px"><small><a href="http://elvery.net/demo/responsive-tables/#no-more-tables" target="_blank">Link</a> to original article</small></p>
</div>
</div>
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
var cal = new Calendar();
cal.generateHTML();
document.write(cal.getHTML());
console.log("I'm here");
// these are labels for the days of the week
var cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
// these are human-readable month name labels, in order
var cal_months_labels = ['Jan', 'Feb', 'Mar', 'Apr',
'May', 'Jun', 'Jul', 'Aug', 'Sep',
'Oct', 'Nov', 'Dec'];
// these are the days of the week for each month, in order
var cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// this is the current date
var cal_current_date = new Date();
function Calendar(month, year) {
this.month = (isNaN(month) || month == null) ? cal_current_date.getMonth() : month;
this.year = (isNaN(year) || year == null) ? cal_current_date.getFullYear() : year;
this.html = '';
}
Calendar.prototype.generateHTML = function(){
// get first day of month
var firstDay = new Date(this.year, this.month, 1);
var startingDay = firstDay.getDay();
// find number of days in month
var monthLength = cal_days_in_month[this.month];
// compensate for leap year
if (this.month == 1) { // February only!
if((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0){
monthLength = 29;
}
}
// do the header
var monthName = cal_months_labels[this.month]
var html = '<table class="calendar-table">';
html += '<tr><th colspan="7">';
html += monthName + " " + this.year;
html += '</th></tr>';
html += '<tr class="calendar-header">';
for(var i = 0; i <= 6; i++ ){
html += '<td class="calendar-header-day">';
html += cal_days_labels[i];
html += '</td>';
}
html += '</tr><tr>';
// fill in the days
var day = 1;
// this loop is for is weeks (rows)
for (var i = 0; i < 9; i++) {
// this loop is for weekdays (cells)
for (var j = 0; j <= 6; j++) {
html += '<td class="calendar-day">';
if (day <= monthLength && (i > 0 || j >= startingDay)) {
html += day;
day++;
}
html += '</td>';
}
// stop making rows if we've run out of days
if (day > monthLength) {
break;
} else {
html += '</tr><tr>';
}
}
html += '</tr></table>';
this.html = html;
}
Calendar.prototype.getHTML = function() {
return this.html;
}
