Quickribbon

viernes, 20 de abril de 2007

Calendario de Posts

Si veis el calendario que hay en la primera columna lateral de esta misma página podreis ver más o menos de lo que se trata. Este truco consigue sustituir el sistema de "archivos" de blogger por un calendario interactivo en el que podremos revisar nuestras entradas en función de la fecha. El truco requiere un par de incursiones por la plantilla, pero se pueden hacer en un mismo paso. Lo único que hay que hacer, como siempre, es hacer previamente una copia de nuestra plantilla para evitar problemas y después nos ponemos manos a la obra.



Localizamos en nuestra plantilla el cierre </head> y nos ponemos a trabajar justo encima. El truco consta de dos códigos que para ahorrar tiempo pondremos en un solo paso:

<!-- CODIGO CALENDARIO -->
<!-- PARTE 1 -->
<script src='http://yui.yahooapis.com/2.2.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.2.0/build/calendar/calendar-min.js' type='text/javascript'/>
<link href='http://yui.yahooapis.com/2.2.0/build/calendar/assets/calendar.css' rel='stylesheet' type='text/css'/>
<!-- FIN DE PARTE 1 -->
<!-- PARTE 2 -->
<script type='text/javascript'>
//<![CDATA[
/*
Created by: PurpleMoggy
http://purplemoggy.blogspot.com
*/

var _yourBlogUrl = "http://karalletest.blogspot.com"; //edit this
var _yourBlogTimeZone = "+01:00"; //edit this

_yourBlogTimeZone = encodeURIComponent(_yourBlogTimeZone);

var _dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

YAHOO.namespace("example.calendar");

function cal1Init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.addMonthRenderer(1, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(2, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(3, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(4, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(5, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(6, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(7, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(8, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(9, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(10, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(11, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.addMonthRenderer(12, YAHOO.example.calendar.cal1.renderBodyCellRestricted);
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.changePageEvent.subscribe(myChangePageHandler, YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.renderEvent.subscribe(syncMonthYear);
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
};


var myChangePageHandler = function(type,args,obj) {
var month = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth() + 1;
if (month.toString().length == 1) {
month = "0" + month;
}
var year = YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear();

document.getElementById("cal1Titles").innerHTML = "";
_dayTitles = new Array("","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","");

checkPostsForMonth(month, year);
};

function checkPostsForMonth(month,year) {
document.getElementById("cal1loadimg").style.display = "block";

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=checkPostsCallback&published-min=" + year + "-" + month + "-01T00%3A00%3A00" + _yourBlogTimeZone + "&published-max=" + year + "-" + month + "-31T23%3A59%3A59" + _yourBlogTimeZone + "&max-results=100";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};

function checkPostsCallback(json) {

if (json.feed.entry) {
for(i = 0; i < json.feed.entry.length; i++) {
var month = json.feed.entry[i].published.$t.substr(5,2);
var year = json.feed.entry[i].published.$t.substr(0,4);
var day = json.feed.entry[i].published.$t.substr(8,2);
var date = month + "/" + day + "/" + year;
var href = json.feed.entry[i].link[0].href;
var title = json.feed.entry[i].title.$t;

if (day.substr(0,1) == "0") {
day = day.substr(1);
}

document.getElementById("cal1Titles").innerHTML += "<li><a href='" + href + "'>" + title + "</a>";
_dayTitles[day] += "<li><a href='" + href + "'>" + title + "</a>";

YAHOO.example.calendar.cal1.addRenderer(date, myCustomRenderer);

}
YAHOO.example.calendar.cal1.render();
}

document.getElementById("cal1loadimg").style.display = "none";

};


function showDayTitles(day) {
document.getElementById("cal1Titles").innerHTML = _dayTitles[day];
}


var myCustomRenderer = function(workingDate, cell) {

var day = workingDate.toString().substr(8,2);
if (day.substr(0,1) == "0") {
day = day.substr(1);
}


cell.innerHTML = '<div onmouseover="showDayTitles(' + day + ');"><a href="javascript:void(null);" >' + YAHOO.example.calendar.cal1.buildDayLabel(workingDate) + "</a></div>";
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_SELECTABLE);
YAHOO.util.Dom.addClass(cell, YAHOO.example.calendar.cal1.Style.CSS_CELL_HIGHLIGHT1);
return YAHOO.widget.Calendar.STOP_RENDER;


}

var mySelectHandler = function(type,args,obj) {
var dates = args[0];
var date = dates[0];
var year = date[0];
var month = date[1];
if (month.toString().length == 1) {
month = "0" + month;
}
var day = date[2];

var element = YAHOO.util.Dom.getElementsByClassName("d" + day, "td", "cal1Container")[0];

if (day.toString().length == 1) {
day = "0" + day;
}

if (element.className.indexOf("highlight1") != -1) {
window.location = _yourBlogUrl + "/search?updated-min=" + year + "-" + month + "-" + day +
"T00%3A00%3A00" + _yourBlogTimeZone + "&updated-max=" + year + "-" + month + "-" + day +
"T23%3A59%3A59" + _yourBlogTimeZone;
}

};

var changeDate = function() {
YAHOO.example.calendar.cal1.setMonth(parseInt(YAHOO.util.Dom.get("cal1monthselect").value));
YAHOO.example.calendar.cal1.setYear(parseInt(YAHOO.util.Dom.get("cal1yearselect").value));
YAHOO.example.calendar.cal1.render();
myChangePageHandler();
}

var syncMonthYear = function(type) {
YAHOO.util.Dom.get("cal1monthselect").value = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getMonth());

var fullYear = parseInt(YAHOO.example.calendar.cal1.cfg.getProperty("pagedate").getFullYear());

var isYearFound = false;
var i = 0;
while(i < document.getElementById("cal1yearselect").options.length && !isYearFound) {
if (document.getElementById("cal1yearselect").options[i].value == fullYear) {
isYearFound = true;
}
i++;
}
if (!isYearFound) {
var option = document.createElement("option");
option.setAttribute("value", fullYear);
var text = document.createTextNode(fullYear);
option.appendChild(text);
document.getElementById("cal1yearselect").appendChild(option);
}

YAHOO.util.Dom.get("cal1yearselect").value = fullYear;
};

YAHOO.util.Event.addListener(window, "load", cal1Init);
YAHOO.util.Event.addListener("cal1dateselect", "click", changeDate);
//]]>
</script>
<!-- FIN DE PARTE 2 -->

Las zonas en rojo se corresponden con la dirección de la página donde lo instalemos y con la zona horaria en la que publicamos los posts.

Después, una vez guardada la plantilla vamos a la página de diseño y añadimos un elemento como HTLM al que podemos titular como mejor nos convenga. El Widget en cuestión es este:

<div id="cal1wrapper">

<div id="cal1select">

<select id="cal1monthselect" name="cal1monthselect">
<option value="0"/>Enero
<option value="1"/>Febrero
<option value="2"/>Marzo
<option value="3"/>Abril
<option value="4"/>Mayo
<option value="5"/>Junio
<option value="6"/>Julio
<option value="7"/>Agosto
<option value="8"/>Septiembre
<option value="9"/>Octubre
<option value="10"/>Novimbre
<option value="11"/>Diciembre
</select>
<select id="cal1yearselect" name="cal1yearselect">
<option value="1995"/>1995
<option value="1996"/>1996
<option value="1997"/>1997
<option value="1998"/>1998
<option value="1999"/>1999
<option value="2000"/>2000
<option value="2001"/>2001
<option value="2002"/>2002
<option value="2003"/>2003
<option value="2004"/>2004
<option value="2005"/>2005
<option value="2006"/>2006
<option value="2007"/>2007
<option value="2008"/>2008
<option value="2009"/>2009
<option value="2010"/>2010
<option value="2011"/>2011
<option value="2012"/>2012
<option value="2013"/>2013
<option value="2014"/>2014
<option value="2015"/>2015
<option value="2016"/>2016
<option value="2017"/>2017
<option value="2018"/>2018
<option value="2019"/>2019
</select>
<input id="cal1dateselect" value="-->" type="button"/>

</div>

<div id="cal1Container"><img style="vertical-align:middle;
" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Loading...</div>

<div style="clear:both;"></div>

<div id="calbackloadimg">
<pre id="cal1loadimg" style="display:none;"><img style="vertical-align:middle;" src="http://img239.imageshack.us/img239/9057/40lf8.gif"/> Cargando...</pre>
<pre id="cal1Titles"></pre>
</div>

</div>

Un vez ubicado en donde más nos guste y guardados los cambios ya estará listo. Tenemos un estupendo sistema de archivos incluído en el calendario en el que con tan solo pasar el ratón por el día seleccionado veremos los posts que se hicieron en esa fecha.

Este truco es obra y milagro de PurpleMoggy, al que desde aquí le doy las gracias. ;)
Si teneis algún problema en la instalación ya sea porque algo no se entiende o por algún posible error al mostrar el código en el post (a veces, al transformar los <> para que se puedan mostrar se puede cometer algún error...), pasaros por la página original del truco para verlos mejor.

9 comentarios:

PurpleMoggy dijo...

Hey, glad you like the calendar :)

Just wanted to point you to these 2 links that might help you translate the calendar into something other than English ;)

YUI Calendar: Localization: Germany
YUI Calendar: Localization: Japan

espidifen600 dijo...

Gracias. Tienes un blog muy útil.
felicidades

moloboo dijo...

He probado este truco y no me funciona, a ver si pudieras ayudarme. Realizo los pasos que explicas en tu blog pero al guardar la plantilla me dice : error 404 not found.
Después instalo el html y se queda eternamente cargando...

Zaebos dijo...

Supongo que habrás cambiado la direcciín que pongo en el post y la zona horaria.

La dirección tiene que estar así:
http://DIRECCION.blogspot.com
(ojo que no termine en .com/, que es un error muy frecuente si haces un copy&paste de la barra de direcciones)

Después tienes que comprobar que la zona horaria que hay en el script sea la misma que hay configurada en tu blog.

He reinstalado el truco en un blog de pruebas y me funciona perfectamente:

http://plantillas-de-prueba.blogspot.com/

moloboo dijo...

Nada, nada...que lo he copiado mal. Muchas gracias por tu ayuda y por tu blog.

bloggheroe dijo...

Hola, ¿que tal? A mi me funcionó de maravilla pero... te has fijado que el miércoles (Wednesday) sale mal? WE una letra encima de la otra. ¿Existe alguna manera de cambiarlo? Y ya de paso, cambiarlo por días en español? L-M-X-J-V-S-D

Muchas gracias
Un saludo

Zaebos dijo...

Depende de yahoo... si han hecho o no la traduccion al español... hace tiempo que no lo miro, pero me da que no

Hogar CRECER dijo...

Hola! Funciona perfecto el calendario en el blog de prueba. Igualmente tengo algo para preguntar antes de pasarlo:

Consulta 1: qué parte del código habrá que tocar para ELIMINAR LAS RAYITAS QUE TACHAN LOS DÍAS?

Consulta 2: lo de los DÍAS EN ESPAÑOL ya te lo preguntaron, pero lo reitero por si te has enterado de algo sobre Yahoo.

Consulta 3: viste el CALENDARIO de Imageshack? Funciona como éste, pero es más sintético y chiquito todavía. Está bárbaro, no sabrás de dónde sacarlo?

Es la primera vez que llego a tu blog y tiene explicaciones muy claras para quienes no somos expertos.
Te ofrezco visitar y, si fuera posible, difundir nuestro blog:
www.hogarcrecer.blogspot.com

Gracias por todo. Un saludo. Corina

вoяяe dijo...

Hola buen día, bueno antes que nada agradecerte los tips que muestras son realmente buenos, e tomado demasiados de tu blog para mejorar un poco el mio, e implementado este calendario en mi blog y te quiero consultar un par de dudas, Abajo del calendario aparecen las entradas, pero al dar click sobre ellas no me enlaza a ellas, sino a otra cosa, se podrá hacer algo para que me lleve a la entrada? y la otra es que no puedo hacer que aparezca el botón (-->) saludos y muchas gracias!!

Template Designed by Douglas Bowman - Updated to New Blogger by: Blogger Team
Modified for 3-Column Layout by Hoctro
Re Updated by Zona de Pruebas