JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="cal-days"><span>SUN</span><span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span></div>
<div class="current-month month"></div>
<div class="next-month month"></div>
<div class="choose">
    <span class="headline"></span>
    <input class="clean-date" name="cleaning_date">
</div>

CSS

.cal-days,
.month{
    display:block;
    width:420px;
    padding:0 0 10px;
}
.cal-days span{
    display:inline-block;
    width:40px;
    padding:0 10px;
    overflow:hidden;
    text-align:center;
}
.month a{
    display:inline-block;
    width:40px;
    padding:0 10px 10px;
    overflow:hidden;
    text-align:center;
}
.month a.inactive{
    color:red;
}
.month a.today{
    color:blue;
}
a.sunday{
    color:yellow;
}
}

JavaScript

var fd = new Date(),
    date = fd.getDate(),
    cut = date+2;
    month = "nov";

// Inactive protuding October dates

for (var d = 27; d < 32; d++) {
    $('.current-month').append('<a href="#" class="date date-oct'+d+' inactive">'+d+'</a>');
}

// Active November dates

for (var d = 1; d < 31; d++) {
    $('.current-month').append('<a href="#" class="date date-nov' + d +'" data-month="November" data-date="'+d+'">'+d+'</a>');
}

// Active December dates

for (var d = 1; d < 32; d++) {
    $('.next-month').append('<a href="#" class="date date-dec'+ d +'" data-month="December" data-date="'+d+'">'+d+'</a>');
}

// Inactive protuding January dates

for (var d = 1; d < 5; d++) {
    $('.next-month').append('<a href="#" class="date date-jan'+d+' inactive">'+d+'</a>');
}

// Makes dates Inactive

for ( var i = 1; i < cut; i++ ) {
    $('a.date-'+month+ i).addClass('inactive'),
    $('a.date-'+month+ date).addClass('today');
}

// Makes days

$('a.date:nth-child(7n+1)').addClass('sunday').attr('data-day', 'Sunday');
$('a.date:nth-child(7n+2)').addClass('monday').attr('data-day', 'Monday');
$('a.date:nth-child(7n+3)').addClass('tuesday').attr('data-day', 'Tuesday');
$('a.date:nth-child(7n+4)').addClass('wednesday').attr('data-day', 'Wednesday');
$('a.date:nth-child(7n+5)').addClass('thursday').attr('data-day', 'Thursday');
$('a.date:nth-child(7n+6)').addClass('friday').attr('data-day', 'Friday');
$('a.date:nth-child(7n+7)').addClass('saturday').attr('data-day', 'Saturday');



$('a.date').each(function () {
    if ($(this).hasClass('inactive')) {
        $(this).click(function () {
            return false;
        });
    } else {
        $(this).click(function () {
            var day = $(this).attr("data-day"),
                month = $(this).attr("data-month"),
                date = $(this).attr("data-date");
            $('body').toggleClass('black');
            $('a.date').removeClass('selected');
            $(this).addClass('selected');
            if (date...