JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<input type="text" id="pop-calender" />
		<div id="modal-calender">
			<header></header>
			<section>
				<div id="days-name">
					<span>Sun</span>				
					<span>Mon</span>
					<span>Tue</span>
					<span>Wed</span>
					<span>Thu</span>
					<span>Fri</span>
					<span>Sat</span>
				</div>
				<div id="days"></div>
				<!--<div id="nav">
					<a href="javascript:void(0)" id="prev">prev</a>
					<a href="javascript:void(0)" id="next">next</a>
				</div>-->
			</section>
		</div>

CSS

body{
				font-family: "Helvetica Nueue";
				font-size: 13px
			}
			a{
				text-decoration: none;
			}
			#modal-calender{
				border: 1px solid grey;
				width: 270px;
				text-align: center;
				font-weight: bold;				
				border-radius: 5px;
			}
			header{
				padding: 10px 0 0 0;
				font-size: 13px;
			}
			section{
				padding:4px 6px;
			}
			#days div{
				border-top: 1px solid grey;				
			}
			#days div span{
				color: #000;
			}
			#days div span.disabled{
				color: grey;
			}
			.prev{
				float: left;
			}
			.next{
				float: right;
			}
			#days-name span,#days span{
				display: table-cell;
				padding: 0 5px;
				border-right: grey solid 1px;
				width: 26px;
				min-width: 25px;
				height: 26px;
				vertical-align: middle;
			}
			#days div span.hover-active{
				cursor: pointer;
				background: #D1BDD8;
				color: #FFF;
			}
			#days div span.selected{
				cursor: pointer;
				background: #421E4E;
				color: #FFF;
			}
			#days div:last-child{
				border-bottom: 0;
			}
			#days-name span:last-child,#days div:not(:last-child) span:last-child{
				border-right: 0;
			}

JavaScript

(function(){
	var months = ["","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
	    days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
	Date.prototype.getMonthName = function(){
		return months[this.getMonth() + 1];
	};
	
	var d = new Date(),
	    cMonthName = d.getMonthName(),
		cMonth = d.getMonth() + 1,
	    cYear = d.getFullYear(),
		cDate = d.getDate(),
		currMonthDays = ((cMonth % 2 == 0) ? 30 : 31);
		
	$("header").text(cMonthName + ", " + cYear);
	var iteration = 1, elem = ("<div>");
	$("#days").html("");
	
	var shiftByDays = getShiftByDays();
	
	(function(len){
		for(var i = 1; i <= len; i++){
		    /*set first day of the month, at correct position*/
		    if(i == 1){
				for(var k = 0; k < shiftByDays; k++){
					elem += "<span disabled='disabled' class='disabled'></span>";
				}
				shiftByDays = 0;
				elem += ("<span>" + i + "</span>");
				debugger;
				$(elem).find("span:first").parent("div").attr("class","sticky-left");
			} else { 	
				if (i == currMonthDays) {
				    elem += ("<span>" + i + "</span>");
					iteration++;
					if (iteration == 7) break;
					++cMonth;
					currMonthDays = ((cMonth % 2 == 0) ? 30 : 31);
					arguments.callee(currMonthDays);
				} else elem += ("<span>" + i + "</span>");
			}
			/*line break after every week*/
			if((($(elem).find("span").length) % 7) === 0) elem += "</div><div>";
		}
	})(currMonthDays);
	
	function getShiftByDays(){
		var dd = "01",
		    mm = ((cMonth < 10) ? ("0" + cMonth) : cMonth);
		
		var firstDay = new Date(cYear + "-" + mm + "-" + dd).getTime();
		firstDay = new Date(firstDay);
		var localDateStr = firstDay.toDateString();
		var day = localDateStr.slice(0,3);
		return days.indexOf(day);
	}
	elem += "</div>";
	$("#days").html(elem);
})();