Plantilla HTML del Calendario

Esta es la plantilla con el código HTML, SVG y JavaScript que mostrará el Calendario en el Visor HTML y nos permitirá hacer cambios que se guardan directamente en la tabla de Velneo.

Desde Velneo generamos la información necesaria y la incluímos entre los marcadores

Desde el Visor HTML pasamos información a Velneo usando un String JSON que asignamos a la propiedad href de un objeto del HTML (id:"EtiquetaMensaje") . Mediante la función simularClick() forzamos un evento Click en el objeto id:"EtiquetaMensaje" y Velneo podrá capturar ese evento y leer el String JSON de la variable local EVENT_PARAMS[1].

Para la gestión del código svg he usado la librería snap SVG (snap.svg-min.js) que bajo el paradigma de la POO facilita enormemente la creación de elementos SVG así como la transformación y animación de dichos elementos. Es una librería de libre uso, patrocinada por Adobe, muy sencilla y desde luego mucho más productiva, de momento, que usar QML.

<!doctype html>

<html>

<head>

<style>

#grafico_marco {

height: 80%;

border: 0 solid;

padding: 20px;

}

#calendario {

margin-top: 0;

}

</style>

<title>Calendario</title>

<!-- Opciones iniciales del Calendario (se determinan en Velneo)

Desde Velneo sustituímos el código entre los marcadores -->

/////////////////////////////////////////////////////////////////////////////////////

var cViewBox = "0 0 420 365";

var cPreserveAspectRatio = "xMidYMin meet";

var nMes = 3;

var nAño = 2015;

var meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];

var aDiasSemana = ["Lun","Mar","Mié","Jue","Vie","Sáb","Dom"];

var oCitas = {

D5:["P","O"],

D10:["L","P"],

D12:["P","O"],

D18:["O","O"],

D19:["P","L"],

D24:["P","P"],

D27:["L","P"],

}

/////////////////////////////////////////////////////////////////////////////////////

</script>

window.addEventListener("load", inicio, false);

///////////////// Variables globales

var cEstiloTexto = "text-anchor:middle;text-align:center;font-family:Arial,sans-serif;cursor:default;"

var cEstiloTitulo = "font-size:25;" + cEstiloTexto;

var cEstiloAño = "font-size:15;text-anchor:end;text-align:right;font-family:Arial,sans-serif;cursor:default;"

var cEstiloDiaSemana = "font-size:15;" + cEstiloTexto;

var cEstiloCasilla = "font-size:30;font-weight:bold;" + cEstiloTexto;

var cTitulo = meses[nMes - 1].toUpperCase();

// Pasar 0 con el mes siguiente, con getDate() obtenemos el Nº de días del mes anterior

var nDiasMes = new Date(nAño, nMes, 0).getDate();

// El día de la semana es 0 para el domingo

var nColumnaDia1 = new Date(nAño, nMes-1, 1).getDay();

nColumnaDia1 = nColumnaDia1 == 0 ? 7 : nColumnaDia1;

// nDesplazamiento es la celda correspondiente al día 1 del mes

var nDesplazamiento = 7 + nColumnaDia1;

var nDia = 0, nCasilla = 0, nFila = 0, nColumna = 0, nX = 0, nY = 0, nCita = 0;

var cColor = "", cStyle = "";

var cColorDia = "Black";

var cColorFinSemana = "FireBrick";

var aCitas = ["L","P","O"];

var cCita = ""

//////// Objeto JSON para enviar Mensajes a JSON

// Pasamos Año, Mes y Día / Acción EDITAR / Período AM o PM / Citas L,P,O

var oJSONMensaje = {OBJETO:"CALENDARIO",AÑO:0,MES:0,DIA:0,ACCION:"",PERIODO:"",CITA:""};

var oLinkEtiqueta = null

function inicio() {

var oCanvas = Snap(calendario);

// Snap("#AM1").click(function(){this.attr({"xlink:href":"#O"});})

// Snap("#PM1").click(function(){this.attr({"xlink:href":"#P"});})

cargar_svg(oCanvas)

// Creamos un elemento Link (<a>) que está por encima del Calendario y

// capturará el Link cuando hacemos click en las Citas

oLinkEtiqueta = oCanvas.el("a",{id:"EtiquetaMensaje","xlink:href":"#"});

}

function cargar_svg(oCanvas) {

// Título del Mes y aspecto del canvas SVG

oCanvas.attr("viewBox",cViewBox);

oCanvas.attr("preserveAspectRatio",cPreserveAspectRatio);

oCanvas.text(210,20,cTitulo).attr({fill:"RoyalBlue",style:cEstiloTitulo});

oCanvas.text(420,15,nAño).attr({fill:"DimGray",style:cEstiloAño});

//////////// Definiciones para los símbolos de las Citas

oCanvas.path("m0,0,60,0,0,25-60,0z").attr({id:"DEF_L",fill:"Chartreuse",cursor:"hand"}).toDefs();

oCanvas.g(

oCanvas.path("m0,0,60,0-60,25z").attr({fill:"LightCoral",cursor:"hand"}),

oCanvas.path("m0,25,60,0,0-25z").attr({fill:"Chartreuse",cursor:"hand"})

).attr({id:"DEF_P"}).toDefs();

oCanvas.path("m0,0,60,0,0,25-60,0z").attr({id:"DEF_O",fill:"LightCoral",cursor:"hand"}).toDefs();

//////////// Definiciones para los recuadros de las Casillas

oCanvas.g(

oCanvas.line(0,25,60,25).attr({stroke:"Gray","stroke-opacity":0.5,"stroke-width":1}),

oCanvas.path("m0,0,60,0,0,50-60,0z").attr({stroke:"DarkSlateGray","stroke-width":1,fill:"none"})

).attr({id:"ml"}).toDefs();

oCanvas.path("m0,0,60,0,0,50-60,0z").attr({id:"ms",stroke:"DarkSlateGray","stroke-width":1,fill:"none"}).toDefs();

//////////// Días de la semana

var oDiasSemana = oCanvas.g().attr({fill:"#909090",style:cEstiloDiaSemana});

for (i = 0; i < 7; i++) {

oDiasSemana.add(oCanvas.text(30+(i*60),50,aDiasSemana[i]))

}

//////////// Casillas del Calendario

var oCasillas = oCanvas.g().attr({style:cEstiloCasilla});

for (i = 0; i < (nDiasMes); i++) {

nDia = i + 1;

nCasilla = i + nDesplazamiento;

nFila = parseInt(nCasilla / 7) + (nCasilla%7 == 0 ? 0 : 1);

nColumna = nCasilla%7 == 0 ? 7 : nCasilla%7;

nX = -30 + (60 * nColumna);

nY = 50 * nFila;

if (nColumna < 6) {

cStyle = "";

cColor = cColorDia;

///////// Rellenamos las Citas del día actual para AM y PM

// Seleccionamos un elemento de Defs y lo añadimos al grupo con use()

// Buscamos el registro con las Citas de nDia

cCita = "L"

if (oCitas["D" + nDia]) {

cCita = oCitas["D" + nDia][0];

poner_cita(nDia,"AM",cCita,nX-30,nY-12-25);

cCita = oCitas["D" + nDia][1];

poner_cita(nDia,"PM",cCita,nX-30,nY-12);

}

else {

poner_cita(nDia,"AM",cCita,nX-30,nY-12-25);

poner_cita(nDia,"PM",cCita,nX-30,nY-12);

}

// Dibujamos un marco con una línea que separa mañana y tarde

oCasillas.append(oCanvas.select("#ml").use().attr({x:nX-30,y:nY-12-25}));

}

else {

cStyle = "font-weight: normal;";

cColor = cColorFinSemana;

// Dibujamos un marco sin la línea

oCasillas.append(oCanvas.select("#ms").use().attr({x:nX-30,y:nY-12-25}));

}

oCasillas.add(oCanvas.text(nX,nY,nDia).attr({fill:cColor,style:cStyle}))

}

function poner_cita(nDia,cPeriodo,cCita,nX,nY) {

var oCita = oCanvas.select("#DEF_" + cCita).use().attr({x:nX,y:nY});

oCita.data("DIA",nDia)

oCita.data("PERIODO",cPeriodo)

oCita.data("CITA",cCita)

oCita.click(cita_click)

oCasillas.append(oCita);

}

function cita_click() {

// Cambiamos la Cita L -> P -> O -> L

var csCita = this.data("CITA");

var cCita = (csCita=="L" ? "P" : (csCita=="P" ? "O" : "L"));

var nX = this.attr("x");

var nY = this.attr("y");

var nDia = this.data("DIA");

var cPeriodo = this.data("PERIODO");

var oCita = oCanvas.select("#DEF_" + cCita).use().attr({x:nX,y:nY});

oCita.data("DIA",nDia)

oCita.data("PERIODO",cPeriodo)

oCita.data("CITA",cCita)

oCita.click(cita_click)

// Añadimos la nueva Cita y quitamos la actual

this.after(oCita);

this.remove();

// Simulamos el Click sobre la Etiqueta del Shape

mensaje_JSON(nDia, "editar", cPeriodo, cCita);

}

// MENSAJE A VELNEO. Mediante la simulación de un Click en la Cita

function mensaje_JSON(nDia, cAccion, cPeriodo, cCita) {

// Usamos la etiqueta oLinkEtiqueta creada encima del Calendario para

// simular un click y pasar a Velneo un JSON

// En href pasamos un JSON para que lo interprete Velneo

oJSONMensaje.AÑO = nAño;

oJSONMensaje.MES = nMes;

oJSONMensaje.DIA = nDia;

oJSONMensaje.ACCION = cAccion;

oJSONMensaje.PERIODO = cPeriodo;

oJSONMensaje.CITA = cCita;

oLinkEtiqueta.attr("xlink:href",JSON.stringify(oJSONMensaje));

// Simulamos el Click sobre la Etiqueta

simularClick("EtiquetaMensaje")

// alert(JSON.stringify(oJSONMensaje))

}

function simularClick(cIDObjeto){

// Simulamos el evento click sobre el objeto cIDObjeto

var nouEvent = document.createEvent("MouseEvents");

nouEvent.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);

var objecte = document.getElementById(cIDObjeto);

objecte.dispatchEvent(nouEvent);

}

</script>

</head>

<body>

</svg>

</div>

</body>

</html>

Created with the Personal Edition of HelpNDoc: Easily create Web Help sites