Mootools Calendar

window.addEvents({
	domready:function () {
		new NaMooCalendar();	
	}
});
var NaMooCalendar = new Class({
	initialize: function(){
		this.calendar = $('calendarJS'); 
		this.days_labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
		this.months_labels = ['January','February','March','April','May','June','July','August','September','October','November','December'];
		this.cal();
},

cal: function(a){ if(a){this.mynewdate=new Date(a);} else{this.mynewdate=new Date();} this.tempdate = new Date((this.mynewdate.getMonth()+1) +' 1 ,'+this.mynewdate.getFullYear()); this.FullDays(); this.action();
},

FullDays: function(){ if ((this.tempdate.getFullYear%100!=0) && (this.tempdate.getFullYear%4==0) || (this.tempdate.getFullYear%400==0)){var totalFeb = 29;} else{var totalFeb = 28;} this.totalDays = ['31', ''+totalFeb+'','31','30','31','30','31','31','30','31','30','31']; },

action: function(){ this.calendar.empty(); var build =''; var startday = this.tempdate.getDay(); var month = this.mynewdate.getMonth(); var year = this.mynewdate.getFullYear();

for (i=0; i<7; i++){build +='<li class=cal1name>'+this.days_labels[i];}
var s = '<ul class=cal1><li class=cal1mont><h2><span id=calP>-</span> '+this.months_labels[month]+' '+year+' <span id=calN>+</span></h2>'; var e = '</ul>';

if (startday == 0){startday=7;} if (startday != 0){for (i=0; i<(startday-1); i++){build +='<li class=cal1day><b> </b>';}}

for (j=1; j<=this.totalDays[month]; j++){build +='<li class=cal1day><b>'+j+'</b>';}

 this.calendar.set('html',s+build+e);

$('calN').addEvents({ click: function() { this.cal(this.mynewdate.setMonth(this.mynewdate.getMonth()+1)); }.bind(this) }); $('calP').addEvents({ click: function() { this.cal(this.mynewdate.setMonth(this.mynewdate.getMonth()-1)); }.bind(this) }); }
});
<style>
#calendarJS{width:80%}
.cal1mont{background:#666;color:#fff;text-align:center;padding:5px 0}
.cal1name{float:left;width:14.28%;background:#eee;color:#666;text-align:center;padding:5px 0}
.cal1day{float:left;width:14.28%;background:#ddd;color:#666;text-align:center;padding:5px 0}
</style>
<div id=calendarJS></div>