<html>
<head>
<script type="text/javascript">
/** Configuración general **/
var idContenedor = "miCalendario" //id del contenedor donde se insertará el calendario
var calendarioCursor = 'pointer'
var calendarioPaddingCelda = 3; //Corrige la posición del cuadro que marca el día seleccionado en caso de haberse aplicado un padding a las celdas
var tagTitulos = 'h2' //Tag a usar en los títulos de eventos y efemérides
var textoVerTodos = ''
/** fin configuración general **/
function evento(fecha, titulo, texto, enlace){ this.fecha = fecha;
this.titulo = titulo;
this.texto = texto;
this.enlace = false;
if(enlace) this.enlace = enlace
}
/** agregamos los listados de efemérides y eventos por meses:
var nombreDelMes = new Array();
nombreDelMes.push(new evento('fecha en formato aaaammdd o mmdd', 'Título', 'Texto','Link [opcional]'));
**/
var enero = new Array();
enero .push(new evento('0120', '', 'Sin Asignaciones', '',''))
var febrero = new Array();
febrero .push(new evento('0216', '', 'Asignacion de Informática #1',''))febrero .push(new evento('0223', '', 'Asignacion de Informática #2',''))
var marzo = new Array();
marzo .push(new evento('0302', '', 'Asignacion de Informática #3',''))marzo .push(new evento('0309', '', 'Asignacion de Informática #4',''))
var abril = new Array();
abril.push(new evento('0401', '', 'Sin Asignaciones',''))abril.push(new evento('0419', '', 'Sin Asignaciones'))abril.push(new evento('0419', '', 'Sin Asignaciones'))
var mayo = new Array();
mayo .push(new evento('0525', '', 'Sin Asignaciones',''))mayo .push(new evento('0525', '', 'Sin Asignaciones',''))
var junio = new Array();
junio .push(new evento('0605', '', 'Sin Asignaciones',''))
var julio = new Array();
julio .push(new evento('0705', '', 'Sin Asignaciones',''))
var agosto = new Array();
agosto.push(new evento('0818', '', 'Sin Asignaciones',''))agosto.push(new evento('0827', '', 'Tarea Asignada',''))agosto.push(new evento('0828', '', 'Responzabilidad',''))agosto.push(new evento('0829', '', 'Honestidad',''))agosto.push(new evento('0830', '', 'Capacidad',''))
var septiembre = new Array();
septiembre.push(new evento('0901', '', 'Respeto'))septiembre.push(new evento('0902', '', 'Dedicación'))septiembre.push(new evento('0903', '', 'Sacrificio'))
var octubre = new Array();
octubre.push(new evento('1001', '', 'Entrega tus Tareas'))
var noviembre = new Array();
noviembre.push(new evento('1115', '', 'Felices Vacaciones'))
var diciembre = new Array();
diciembre.push(new evento('1214', '', 'Asignaciones I-BTPI Informática II-BTPI Laboratorio III-BTPI Programación',''))
/**************************************************************
Calendario con Notificaciones diarias en donde se muestran los dias
que estan asignados con tareas o trabajos para puntos acumulativos de los parciales.
****************************************************************/
/*No tocar nada de aquí.*/
var hoy = new Date()
var mes = hoy.getMonth()
var dia = 1
var anio = hoy.getFullYear()
var diasSemana = new Array ('L','M','M','J','V','S','D')var meses = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre')var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}tunOp = navigator.userAgent.indexOf('Opera')>=0 ? true: false;var tunSel = false
var gHoy = 0;
var anCelda, alCelda, carga =false;
function tunCalendario(){ if(!carga) escribeControles();
dia2 = dia
tab = document.createElement('table') tab.id = 'calendario'
document.getElementById(idContenedor).appendChild(tab)
tcabeza = document.createElement('thead') tab.appendChild(tcabeza)
fCalendario = document.createElement('div') fCalendario.style.position= 'relative';
fCalendario.className = "cuadroTexto"
fCalendario.id = 'tunCuadroTexto'
document.getElementById(idContenedor).appendChild(fCalendario)
fi2 = document.createElement('tr') fi2b = document.createElement('th') fi2b.colSpan = 7
fi2.id = 'mesCalendario'
fi2b.appendChild(document.createTextNode(meses[mes] + " - " + anio))
fi2.appendChild(fi2b)
tcabeza.appendChild(fi2)
fi = document.createElement('tr') tcabeza.appendChild(fi)
for(m=0;m<7;m++){ ce = document.createElement('th') ce.appendChild(document.createTextNode(diasSemana[m]))
fi.appendChild(ce)
}
var escribe = false
var escribe2 = true
fecha = new Date(anio,mes,dia)
var d = fecha.getDay()-1
if(d<0){d = 6} tcuerpo = document.createElement('tbody') tab.appendChild(tcuerpo)
while(escribe2){ fi = document.createElement('tr') co = 0
for(t=0;t<7;t++){ ce = document.createElement('td') if(escribe && escribe2){ fecha2 = new Date(anio,mes,dia)
/*****EVENTOS****/
var _anio = fecha2.getFullYear().toString()
var _mes = fecha2.getMonth() + 1
_mes = _mes < 10 ? '0' + _mes : _mes.toString()
var _dia = fecha2.getDate()
_dia = _dia < 10 ? '0' + _dia : _dia.toString()
buscaEv = buscaEvento(_anio + _mes + _dia, _mes + _dia)
if(buscaEv){ _titl = '';
for( var x in buscaEv){ _titl += buscaEv[x].titulo
_titl += x < (buscaEv.length - 1) ? '; ' : '';
}
}
ce.title = buscaEv ? _titl : formatoFecha(_anio + _mes + _dia)
ce.className = buscaEv ? 'hayEvento' : ''
/****FIN EVENTOS****/
if(fecha2.getMonth() != mes){escribe2 = false;} else{ ce.appendChild(document.createTextNode(dia));
dia++;
co++;
ce.style.cursor = calendarioCursor
ce.onclick = marcaCalendario
}
}
if(d == t && !escribe){ ce.appendChild(document.createTextNode(dia))
/*****EVENTOS****/
var _anio = anio
var _mes = mes + 1
_mes = _mes < 10 ? '0' + _mes : _mes.toString()
var _dia = dia
_dia = _dia < 10 ? '0' + _dia : _dia.toString()
buscaEv = buscaEvento(_anio + _mes + _dia, _mes + _dia)
if(buscaEv){ _titl = '';
for( var x in buscaEv){ _titl += buscaEv[x].titulo
_titl += x < (buscaEv.length - 1) ? '; ' : '';
}
}
ce.title = buscaEv ? _titl : formatoFecha(_anio + _mes + _dia)
ce.className = buscaEv ? 'hayEvento' : ''
/****FIN EVENTOS****/
dia++;co++
escribe = true
ce.style.cursor = calendarioCursor
ce.onclick = marcaCalendario
}
else{ ce.appendChild(document.createTextNode(" ")) }
fi.appendChild(ce)
if(hoy.getDate()+1 == dia && mes == hoy.getMonth() && anio == hoy.getFullYear() && !gHoy){ ce.className = "Hoy"
gHoy = 1;
if(buscaEv){ escribeEvento(buscaEv)} else{ escribeFecha(_anio + _mes + _dia); enlaceListarMes()}
}
}
if(co>0){tcuerpo.appendChild(fi)}
}
dia = dia2
}
function marcaCalendario(){ /*eventos*/
var _anio = anio.toString();
var _mes = mes + 1
_mes = _mes < 10 ? '0' + _mes : _mes.toString()
var _dia = this.firstChild.nodeType == 1 ? this.firstChild.nextSibling.nodeValue : this.firstChild.nodeValue;
_dia = _dia < 10 ? '0' + _dia : _dia.toString()
hayEvento = buscaEvento(_anio + _mes + _dia, _mes + _dia)
/*fin eventos */
if(hayEvento){ escribeEvento(hayEvento)} else {escribeFecha(_anio + _mes + _dia); enlaceListarMes()} ceSe = document.createElement('div') ceSe.id = "tunSeleccionado"
with(ceSe.style){ borderWidth = "1px"
borderStyle = "solid"
borderColor = "#444;" /*rgba(225,85,0, 07);*/
width = this.scrollWidth + "px"
height = this.scrollHeight + "px"
position = "absolute"
zIndex = "1000"
}
if(tunSel){ tunSel.removeChild(tunSel.firstChild)
}
tunSel = this
this.insertBefore(ceSe,this.firstChild)
with(ceSe.style){ width = this.scrollWidth + "px"
marginLeft = "-" + (calendarioPaddingCelda + 1) + "px"
marginTop = "-" + (calendarioPaddingCelda + 1) + "px"
}
}
function borra(){ document.getElementById(idContenedor).removeChild(document.getElementById('calendario')) document.getElementById(idContenedor).removeChild(document.getElementById('tunCuadroTexto'))}
function establecerFecha(){ tunFe = new Date()
document.getElementById('tunMes').options[tunFe.getMonth()].selected = true document.getElementById('tunAnio').value = tunFe.getFullYear()}
function buscaEvento(f, fc){ try{ eval(meses[mes].toLowerCase())
}
catch(error){ return false
}
var _array = eval(meses[mes].toLowerCase())
var _eventos = new Array()
for(var m in _array){ if(_array[m].fecha == f || _array[m].fecha == fc){ _eventos.push(_array[m])
}
}
return _eventos.length > 0 ? _eventos : false;
}
function escribeEvento(obj){ escribeFecha(obj[0].fecha)
escribeEvento2(obj, false)
}
function escribeEvento2(obj, fec){ for(var w in obj){ var ti = document.createElement(tagTitulos)
if(fec){ _fec = formatoFecha(obj[w].fecha)
_d = _fec.substr(0,2)
ti.appendChild(document.createTextNode(_d + " - "))
}
var o = ti
if(obj[w].enlace){ var en = document.createElement('a') en.href =obj[w].enlace
o.appendChild(en)
o = en
}
o.appendChild(document.createTextNode(obj[w].titulo))
document.getElementById('tunCuadroTexto').appendChild(ti) var te = document.createElement('p') te.appendChild(document.createTextNode(obj[w].texto))
document.getElementById('tunCuadroTexto').appendChild(te) }
enlaceListarMes()
}
function enlaceListarMes(){ try{ eval(meses[mes].toLowerCase())
}
catch(error){ return false
}
var verTodos = document.createElement('strong') verTodos.style.cursor = 'pointer'
verTodos.style.display = 'block'
verTodos.appendChild(document.createTextNode(textoVerTodos))
verTodos.onclick = escribirEventosMes
document.getElementById('tunCuadroTexto').appendChild(verTodos)
}
function escribeFecha(fecha){ lNodos = document.getElementById('tunCuadroTexto').childNodes.length if(lNodos){ for(var m = 0; m < lNodos; m++){ document.getElementById('tunCuadroTexto').removeChild(document.getElementById('tunCuadroTexto').childNodes[0]) }
}
var fe = document.createElement('strong') fe.appendChild(document.createTextNode(formatoFecha(fecha)))
document.getElementById('tunCuadroTexto').appendChild(fe)}
function formatoDiaMes(v){ v = v < 10 ? '0' + v : v ;
return v
}
function formatoFecha(fecha){ if(fecha.toString().length == 8){ var an = fecha.toString().substring(0,4)
var me = fecha.toString().substring(4,6)
var di = fecha.toString().substring(6,8)
}
else{ if(fecha.toString().length == 6){ var an = fecha.toString().substring(0,4)
var me = fecha.toString().substring(4,6);
var di = ''
}
else{ var an = ''
var me = fecha.toString().substring(0,2)
var di = fecha.toString().substring(2,4)
}
}
me = eval(me)
me = meses[me-1]
return di + " de " + me + " del " + anio
}
function cambiarMes(val){ var _anio = document.getElementById('tunAnio').value var _dia = 1;
if(val){ var _mes = document.getElementById('tunMes').options[document.getElementById('tunMes').selectedIndex].value eval('_mes' + val + val) _mes = _mes < 0 && val == '-' ? 11 : _mes
_mes = _mes > 11 && val == '+' ? 0 : _mes
if(eval(_mes) == 0 && val == '+') _anio++
if(eval(_mes) == 11 && val == '-') _anio--
document.getElementById('tunMes').options[_mes].selected = true document.getElementById('tunAnio').value = _anio }
else{ var _mes = mes
}
mes = _mes
anio = _anio
borra();
gHoy = 0;
tunCalendario()
escribeFecha(_anio.toString() + formatoDiaMes(_mes + 1)); enlaceListarMes()
}
function escribirEventosMes(){ escribeFecha(anio.toString() + formatoDiaMes((mes + 1).toString()))
escribeEvento2(eval(meses[mes].toLowerCase()), true)
}
function escribeControles(){ var obj = document.getElementById(idContenedor)
var sp = document.createElement('span') sp.className = "cambiaMes"
sp.onclick = function() {cambiarMes('-')} sp.appendChild(document.createTextNode('<<')) obj.appendChild(sp)
var sel = document.createElement('select') sel.className = 'selectores'
sel.id = 'tunMes'
sel.onchange = function(){ mes = this.selectedIndex;
cambiarMes(false)
}
for(var p in meses){ opt = document.createElement('option') opt.value = p
opt.appendChild(document.createTextNode(meses[p]))
sel.appendChild(opt)
}
//obj.appendChild(sel)
var campo = document.createElement('input') campo.type = 'text'
campo.id = 'tunAnio'
campo.className = "selectores"
campo.maxlength = "4"
campo.size = 4
campo.onblur = function(){ if(!isNaN(this.value)){anio=this.value;borra();tunCalendario()}//
}
//obj.appendChild(campo)
var sp = document.createElement('span') sp.className = "cambiaMes"
sp.onclick = function() {cambiarMes('+')} sp.appendChild(document.createTextNode('>>')) obj.appendChild(sp)
carga = true//
}
</script>
<style type="text/css">
/*.selectores para configurar aspectos de los campos para el mes y el año*/
.cuadroTexto { position: fixed;
top: -150px;
left: 8px;
font-family: Cambria;
font-size: 25px;
color: #fff;
text-align: center;
line-height: 1.2px;
}
</style>
</head>
<body onload="tunCalendario();establecerFecha()" style="background: #000;">
<div id="miCalendario"></div>
</body>
</html>
