JSFiddle - React, Tailwind, and code Playground

Functioning Calendar on Bootstrap

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<table id="wp-calendar">
    <caption>Month Year</caption>
    <thead>
        <tr>
            <th scope="col" title="Monday">Mon</th>
            <th scope="col" title="Tuesday">Tue</th>
            <th scope="col" title="Wednesday">Wed</th>
            <th scope="col" title="Thursday">Thu</th>
            <th scope="col" title="Friday">Fri</th>
            <th scope="col" title="Saturday">Sat</th>
            <th scope="col" title="Sunday">Sun</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3" id="prev"> <a href="#"></a></td>
            <td colspan="1">&nbsp;</td>
            <td colspan="3" id="next" class="text-right"> <a href="#"></a></td>
        </tr>
    </tfoot>
</table>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans:600,400');
 #wp-calendar {
    margin: 25px auto 0;
    color: hsl(0, 0%, 60%);
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 12px;
}
#wp-calendar caption {
    margin-bottom: 10px;
}
thead tr > th, tbody tr > td {
    width: 30px;
    height: 30px;
    text-align: center;
}
thead tr > th {
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: hsl(0, 0%, 85%);
    color: #444444;
    font-size: 11px;
}
thead tr > th:first-child, tbody tr > td:first-child {
    border-left: none;
}
thead tr > th:last-child, tbody tr > td:last-child {
    border-right: none;
}
tbody tr:last-child td {
    border-bottom: none;
}
tbody tr > td {
    border: 1px solid;
    border-color: hsl(0, 0%, 85%);
}
tbody tr > td#today {
    color: #444444;
    background-color:#e0f4b9;
    font-weight: 600;
}
tfoot tr > td {
    padding: 5px 0 0 0;
    font-size: 11px;
}
tfoot tr > td a {
    color: hsl(0, 0%, 60%);
    text-decoration: none;
}

JavaScript

var stringMonth = function (m) {
    switch (parseInt(m)) {
        case 0:
            return 'January';
        case 1:
            return 'February';
        case 2:
            return 'March';
        case 3:
            return 'April';
        case 4:
            return 'May';
        case 5:
            return 'June';
        case 6:
            return 'July';
        case 7:
            return 'August';
        case 8:
            return 'September';
        case 9:
            return 'October';
        case 10:
            return 'November';
        case 11:
            return 'December';
        default:
            return '#ERROR#';
    }
}

var setUpCalendar = function (monthToShow) {
    if (typeof monthToShow == 'string') monthToShow = new Date(monthToShow);
    if (typeof monthToShow == 'object') monthToShow = monthToShow;
    else monthToShow = new Date();

    // Vars
    var m = monthToShow.getMonth();
    var y = monthToShow.getFullYear();
    var numDays = new Date(y, m + 1, 0).getDate();
    var fom = new Date(y, m, 1).getDay();
    var lom = new Date(y, m + 1, 0).getDay();
    var current = m == new Date().getMonth() && y == new Date().getFullYear();

    // Correct for Sundays
    if (fom == 0) fom = 7;
    if (lom == 0) lom = 7;

    // Correct the # of rows, say if 6
    if ((fom == 7 && numDays > 29) || (fom == 6 && numDays == 31)) $('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('tbody');
    // or only 4 are needed
    if (fom == 1 && numDays == 28) $('tbody tr:last-child').remove();

    // Set title
    var month = stringMonth(m);
    $('table > caption').html(month + ' ' + y);

    // Add starting space and remove extra cells
    if (fom != 1) {
        $('tbody > tr:first-child > td').eq(0).attr('colspan', fom - 1);
        $('tbody > tr:first-child').children().slice(9 - fom).remove();
    }

    // Add ending space and remove extra cells
    if (lom != 7) {
        $('tbody > tr:last-child >...