JSFiddle - React, Tailwind, and code Playground

Reside V.3 Admin Side - Calendar Widget

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/bootstrap.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/custom.css">
<link rel="stylesheet" href="http://jennperrin.com/edge/Reside-V3/css/styles.css">
<script src="http://jennperrin.com/edge/Reside-V3/js/bootstrap.min.js"></script>
<script src="http://jennperrin.com/edge/Reside-V3/js/custom.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container page_block noTopBorder noBotBorder">
    <div class="header-cont">
        <div class="row">
            <div class="col-md-8">
                <ul class="list-inline mt-0 mb-0">
                    <li><small><a href="../index.php">Home</a></small>
                    </li>
                    <li><small><a href="../available-properties.php">Properties</a></small>
                    </li>
                    <li><small><a href="../about-us.php">About Us</a></small>
                    </li>
                    <li><small><a href="../contact-us.php">Contact Us</a></small>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <ul class="list-inline mt-0 mb-0 pull-right">
                    <li><small><a href="index.php?action=myProfile">My Profile</a></small>
                    </li>
                    <li><small><a data-toggle="modal" href="#signOut">Sign Out</a></small>
                    </li>
                </ul>
            </div>
        </div>
        <hr class="mt-10 mb-10" />
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span...

CSS

.calwidget {
    margin: 15px auto;
    font-weight: 400;
}
.calwidget_content, .calwidget_weekdays, .calwidget_header {
    position: relative;
    overflow: hidden;
}
.calwidget_weekdays div {
    display:inline-block;
    vertical-align:top;
}
.calwidget_weekdays div, .calwidget_content div {
    width: 14.28571%;
    overflow: hidden;
    text-align: center;
    background-color: transparent;
    color: #d5d5d5;
    font-size: 14px;
    line-height: 32px;
}
.calwidget_content div {
    border: 1px solid transparent;
    float: left;
}
.calwidget_content div:hover {
    border: 1px solid #555555;
    cursor: default;
}
.calwidget_content div.blank:hover {
    cursor: default;
    border: 1px solid transparent;
}
.calwidget_content div.past-date {
    color: #999999;
}
.calwidget_content div.today {
    font-weight: bold;
    font-size: 14px;
    color: #2481be;
    border: 1px solid #888888;
}
.calwidget_header {
    width: 100%;
    text-align: center;
}
.calwidget_header h2 {
    padding: 0 10px;
    font-family:'Open sans', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #2481be;
    float:left;
    width:70%;
    margin: 0 0 10px;
}
button.switch-month {
    background-color: transparent;
    padding: 0;
    outline: none;
    border: none;
    color: #dcdcdc;
    float: left;
    width:15%;
    transition: color .2s;
}
button.switch-month:hover {
    color: #2481be;
}

JavaScript

$(document).ready(function () {
    function c(passed_month, passed_year, calNum) {
        var calendar = calNum == 0 ? calendars.cal1 : calendars.cal2;
        makeWeek(calendar.weekline);
        calendar.datesBody.empty();
        var calMonthArray = makeMonthArray(passed_month, passed_year);
        var r = 0;
        var u = false;
        while (!u) {
            if (daysArray[r] == calMonthArray[0].weekday) {
                u = true
            } else {
                calendar.datesBody.append('<div class="blank"></div>');
                r++;
            }
        }
		
        for (var cell = 0; cell < 42 - r; cell++) {
            if (cell >= calMonthArray.length) {
                calendar.datesBody.append('<div class="blank"></div>');
            } else {
                var shownDate = calMonthArray[cell].day;
                var iter_date = new Date(passed_year, passed_month, shownDate);
                if (((shownDate != today.getDate() && passed_month == today.getMonth()) || passed_month != today.getMonth()) && iter_date < today) {
                    var m = '<div class="past-date">';
                } else {
                    var m = checkToday(iter_date) ? '<div class="today">' : "<div>";
                }
                calendar.datesBody.append(m + shownDate + "</div>");
            }
        }

        var color = "#999999";
        calendar.calHeader.find("h2").text(i[passed_month] + " " + passed_year);
        calendar.weekline.find("div").css("color", color);
        calendar.datesBody.find(".today").css("color", "#2481be");
    }

    function makeMonthArray(passed_month, passed_year) { // creates Array specifying dates and weekdays
        var e = [];
        for (var r = 1; r < getDaysInMonth(passed_year, passed_month) + 1; r++) {
            e.push({
                day: r,
                // Weekday needed only for first week
                weekday: daysArray[getWeekdayNum(passed_year, passed_month, r)]
            });
       ...