Adaptar Calendario a PHP+MySQL.

[Flow89]

Hola compañeros, una vez más estoy aquí para que me echéis una mano.

Tengo un calendario en Javascript, el cual tiene Eventos, y estos se definen en un array, mi propósito final es que en vez de añadirlos mediante un array, se añadan mediante un formulario, y se queden guardados en la base de datos.

Para que veais el funcionamiento del calendario pasaros por www.juventudmdc.comlu.com, como veis al darle a "Listar todo el mes" se abre la ventanita con los eventos que hay.

Para ver el codigo del calendario;

Calendario: PARTE1

Código Javascript:

/*No tocar nada de aquí. La configuración en el archivo calendarioefemerides_config.js */
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 = "#ff0000"
        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
}
 

****** CODIGO CORTADO; CONTINUA ABAJO. *******

[Flow89]

Calendario: PARTE2

Código Javascript:

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 + " " + me + " " + an
}
 
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
}
 

Config:

Código 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 = 'Listar todo el mes'
/** fin configuración general **/
 
 
/** 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 = 'Listar todo el mes'
/** 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();
 
var febrero = new Array();
 
var abril = new Array();
 
var mayo = new Array();
 
var junio = new Array();
 
var agosto = new Array();
 
var septiembre = new Array();
 
var diciembre = new Array();
 

Como veis en el archivo de configuracion se añaden los eventos a los arrays, y el otro es la configuracion del calendario.

¿Que podría hacer para que en vez de tenerlos que añadir a mano, pudiese obtenerlos de la Base de Datos, a la cual se los he introducido mediante un formulario?


Un saludo y Gracias de antemano.

PD: Creación: Tunait - Modificación: Flow89
PD2: Tambien consta de un archivo .CSS el cual no adjunto ya que no es necesario, si alguien lo quiere, que busquen en la página de Tunait o que me lo pidan a mi.

[GatorV]

Tema movido desde PHP a Javascript

[JavierB]

Creo que este mensaje estará mejor en el foro de PHP, porque con JavaScript no se pueden obtener datos de una base de datos.

Movido desde JavaScript.

Saludos,

[abimaelrc]

Una forma de lograrlo es usando los archivos de PHP e indicar un header que lo que vas a publicar sea javascript y las consultas a la base de datos lo haces en la estructura de PHP. Es decir algo así:

Código PHP:

<?php
header('Content-type: text/javascript;');
// aquí haces las consultas a la base de datos 
// y las almacenas en variables para luego mostrarla en el javascript
?>
//Código de javascript
 

Solo sería necesario que en vez de indicar en la página que muestras la información y llamas el .js lo llames con .php

Código HTML:

<script type="text/javascript" src="js.php"></script>