Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > Calendario interactivo con fechas programadas
20ene2011

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!

Por: Unknown
En Hace 14 años que se publicó
Etiquetas ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

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

Emoticons
Comenta con tu:
Comenta:

13 comentarios !

1
oscar dijo...

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

Hace NaN años
2
Unknown dijo...

Oscar, gracias parpadeo

Si te da problemas, me lo comunicas sonrisa

Hace NaN años
3
oscar dijo...

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

Hace NaN años
4
Unknown dijo...

Oscar!!

Tienes razón, gracias por reportamelo sonrisa , 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!

Hace NaN años
5
Intermedios en la Red dijo...

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!

Hace NaN años
6
Unknown dijo...

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 parpadeo mediante la acción de nuestros visitantes sonrisa ,

Hace NaN años
7
oscar dijo...

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

Hace NaN años
8
oscar dijo...

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

Hace NaN años
9
Unknown dijo...

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. parpadeo

Me cuentas como te fue!! saludos y buen da parpadeo .

Hace NaN años
10
oscar dijo...

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 parpadeo

Hace NaN años
11
oscar dijo...

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.

Hace NaN años
12
Unknown dijo...

Oscar, tienes mi permiso de llevarte el calendario a tu blog sonrisa .

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á sonrisa . Lo de las entradas recientes, trabajo en ello, pero no he podido publicarlo por un retraso de tiempo parpadeo

Suerte y saludos!

Hace NaN años
13
Anónimo dijo...

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.

Hace NaN años

Webfonts usar cualquier tipogr... Google facebook y yahoo realizar... Página Principal
Arriba
Junio
DomLunMarMiéJueVieSáb
Sitio certificado por
pulizie milano
lavoro ingegneria informatica