Páginas

26 enero 2011

Calendario interactivo con fechas programadas v1.6

Calendario

Si bien ya había publicado este calendario. Ahora les presento una version mas corregida del mismo Calendario. Es mayormente mas facil de utilizar y su aplicación difiere solo un poco de su antecesor.

Así que si me acompañas a ver que es lo que tiene de nuevo el calendario, te aseguro que te divertiras al usarlo al igual que un servidor al programarlo xD. El resultado final es este:

En sí este un resumen de las modificaciones:

  1. Posibilidad de cambiar de mes con el click de un boton
  2. Posibilidad de colocar los mensajes de la forma: 12/9/2011~Mensaje

Son pocas las modificaciones pero seguro que serán de gran utilidad para alguien.

/!\ 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(a){var n=a.entry;santyDBCal=(("summary"in n)?n.summary.$t:n.content.$t)};function getDaysRec(d,m,a){var b=santyDBCal;var c=b.split(',');var e,tmp;for(var i=0;i<c.length;i++){e=c[i].split('~');if(e[0]==d+"/"+m+"/"+a){tmp=e[1]}}if(tmp!==""&&tmp!==undefined&&tmp!==null){return(tmp)}else{return(null)}}function arrayOfDaysInMonths(a){this[0]=31;this[1]=28;if(a)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(a,b){var c=(((b%4==0)&&(b%100!=0))||(b%400==0));var d=new arrayOfDaysInMonths(c);return d[a]}function calendar(a,b,c,d){var e="",o;var f=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];var g=new Date();var h=(a!==undefined)?a:g.getDate();if(b<1){b=12;c--}else if(b>12){b=1;c++}var j=(b!==undefined)?b-1:g.getMonth();if(j<0){j=11;c--}else if(j>11){j=0;c++}c=(c!==undefined)?c:g.getYear();if(c<=2000){c=(Math.floor(c/100)*2000)+(c-100)}g=new Date(c,j,h);var k=daysInMonth(j,c);var l=g;l.setDate(1);var m=l.getDay();var n=0;e+="<center>";e+="<table id='santyCalendary'>";e+="<tr><th colspan=7>";var o=b-1;e+="<input style='float:left;' type='button' value='<' onclick='javascript:calendar("+a+","+o+","+c+");'></input> ";e+=f[j]+" "+c;o=b+1;e+="<input style='float:right;' type='button' value='>' onclick='javascript:calendar("+a+","+o+","+c+");'></input> ";e+="<tr><th>Dom<th>Lun<th>Mar<th>Mié<th>Jue<th>Vie<th>Sáb";e+="<tr>";for(i=1;i<=m;i++){e+="<td>";n++}var s,ts;for(i=1;i<=k;i++){s=i;ts=0;if(s==a){s="<b>"+s+"</b>";ts=1}if(getDaysRec(i,b,c)!==null){s="<td class='santyRem' onmouseover='javascript:dayClick(\""+b+"\",\""+i+"\",\""+c+"\");'><a href='javascript:;'>"+s+"</a>";ts=0}s=(ts==1||s==i)?"<td>"+s:s;e+=s;if(++n==7){e+="<tr>";n=0}}e+="</table></center>";d=(d===undefined)?document.getElementById('santyCalCntMes').innerHTML=e:document.write(e)}function dayClick(a,b,c){var d=document.getElementById('santyCalCntMsj');var e=getDaysRec(b,a,c);if(e!==null&&e!==""&&e!==undefined){d.innerHTML=e}else{d.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:
<div id='santyCalCntMes'><script type='text/javascript'>calendar(new Date().getDay(),new Date().getMonth(),new Date().getYear(),0);</script></div>
<div style='width:500px;margin:auto;padding:30px;border:1px dashed black;' id='santyCalCntMsj'></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:
1/1/2011~Primero de enero del 2011,19/1/2012~19 de enero del 2012,1/4/2011~Primero de abril del 2011

Donde:
1: Es el dia del mes, donde saldrá el mensaje
1: Es el mes del año. [1=Enero],[2=Febrero],etc
2012: Es el año del mensaje

~
:es el separador, separa la fecha del mensaje con el mensaje

Primero de enero del 2011: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

Actualización de la version anterior

[1] Para actualizar debes, deshacer el paso número [3] de Calendario v1.0 y hacer el paso número [3] de esta entrada.

[2] Para actualizar debes, deshacer el paso número [6] de Calendario v1.0 y hacer el paso número [6] de esta entrada.

[3] Por último debes editar el post en el que están los mensajes y colocar las fechas de la forma: dd/mm/aa:

12/5/2011~12 de mayo del 2011,3/12/2015~Tres de enero del 2015



Una vez realizadas las modificacion tu calendario debe funcionar a la perfección

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

8 comentarios:

  1. Que bueno que sea el primero en comentar xD
    te estoy muy agradecido por tu ayuda (lo de la linea) y ahora te sigo de cerca para ver tus aportes.
    pero este mejora al otro en gran manera y ya lo actualice y se ve bien.
    solo un problemita cuando modifique la etiqueta ultima no se puede quedar en mayúscula las letras necesarias y entonces decidí cambiar las demas otras con minusculas y ya funcionó pero se ve el mensaje en el lado izquierdo, me podrias ayudar con eso no puedo cambiar a mayusculas, y quisiera que el mensaje se vea centrado.
    una manito ps amigo.
    y Gracias de ante mano.

    ResponderBorrar
  2. oscar, que tal, gracias por actualizar de version. Si pudiste actualizar de versuin sin problemas quiere decir que no omití ninguna info.

    Para que se centre el mensaje de tu calendario, puedes agregar lo siguiente a:
    <div style="text-align:center;width:200px;margin:auto;padding:30px;border:1px dashed black;" id="santycalcntmsj">

    Agrega el texto resaltado al código y estará centrado para el final del dia!!

    Suerte, y nos vemos en la próxima!

    ResponderBorrar
  3. que buen calendario amigo, por mucho uno de los mejores que he visto +10

    ResponderBorrar
  4. buenas, soy muy muy muy nueva en esto, pero la verdad es que no encuentro el cierre de etiqueta ... una ayuda por favor...

    ResponderBorrar
  5. hola como va todo bien??? necesito hacerte una consulta... agregue el calendario a un blog de prueva... y quedo re bonito pero cuado quise hacer la prueba de publicar el primer comentario no supe como hacerlo... ¿no me podrias explicar un poquito mas esa parte?
    y ademas nose si esta bien pero actualice la fecha desde el html porque me aparecia 1 de ene de 2011, hay va mi segunda pregunta ¿se actualiza la fecha o lo tiene que acer uno?
    este es el blog:
    http://diegotedeschi0.blogspot.com/
    bueno por el momento eso es todo... muchas gacias...

    ResponderBorrar
  6. Diego Tedeschi, bienvenido!

    Acabo de actualizar los códigos del calendario, anteriormente como hiciste tu se actualizaba manualmente la fecha. Pero ya es posible que se actualice automáticamente de acuerdo con la fecha de nuestros visitantes.

    Desafortunadamente necesitarás instalar el Calendario de nuevo :P

    Suerte ;)

    ResponderBorrar
  7. todo instalado según instrucciones, pero las flechas de cambio de mes no funcionan...A alguien más le pasa???

    ResponderBorrar

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