Proceso  PRO_CAL_GENERAR_SVG


// Tenemos una matriz de 7x7=49 celdas

// Cada celda mide 60x50px (total 420px ancho / 350px alto)

// La primera fila de 7 celdas son los días de la semana

var nAno = theRoot.varToInt("NAÑO");

var nMes = theRoot.varToInt("NMES");

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

var cMes = 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(nAno, nMes, 0).getDate();

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

var nColumnaDia1 = new Date(nAno, 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 cCitaAM = "", cCitaPM = "";

var cSVG = "", cColor = "", cStyle = "", dFecha = null;

var cColorDia = "Black";

var cColorFinSemana = "FireBrick";

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

// Tenemos que buscar las Citas en la tabla SVG_CAL_CITAS

var oCita = new VRegister(theRoot);

oCita.setTable(theApp.mainProjectInfo().alias().replace("APP","DAT") + "/SVG_CAL_CITAS");


// Recorremos los dias del mes

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) {

               // Dia laboral

        cStyle = "";

        cColor = cColorDia;

        // Rellenamos las Citas del día actual. Buscamos la fecha por el índice único FECHA

        // Pasamos la fecha como un String  AAAA-MM-DD

        dFecha = "" + nAno + "-" + ("0" + nMes).slice(-2) + "-" + ("0" + nDia).slice(-2);

        cCitaAM = "L";

        cCitaPM = "L";

        if (oCita.readRegister("FECHA",[dFecha],VRegister.SearchThis)) {

            cCitaAM = oCita.fieldToString("CITAS_AM");

            cCitaPM = oCita.fieldToString("CITAS_PM")

        }

        cSVG = cSVG + '      <use xlink:href="#' + cCitaAM + '" y="' + (nY-12-25) + '" x="' + (nX-30) + '" />\n';

        cSVG = cSVG + '      <use xlink:href="#' + cCitaPM + '" y="' + (nY-12) + '" x="' + (nX-30) + '" />\n';


        // nCita = parseInt(Math.random() * 3)

        // cSVG = cSVG + '      <use xlink:href="#' + aCitas[nCita] + '" y="' + (nY-12-25) + '" x="' + (nX-30) + '" />\n'

        // nCita = parseInt(Math.random() * 3)

        // cSVG = cSVG + '      <use xlink:href="#' + aCitas[nCita] + '" y="' + (nY-12) + '" x="' + (nX-30) + '" />\n'


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

        cSVG = cSVG + '      <use xlink:href="#ml" y="' + (nY-12-25) + '" x="' + (nX-30) + '" />\n'

    }

    else {

        cStyle = "font-weight: normal;";

        cColor = cColorFinSemana;

        // Dibujamos un marco sin la línea

        cSVG = cSVG + '      <use xlink:href="#ms" y="' + (nY-12-25) + '" x="' + (nX-30) + '" />\n'

    }

    cSVG = cSVG + '      <text style="' + cStyle + '" id="d' + nCasilla + '" y="' + nY +'" x="' + nX + '" fill="' + cColor + '">' + nDia + '</text>\n'

}

// Componemos el código svg completo

cSVG = svg_cabecera() + svg_nombre_mes() + svg_dias_semana() +

svg_dias_mes_ini(nMes) + cSVG + svg_dias_mes_fin() + svg_fin();

// Devolvemos el código svg al formulario

theRoot.setVar("CSVG_CAL",cSVG);



function svg_cabecera() {

    return '<svg id="calendario">\n\

   <!-- Las definiciones no se muestran, son símbolos que usaremos mediante xlink:href -->\n\

   <defs>\n\

      <path id="L" fill="Chartreuse" d="m0,0,60,0,0,25-60,0z"/>\n\

      <g id="P">\n\

         <path d="m0,0,60,0-60,25z" fill="LightCoral"/>\n\

         <path d="m0,25,60,0,0-25z" fill="Chartreuse"/>\n\

      </g>\n\

      <path id="O" fill="LightCoral" d="m0,0,60,0,0,25-60,0z"/>\n\

         <g id="ml">\n\

            <line x1="0" y1="25" x2="60" y2="25" stroke="Gray" stroke-opacity="0.5" stroke-width="1" />\n\

         <path stroke="DarkSlateGray" stroke-width="1" fill="none" d="m0,0,60,0,0,50-60,0z"/>\n\

      </g>\n\

         <g id="ms">\n\

         <path stroke="DarkSlateGray" stroke-width="1" fill="none" d="m0,0,60,0,0,50-60,0z"/>\n\

      </g>\n\

   </defs>\n'

}


function svg_nombre_mes() {

    return '\

      <text font-size="20px" fill="DimGray" \

 style="text-anchor:end;text-align:right;font-family:Arial,sans-serif;" \

 y="15" x="420">' + nAno + '</text>\n\

      <text font-size="25px" fill="RoyalBlue" \

 style="text-anchor:middle;text-align:center;font-family:Arial,sans-serif;" \

 y="20" x="210">' + cMes + '</text>\n'

}


function svg_dias_semana() {

    return '\

   <g id="dias_semana" font-size="20px" fill="#909090" \

 style="text-anchor:middle;text-align:center;font-family:Arial,sans-serif;">\n\

      <text id="c01" y="50" x="30">Lun</text>\n\

      <text id="c02" y="50" x="90">Mar</text>\n\

      <text id="c03" y="50" x="150">Mié</text>\n\

      <text id="c04" y="50" x="210">Jue</text>\n\

      <text id="c05" y="50" x="270">Vie</text>\n\

      <text id="c06" y="50" x="330">Sáb</text>\n\

      <text id="c07" y="50" x="390">Dom</text>\n\

   </g>\n'

}


function svg_fin() {

    return '</svg>\n'

}


function svg_dias_mes_ini(nMes) {

    return '   <g id="dias_mes_' + nMes + '" font-size="30px" \

 style="text-anchor:middle;text-align:center;font-family:Arial,sans-serif;font-weight:bold;">\n'

}


function svg_dias_mes_fin() {

    return '   </g>\n'

}


Created with the Personal Edition of HelpNDoc: Create HTML Help, DOC, PDF and print manuals from 1 single source