<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> .c_calendario_general {
width: 400px;
height: auto;
border: 1px solid rgb(195, 192, 192);
z-index: 1;
}
.calendario{
width: 100%;
height: auto;
border-collapse: collapse;
}
.diasemana > th {
border-bottom: 1px solid rgb(195, 192, 192);
}
tr.controles > th {
cursor: default;
}
.Ccasilladia {
width: 38px;
height: 19px;
cursor: default;
text-align: center;
}
<script type="text/javascript"> var calendario = {
meses : ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
diasemana : ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
fechaHoy : null,
cTabla : null,
tBody : null,
formatoFecha : 'dd/mm/yyyy',
cabCalendario : function() {
var fecha = new Date();
calendario.fechaHoy = fecha;
var objcalendario = document.querySelectorAll('.c_calendario_general');
calendario.cTabla = document.createElement('table');
calendario.cTabla.setAttribute('class', 'calendario');
var tHead = document.createElement('thead');
var cTHead = calendario.cTabla.appendChild(tHead);
var trH1 = document.createElement('tr');
trH1.setAttribute('class', 'controles');
var cTrHead = cTHead.appendChild(trH1);
var thH1 = document.createElement('th');
thH1.setAttribute('class', 'atrasy');
thH1.setAttribute('colspan', '1');
thH1.setAttribute('title', 'Retroceder un año');
thH1.textContent = '<<';
trH1.appendChild(thH1);
var thH2 = document.createElement('th');
thH2.setAttribute('class', 'atrasm');
thH2.setAttribute('colspan', '1');
thH2.setAttribute('title', 'Retroceder un mes');
thH2.textContent = '<';
trH1.appendChild(thH2);
var thH3 = document.createElement('th');
thH3.setAttribute('class', 'myyyy');
thH3.setAttribute('colspan', '3');
thH3.textContent = calendario.meses[calendario.fechaHoy.getMonth()] + ', ' + calendario.fechaHoy.getFullYear();
trH1.appendChild(thH3);
var thH4 = document.createElement('th');
thH4.setAttribute('class', 'adelantem');
thH4.setAttribute('colspan', '1');
thH4.setAttribute('title', 'Avanzar un mes');
thH4.textContent = '>';
trH1.appendChild(thH4);
var thH5 = document.createElement('th');
thH5.setAttribute('class', 'adelantey');
thH5.setAttribute('colspan', '1');
thH5.setAttribute('title', 'Avanzar un año');
thH5.textContent = '>>';
trH1.appendChild(thH5);
var trH2 = document.createElement('tr');
trH2.setAttribute('class', 'diasemana');
var cTrHead = cTHead.appendChild(trH2);
for (var i = 0; i < 7; i++) {
var thH = document.createElement('th');
thH.textContent = calendario.diasemana[i];
trH2.appendChild(thH);
}
objcalendario[0].appendChild(calendario.cTabla);
calendario.cuerpoCalendario();
document.querySelector('th.atrasy').addEventListener('click', function(){calendario.retrocede(false)}, false);
document.querySelector('th.atrasm').addEventListener('click', function(){calendario.retrocede(true)}, false);
document.querySelector('th.adelantey').addEventListener('click', function(){calendario.avanza(false)}, false);
document.querySelector('th.adelantem').addEventListener('click', function(){calendario.avanza(true)}, false);
},
cuerpoCalendario : function() {
calendario.cBody = document.createElement('tbody');
//variable fechaaux a modo de fecha auxiliar, la situo el dia 1 del mes y año actual
var fechaaux = new Date(calendario.fechaHoy.getFullYear(), calendario.fechaHoy.getMonth(), 1);
//saco el dia de la semana que es el 1 del mes actual
diaactual = fechaaux.getDay();
//y voy retrasando la fecha de dia en dia hasta que llego a un lunes, una vez llegue a este lunes, sera la primera fecha que se pinte en el calendario
while (diaactual != 1) {
fechaaux.setDate(fechaaux.getDate() - 1);
diaactual = fechaaux.getDay();
}
// creamos los dias en el calendario, pintamos el dia que contiene fechaaux y la pasamos al dia siguiente
for (var i = 0; i < 6; i++) {
var trB = document.createElement('tr');
var cTrBody = calendario.cBody.appendChild(trB);
for (var j = 0; j < 7; j++) {
if (calendario.fechaHoy.getMonth() == fechaaux.getMonth()) {
var tdB = document.createElement('td');
tdB.setAttribute('class', 'Ccasilladia');
if (calendario.fechaHoy.getDate() == fechaaux.getDate()) {
configcolor = 'color: rgb(255, 255, 255); background-color: rgb(116, 116, 117);'; //CASILLA DE HOY
tdB.setAttribute('style', configcolor);
} else if ((fechaaux.getDay() == 6) || (fechaaux.getDay() == 0)) { //si el dia actual es sabado o domingo
configcolor = 'color: rgb(255, 0, 0);';
tdB.setAttribute('style', configcolor);
} else {
configcolor = '';
}
tdB.textContent = fechaaux.getDate();
var cTdBody = cTrBody.appendChild(tdB);
tdB.addEventListener('click', function() {calendario.mostrarFecha(this.textContent)});
} else {
var tdB = document.createElement('td');
var cTdBody = cTrBody.appendChild(tdB);
}
fechaaux.setDate(fechaaux.getDate() + 1);
}
}
calendario.cTabla.appendChild(calendario.cBody);
},
avanza: function(aniomes) {
if (!aniomes) {
calendario.fechaHoy.setFullYear(calendario.fechaHoy.getFullYear() + 1);
} else {
calendario.fechaHoy.setMonth(calendario.fechaHoy.getMonth() + 1);
}
document.querySelector('.myyyy').innerHTML = calendario.meses[calendario.fechaHoy.getMonth()] + ', ' + calendario.fechaHoy.getFullYear();
calendario.cTabla.removeChild(calendario.cBody);
calendario.cuerpoCalendario();
},
retrocede: function(aniomes) {
if (!aniomes) {
calendario.fechaHoy.setFullYear(calendario.fechaHoy.getFullYear() - 1);
} else {
calendario.fechaHoy.setMonth(calendario.fechaHoy.getMonth() - 1);
}
document.querySelector('.myyyy').innerHTML = calendario.meses[calendario.fechaHoy.getMonth()] + ', ' + calendario.fechaHoy.getFullYear();
calendario.cTabla.removeChild(calendario.cBody);
calendario.cuerpoCalendario();
},
mostrarFecha : function(dia) {
var fecha = [calendario.fechaHoy.getFullYear(), calendario.fechaHoy.getMonth() + 1, dia];
document.getElementById('fentrada').textContent = calendario.formatFecha(fecha, calendario.formatoFecha);
},
formatFecha : function(arr, darformato) {
//https://msdn.microsoft.com/library/ff743760(v=vs.94).aspx
darformato = darformato.replace(/(d+)/g, function(v) {
return ((arr[2].length < 2 && v.length > 1 ? '0' : '') + arr[2]);
});
darformato = darformato.replace(/(m+)/g, function(v) {
return ((arr[1].toString().length < 2 && v.length > 1 ? '0' : '') + arr[1]);
});
return darformato.replace(/(y+)/g, function(v) {
return arr[0].toString().slice(-v.length);
});
}
}
document.addEventListener('DOMContentLoaded', calendario.cabCalendario, false);
<div class="c_calendario_general"></div>