JSFiddle - React, Tailwind, and code Playground

by Alex Yu

HTML

<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<div id="calendar">

</div>

CSS

body{
  background: white;
  font-family: 'Fjalla One', sans-serif;
  color: #3d4a50;
}

table{
  border-collapse: collapse;
  width:100%;
}
th{ 
  font-weight:normal;
  font-size:24px;
  text-transform: uppercase;
  height: 54px;
}
td{
  border: 1px solid #424242;
  height:300px;
  min-width: 65px;
}

.calHeader{
  background: #f9a44a;
  text-align: center;
  font-size:40px;
  text-transform: uppercase;
  height:80px;
  line-height:80px;
  -webkit-font-smoothing: antialiased;
}
.header{
  background: #3d4a50;
  color: #fff;
}

JavaScript

$(document).ready(function(){
	console.log('doc ready');
  var calendar = {
  	options: {
    	dayFormat: "ddd", //or dddd for full
    	dateFormat: "dd", //or d
      startViewMode: "month", //or view
      startMonth: (new Date()).getMonth(),
      startDay: (new Date()).getDate(),
      minDate: null,
      maxDate: null,
      selectedDate: new Date(),
      showDayHeaderImage: true,
      showHolidays: true,
      arrayDayShort: ['Sun','Mon','Tues','Wed','Thurs','Fri','Sat'],
      arrayDayFull: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']     
    },
    init: function(id, options){
    	var $cal = $(id);
      if($cal.length < 1){ console.error('Cal Init Error: No id found with ' + id.toString());}
      else if($cal.length > 1){ console.error('Cal Init Error: More than one id ' + id.toString());}
      else{
      	$cal = $($cal[0]);
        
        
        
        console.log('Creating Calendar...');
        var month = 9;
        var year = 2016;
        var d = new Date(year,month);
        var table = ['<div class="calHeader">October 2016</div>'];
        table.push('<table><tr class="header">');
        var arrayDayShort = ['Sun','Mon','Tues','Wed','Thurs','Fri','Sat'];
        for(var i=0; i<7; i++){	table.push('<th>'+arrayDayShort[i]+'</th>');}
        table.push('</tr><tr>');
        for(var i=0; i<d.getDay();i++){ table.push('<td></td>');}
        while(d.getMonth()==month){
        	table.push('<td>'+d.getDate()+'</td>');
          if(d.getDay()%7 == 6){
          	table.push('</tr><tr>');
          }
          d.setDate(d.getDate() + 1);
        }
        for(var i=d.getDay();i<7;i++){ table.push('<td></td>'); }
        table.push('</tr></table>');
        $cal.html(table.join('\n'));
      }
    },
    getMinDate: function(){},
    getMaxDate: function(){},
    getViewMode: function(){},
    getSelectedDate: function(){}
  };
  calendar.init('#calendar');
  
});