JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="dates">
    <span>sun</span><span>mon</span><span>tue</span><span>wed</span><span>thu</span><span>fri</span><span>sat</span>
</div>

CSS

.dates{
    display:block;
    width:900px;
}
.dates span{
    display:inline-block;
    width:100px;
    margin:4px;
    text-align:center;
}
.dates .inactive{
    opacity:.3;
}
.dates .today{
    color:purple;
}

JavaScript

var d = new Date(),
     today = d.getDate(),
     cutday = today+2,
     month = "nov",
     nextmonth = "dec";

for(var week=1; week<5; week++){
    $('.dates').append('<div class="week week-'+week+'"></div>');
}

//Start November

for(var day=17; day<24; day++){
    $('.week-1').append('<span class="day day-'+month+'-'+day+'" data-date="'+month+' '+day+'"></span>');
}
for(var day=24; day<31; day++){
    $('.week-2').append('<span class="day day-'+month+'-'+day+'" data-date="'+month+' '+day+'"></span>');
}

// Start December

for(var day=1; day<8; day++){
    $('.week-3').append('<span class="day day-'+nextmonth+'-'+day+'" data-date="'+nextmonth+' '+day+'"></span>');
}
for(var day=8; day<15; day++){
    $('.week-4').append('<span class="day day-'+nextmonth+'-'+day+'" data-date="'+nextmonth+' '+day+'"></span>');
}

//make-inactive

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

$('.day').each(function () {
    if ($(this).hasClass('inactive')) {
        var date = $(this).attr("data-date");
        $(this).append('<div class="date-title">'+date+'</div>');
    } else {
        var date = $(this).attr("data-date");
        $(this).append('<div class="date-title">'+date+'</div>');
        $(this).append('<a class="time checkbox time-1">8:00 AM<span><input type="radio" name="cleantime" value="'+date+'8:00AM"></span></a>');
        $(this).append('<a class="time checkbox time-2">9:00 AM<span><input type="radio" name="cleantime" value="'+date+'9:00AM"></span></a>');
        $(this).append('<a class="time checkbox time-3">12:00 PM<span><input type="radio" name="cleantime" value="'+date+'12:00PM"></span></a>');
        $(this).append('<a class="time checkbox time-4">3:00 PM<span><input type="radio" name="cleantime" value="'+date+'3:00PM"></span></a>');        
        $(this).append('<a class="time checkbox time-5">6:00 PM<span><input type="radio" name="cleantime"...