CodePen

HTML

            
              
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calendario Javascript</title>
<style type="text/css">
body {
	font-family: Arial, "Sans-serif";
}
table {
	background:#1D1D1B;
	font-size: 35px;
	margin-top:30px;
}
table th {
	background: #fff;
}
table tr {
	background: #fff;
}
table td {
	padding: 5px 10px;
}
b {
	color: #D8314C;
}	
</style>
<script type="text/javascript">
function calendario() {
	var fecha = new Date();
	var year = fecha.getFullYear();
	var mes = fecha.getMonth();
	var dia = fecha.getDate();
	var diaSemana = fecha.getDay();

	var months = ['Enero',
				  'Febrero',
				  'Marzo',
				  'Abril',
				  'Mayo',
				  'Junio',
				  'Julio',
				  'Agosto',
				  'Septembre',
				  'Octubre',
				  'Novembre',
				  'Dicembre']
	var days =  ['Domingo',
	             'Lunes',
	             'Martes',
	             'Miercules',
	             'Jueves',
	             'Viernes',
	             'Sabado'
                ]
	             
	fecha.setDate(1);

	calendario = '<center><table><tr><th colspan="7"><b>' + 'Barcelona ' + months[mes] + ' de ' + year +'</b>'+'</th>' + '</tr>';
	calendario += '<tr>';
	for (i=0; i<7; i++){
		if(diaSemana==i){
			calendario += '<td><b> ' + days[i] + '</b></td>';
		}else {
			calendario += '<td>' + days[i] + '</td>';
		}
	}
	calendario += '</tr>';
	for(i=0; i<fecha.getDay(); i++){
		calendario+= '<td></td>';
	}
	for(i=0; i<31; i++) {
		if(fecha.getDate()>i){
			diaSemana = fecha.getDay();
			if(diaSemana == 0)
				calendario += '<tr>';
			if(diaSemana != 7) {
				if(dia==fecha.getDate()){
					calendario+= '<td><b>' + (i+1) + '</b>' + '</td>';
				}else {
					calendario += '<td>' + (i+1) + '</td>';
				}
			}
			if(diaSemana==7){
				calendario += '</tr>'
			}
		}
		fecha.setDate(fecha.getDate()+1);
	}
	calendario += '</table></center>';
	document.write(calendario);
}  
</script>
</head>
<body>
	<script type="text/javascript">
		calendario();
	</script>
</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
	font-family: Arial, "Sans-serif";
}
table {
	background:#1D1D1B;
	font-size: 35px;
	margin-top:30px;
}
table th {
	background: #fff;
}
table tr {
	background: #fff;
}
table td {
	padding: 5px 10px;
}
b {
	color: #D8314C;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
function calendario() {
	var fecha = new Date();
	var year = fecha.getFullYear();
	var mes = fecha.getMonth();
	var dia = fecha.getDate();
	var diaSemana = fecha.getDay();

	var months = ['Enero',
				  'Febrero',
				  'Marzo',
				  'Abril',
				  'Mayo',
				  'Junio',
				  'Julio',
				  'Agosto',
				  'Septembre',
				  'Octubre',
				  'Novembre',
				  'Dicembre']
	var days =  ['Domingo',
	             'Lunes',
	             'Martes',
	             'Miercules',
	             'Jueves',
	             'Viernes',
	             'Sabado'
              ]
	fecha.setDate(1);

	calendario = '<center><table><tr><th colspan="7"><b>' + 'Barcelona ' + months[mes] + ' de ' + year +'</b>'+'</th>' + '</tr>';
	calendario += '<tr>';
	for (i=0; i<7; i++){
		if(diaSemana==i){
			calendario += '<td><b> ' + days[i] + '</b></td>';
		}else {
			calendario += '<td>' + days[i] + '</td>';
		}
	}
	calendario += '</tr>';
	for(i=0; i<fecha.getDay(); i++){
		calendario+= '<td></td>';
	}
	for(i=0; i<31; i++) {
		if(fecha.getDate()>i){
			diaSemana = fecha.getDay();
			if(diaSemana == 0)
				calendario += '<tr>';
			if(diaSemana != 7) {
				if(dia==fecha.getDate()){
					calendario+= '<td><b>' + (i+1) + '</b>' + '</td>';
				}else {
					calendario += '<td>' + (i+1) + '</td>';
				}
			}
			if(diaSemana==7){
				calendario += '</tr>'
			}
		}
		fecha.setDate(fecha.getDate()+1);
	}
	calendario += '</table></center>';
	document.write(calendario);
} 
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................