JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="current-month"></div>

CSS

div.date{
    display:inline-block;
    width:10px;
    height:10px;
    background:#ccc;
    margin:10px;
}
div.sun{
    background:#eee;
}
div.mon{
    background:#ccc;
}
div.tue{
    background:#bbb;
}
div.wed{
    background:#aaa;
}
div.thu{
    background:#999;
}
div.fri{
    background:#888;
}
div.sat{
    background:#777;
}

JavaScript

var fd = new Date(),
     month = fd.getMonth()+1,
     date = fd.getDate(),
     day = fd.getDay()+1;

// Add four weeks, daul count?

for (var w = 1, i = 4; w < 5, i< 9; w++, i++) {
    $('.current-month').append('<div class="week week'+w+i+'"></div>');
}
for (var o = 1; o < 8; o++) {
    $('.week').append('<div class="date day-"></div>');
}

// Assigns days in month

if(month === 4 || month === 6 || month === 9 || month === 11){
    var monthEnd = 30;
} else if(month === 2){
    var monthEnd = 28;
} else{
    var monthEnd = 31;
}

// 


// Assigns date classes

/*for (var c = 1; c < 8; c++) {
    $('.date').addClass('date'+c);
}*/