Páginas

20 enero 2011

Calendario interactivo con fechas programadas

/!\ Existe una versión mas actualizada que esta en:
Calendario Ineractivo con fechas programadas v1.6

/!\Si ya instalaste esta versión, revisa esto para actualizar a la nueva version de este mismo calendario:
Actualizar de Calendario Ineractivo con fechas programadas v1.0 a v1.6

Calendario

Hace ya bastante tiempo, el usuario ●๋•╣ҜΞҜΘ╠●๋•, me habia consultado acerca de como realizar un calendario para que nuestros visitantes supieran de manera adelantada lo que va a postear, o lo que se tiene programado para cierta fecha, en si la consulta es la siguiente:

Tenía una duda, bueno más bien una petición. ¿Podrías enseñar como se hace un calendario con enlaces?

Me explico, un calendario, con los dias del mes, con cuadrícula y que en cada cuadro se pudiera poner un enlace. a modo de presentar lo que se estrena o de lo que se va hablar (y de lo que se ha hablado) en el blog a lo largo del año.


/!\ Te recomiendo que primero leas con atencion la siguiente entrada para que observes que es lo que hay que hacer. Despues aplicalo ;P

Gracias a este comentario, aqui les presento la PRIMERA version de dicho calendario, desarrollado por mi claro xD. Se puede aplicar de varias maneras, la que me gusta mas es la siguiente:

[1] Entramos al panel de Diseño>Edicion HTML> Sin expandir las plantillas de artilugios.

[2] Luego buscamos con
Ctrl+F
: </head>

[3] Justo antes de la etiqueta colocamos el siguiente código:
<script language="JavaScript">/*<![CDATA[*/var santyDBCal;function getSantyDBCal(json){var n=json.entry;santyDBCal=(("summary" in n)? n.summary.$t : n.content.$t);};function getDaysRec(d,m){var str=santyDBCal;var tmp1=str.split(',');var tmp2,tmp;for(var i=0;i<tmp1.length;i++){tmp2=tmp1[i].split('~');if(tmp2[0] == "m" + m + "d" + d){tmp=tmp2[1];}}if(tmp !== "" && tmp !== undefined && tmp !== null){return(tmp);}else{return(null)}}function arrayOfDaysInMonths(isLeapYear){this[0]=31;this[1]=28;if (isLeapYear)this[1]=29;this[2]=31;this[3]=30;this[4]=31;this[5]=30;this[6]=31;this[7]=31;this[8]=30;this[9]=31;this[10]=30;this[11]=31;}function daysInMonth(month, year) {var isLeapYear = (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0));var monthDays  = new arrayOfDaysInMonths(isLeapYear);return monthDays[month];}function calendar() {var monthNames=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];var today=new Date();var day=today.getDate();var month=today.getMonth();var year=today.getYear();var numDays=daysInMonth(month, year);var firstDay=today;firstDay.setDate(1);var startDay = firstDay.getDay();var column = 0;document.write("<CENTER>");document.write("<TABLE id='santyCalendary'>");document.write("<TR><TH COLSPAN=7>");document.write(monthNames[month]);document.write("<TR><TH>Dom<TH>Lun<TH>Mar<TH>Mié<TH>Jue<TH>Vie<TH>Sáb");document.write("<TR>");for (i=1; i < startDay; i++){document.write("<TD>");column++;}for (i=1; i <= numDays; i++){var s = "<TD>" + i;if (getDaysRec(i,month)!==null){s = "<TD class='santyRem' onmouseover='javascript:dayClick(\"" + month + "\",\"" + i + "\");'><a href='javascript:;'>" + i + "</a>";}document.write(s);if (++column == 7){document.write("<TR>");column = 0;}}document.write("</TABLE>");document.writeln("</CENTER>");}function dayClick(mes,day){var santyCnt=document.getElementById('santyCntCalRem');var santyRem = getDaysRec(day,mes);if (santyRem !== null && santyRem !== "" && santyRem !== undefined ) {santyCnt.innerHTML=santyRem;}else{santyCnt.innerHTML="";}}/*]]>*/</script>

<script src='http://NOMBRE_DEL_BLOG.blogspot.com/feeds/posts/default/ID_DEL_POST?alt=json-in-script&amp;callback=getSantyDBCal' type='text/javascript'></script>

Donde:
NOMBRE_DEL_BLOG: se sobreentiende ;P
ID_DEL_POST Este es el ID del post(ver mas abajo).

[4] Despues buscamos con
Ctrl+F
: </b:skin>

[5] Y antes de la etiqueta anterior colocamos esto:
#santyCalendary{
border:1px solid black;
text-align:center;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#santyCalendary tr{
border-collapse:collapse;
}
#santyCalendary a{
text-decoration:none;
color:black;
}
.santyRem{
background:black;
}
.santyRem a{
color:white !important;
}
[6] Despues donde queramos colocar el calendario, podremos colocar el siguiente código en cualquier parte de nuestro blog:
<script language="JavaScript">calendar();</script>
<div style='width:200px;margin:auto;padding:30px;border:1px dashed black;' id='santyCntCalRem'></div>


[7]Ahora lo que queda es realizar un post, que será como una base de datos de nuestro calendario. Debe tener la siguiente configuracion:
m0d1~Primero de enero,m0d19~19 de enero,m5d1~Primero de Abril

Donde:

m0
:una "m" seguida del numero de mes, empezando enero con "0"
d1
:una "d" seguida del numero del dia
~
:es el separador, separa la fecha del mensaje con el mensaje
Primero de enero:Mensaje que saldrá en el dia especificado

  • Algo importante es que no puede haber espacios, únicamente en el mensaje.
  • Todos estan separados con una coma ",".
  • Los mensajes pueden tener espacios, enlaces, imagenes, videos.
El post lo podemos poner con una fecha atrasada, para que no salga sino hasta el final de nuestro blog:

Entrada pasada

[8] Por ultimo, en el paso número 3, en ID_DEL_POST, podemos averiguar cual es la ID del post, si despues de publicar hacemos click en "Editar":

Click en editar la entrada

Despues en la barra de direcciones podremos ver con éxito la ID de nuestro post:

Ver la barra de direcciones

Ese número tan largo, es el que pondremos en el lugar "ID_DEL_POST" del paso 3

/!\ Esta un poco compliacado, así que no te desesperes y si tienes alguna duda, sugerencia o problema al instalar el calendario no dudes en comentarlo!. Ayudame a mejorarlo xD!

13 comentarios:

  1. esta muy bueno
    felicidades
    con tu permiso lo pondre en práctica
    y lo llevare a mi blog

    ResponderBorrar
  2. Oscar, gracias ;)

    Si te da problemas, me lo comunicas xD

    ResponderBorrar
  3. amigo vuelvo a repetir
    tu aporte esta buenaso
    pero
    al ir colocando paso a paso tus las instrucciones me salio este error en el diseño del blog:

    La referencia a la entidad "callback " debe terminar con el ';' delimitador.

    entonces le puse el punto y coma, pero sale otro error:

    La entidad "callback " se hace referencia, pero no declaró.

    obiamente en ingles... helpme compadre

    ResponderBorrar
  4. Oscar!!

    Tienes razón, gracias por reportamelo xD, el problema se arregla al realizar de nuevo el paso [3](número tres). Borra el código que implementaste anteriormente y el problema quedará resuelto.

    Saludos!

    ResponderBorrar
  5. Hola!, está interesante lo del calendrio; pero mi pregunta es: ¿hay que realizar los mismos pasos por cada post que publiquemos?... tengo un blog sobre espectáculos culturales; mi idea es que exista un calendario en el que precisamente como apuntas: cada día marque un evento. Pero quisiera hacerlo por mes y luego borrarlo todo y hacer el nuevo mes. porque no me sirve de nada tener archivados eventos que ya pasaron... qué me recomiendas hacer?... Hay un sitio web, en el que realizas calendarios interactivos como lo que yo necesito. Pero cuando terminas de editar todo, te sale un código en html que la verdad no sé cómo hacerle, ni en dónde ponerlo. Esta es la página que te digo: http://www.localendar.com/calendar/signup
    Y éste es mi bloG, que apenas estoy haciendo: http://intermediosenlared.blogspot.com
    Espero tus comentarios y muchas gracias!

    ResponderBorrar
  6. MI FAMILIA, bienvenido!!

    Interesante tu propuesta, si quieres que el calendario no muestre fechas simplemente debes de editar la entrada que creaste en el paso numero [7] y borrar el mensaje que se muestra en el dia y mes que no quieres.

    Es decir, como ejemplo tomaré el texto de la entrada del paso [7]:

    m0d1~Primero de enero,m0d19~19 de enero,m5d1~Primero de Abril

    Ahora si quisiera eliminar los mensajes de las fechas importantes, del mes de enero, tendría que editar la entrada y eliminar todos lo mensajes cuyas fechas tengan "m0":

    m0d1~Primero de enero,m0d19~19 de enero,m5d1~Primero de Abril

    Y la entrada me quedaría de esta forma:

    m5d1~Primero de Abril

    Puedes utilizar este calendario o puedes esperar un poco ya que actualmente trabajo en un calendario que cambie de mes y de año ;) mediante la acción de nuestros visitantes xD,

    ResponderBorrar
  7. sabes ya esta bien el codigo
    pero creo que estoy haciednoalgo mal me das una mano estoy en linea toda la mañana mi blog es este dibuoc.blogspot.com.
    puse el calendario en el footer pero sale algo mal espero tu indicacion para poder tener una vista mejor

    ResponderBorrar
  8. bueno ya me las arregle pero ahora el problemita esta en que el mensaje del dia no se muestra que puedo hacer?

    ResponderBorrar
  9. oscar, que tal, se ve muy bien el calendario. El error esta en que tienes la siguiente etiqueta:

    <div style='width:200px;margin:auto;padding:30px;border:1px dashed black;' id='santycntcalrem'></div>

    En donde la id='' esta mal, debe tener como valor: id='santyCntCalRem'

    Te quedará de la siguiente manera:

    <div style='width:200px;margin:auto;padding:30px;border:1px dashed black;' id='santyCntCalRem'></div>

    La diferencia esta en que en tu código está todo en minúsculas y el código del calendario solo reconoce donde se va a mostrar el mensaje si el id esta con mayúsculas. ;)

    Me cuentas como te fue!! saludos y buen da ;).

    ResponderBorrar
  10. amigo
    segui tu consejo pero no me reconoce el cambio lo qeu hice fue cambiar a minusculas, pero lo seguiere probando porque no esta centrado, y si me puedes ayudar te lo agradeceria, un favor mas hay una linea que me quedo despues de hacer unos cambios en mi plantilla y no me gusta que este que debo hacer.
    si no fuera mucha molestia...

    y tambien quiero llevar a mi blog tu calendario, para mostrarlo a los que ven mi blog aunque todabia no son muchos ejeje, y siempre respetando el autor, si es posible amigo con tu permiso claro ;)

    ResponderBorrar
  11. sabes es genial que despues de mucho alguien responda a mis comentarios y me ayuda, de ante mano te enlasare a mi blog.
    gracias por todo y una cosita como puedo hacer para tener un gadget como el tuyo de las entradas recientes. otra ves gracias.

    ResponderBorrar
  12. Oscar, tienes mi permiso de llevarte el calendario a tu blog xD.

    Para lo de la linea, puedes entrar en Diseño > Edicion HTML

    Buscar mediante 'Ctrl+F': .footer-fauxborder-left

    Encontrarás lo siguiente:

    .footer-fauxborder-left {
    border-top: 1px solid #000000;
    background: transparent none repeat scroll 0 0;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);

    margin: 0 -20px;
    }

    Puedes eliminar la propiedad marcada: border-top: 1px solid #000000;

    Quedará una sombra, si tambien quieres eliminarla, elimina del mismo código lo siguiente marcado:

    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);


    Y esa linea desaparecerá xD. Lo de las entradas recientes, trabajo en ello, pero no he podido publicarlo por un retraso de tiempo ;)

    Suerte y saludos!

    ResponderBorrar
  13. Post interessante aqui, textos deste modo emotivam a quem quer que analisar neste espaço :/
    Dá muito mais do teu blogue, a todos os teus seguidores.

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.