<section> 
<h1 id="year"></h1>
<div class="calendar"></div>
</section>

html {
  font-size: 80%;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
}

.calendar,
section {
  max-width: 50rem;
}

.day {
  width: 1.5em;
  height: 1.5em;
}

.day:nth-of-type(7n + 1) {
  color: #f09;
}

.to.day {
  color: white;
  background: #f09;
  border-radius: 50%;
}

.month {
  width: calc(1.5em * 7);
  padding: 1em;
  cursor: pointer;
}

h4 {
  font-size: 1em;
  text-transform: uppercase;
  color: #f09;
}

h1#year {
  font-size: 2em;
  height: 29px;
  font-weight: normal;
  padding: 1em 1em 0.5em 1em;
  margin-bottom: 0.5em;
  border-bottom: 5px double #d9d9d9;
}

.no-flexbox .day {
  text-align: center;
  float: left;
  line-height: 1.5em;
}

.no-flexbox h4 {
  text-align: center;
}

.no-flexbox h1 {
  width: 4em;
}

/* FLEXBOX styles*/

body,
body * {
  display: flex;
  justify-content: center;
}

h4 {
  justify-content: center;
  flex: 1 0 100%;
}

h1 {
  justify-content: center;
  align-self: stretch;
}

.calendar,
.month {
  flex-wrap: wrap;
}

section {
  flex-direction: column;
  align-self: center;
}

.month {
  align-items: flex-start;
}

.day {
  align-items: center;
  justify-content: center;
}

/*for a Spanish like calendar  
  .month .day:nth-of-type(1){order:7!important;}
  .month .day:nth-of-type(8){order:-1!important;}
   
*/

script {
  display: none;
}

.cloneCont {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -5em;
  margin-top: -10.89em;
  box-shadow: 0px 0px 5px 1px #ccc;
  transform: scale(2, 2);
  background: rgba(255, 255, 255, 0.9);
  animation: redimensionar 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

.month.cloneMonth {
  display: flex;
}

.month.cloneMonth:after {
  content: "\02718";
  color: #f09;
  position: absolute;
  top: 1em;
  right: 1em;
}

.cloneCont.trans {
  transform: translateY(1000px);
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: trasladar 0.5s cubic-bezier(0.86, 0, 0.07, 1);
}

@keyframes redimensionar {
  0% {
    transform: scale(1, 1);
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
  }
  100% {
    transform: scale(2, 2);
    background: rgba(255, 255, 255, 0.9);
    opacity: 1;
  }
}

@keyframes trasladar {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(1000px);
    opacity: 0;
  }
}

var monthNamesRy = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var daysOfTheWeekRy = ["S", "M", "T", "W", "T", "F", "S"]

var d = new Date();
var year = d.getFullYear();// 2016
document.querySelector("#year").innerHTML = year;
var thisMonth = d.getMonth();// 0 - 11
var today = d.getDate();// 1 -31
//var nthday = d.getDay();// 0 - 7
var daysOfTheMonthDiv = document.querySelectorAll(".daysOfTheMonth");


for( var month = 0; month< 12; month++){
	createCalendar(month);
}



function createCalendar(month){
var monthDiv = createMonthHeader(month);

var firstDayOfTheMonth  = getFirstDayOfTheMonth(year,month);
var daysinmonth  = daysInMonth(year,month)
var counter = 0,order = 6;

for( var i = 0; i < firstDayOfTheMonth +7; i++){
order++;
createDay(month, "&nbsp;",order, monthDiv);
}
for( var i = firstDayOfTheMonth; i < daysInMonth(year,month) + firstDayOfTheMonth; i++){
counter ++;
order++;
createDay(month,counter,order,monthDiv);
}

for( var i = firstDayOfTheMonth + daysinmonth; i < 6*7; i++){
order++;
createDay(month, "&nbsp;",order, monthDiv);
}


}

function createDay(month,counter,order,monthDiv){

//if(order == 8){order = -1}
var day = document.createElement("div");
if(month == thisMonth && counter == today){day.setAttribute("class","to day");
}else{
day.setAttribute("class","day");}
day.setAttribute("style","order:"+order);
day.innerHTML = counter;
monthDiv.appendChild(day);
/*
<div class="monthDiv">
<div class="day">5</div>
*/	
}


function createMonthHeader(month){
var calendar = document.querySelector(".calendar");
	

	
var monthDiv = document.createElement("div");
	monthDiv.setAttribute("class","month");
	calendar.appendChild(monthDiv);
	
var h4 = document.createElement("h4");
	h4.innerHTML = monthNamesRy[month];
	monthDiv.appendChild(h4);	
	
for( var i = 0; i < 7; i++){
	//var order = (i == 0) ? order = 7 : order = i;
	var hday = document.createElement("div");
	hday.setAttribute("class","day OfWeek");
	hday.setAttribute("style","order:"+i);
	hday.innerHTML = daysOfTheWeekRy[i].toUpperCase();
	monthDiv.appendChild(hday);
}


	return monthDiv;
	
/*
<div class="month">
	
<div class="monthHeader">
<div class="day OfWeek">Sun</div>
<div class="day OfWeek">Mon</div>
<div class="day OfWeek">Tue</div>
<div class="day OfWeek">Wed</div>
<div class="day OfWeek">Thu</div>
<div class="day OfWeek">Fri</div>
<div class="day OfWeek">Sat</div>
</div>
		
<div class="daysOfTheMonth">
*/
}


function daysInMonth(year,month) {
    return new Date(year, month+1, 0).getDate();//29/03/2016 (month + 1)
}

/*function leapYear(year){
  return ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
}

function getNextMonth(month){
 if (month == 11) {
    var nextMonth = 0;
} else {
    var nextMonth = month+1;
}
return nextMonth;
}
*/
function getMonthName(month){
	return monthNamesRy[month];
}
function getDayName(day){
	return daysOfTheWeekRy[day];
}

function getFirstDayOfTheMonth(y,m){
	var firstDay = new Date(y, m, 1);
	return firstDay.getDay();
}
function getLastDayOfTheMonth(y,m){
	var lastDay = new Date(y, m + 1, 0);
	return lastDay.getDay();
}


// the popp up

var calendar = document.querySelector(".calendar");
var cloneCont = document.querySelector(".cloneCont");
var requestId = false;
	calendar.addEventListener("click", function(e){
        if(this.querySelector(".cloneCont")){
			this.removeChild(this.querySelector(".cloneCont"));}

        else if(e.target.parentNode.className =='month' ){
		
		var monthClone = e.target.parentNode.cloneNode(true);
		monthClone.className += " cloneMonth";
		var cloneCont = document.createElement("div");
		cloneCont.className += " cloneCont";
		cloneCont.appendChild(monthClone);
		this.appendChild(cloneCont);
		
		}
		},false);