Introduccíon

La semana pasada vimos como un calendario con Javascript puede ayudar a introducir fechas en campos de formularios. Esta semana veremos otra posible aplicación, visualizando una lista de eventos de forma que marcamos los días con eventos en el calendario y mostramos mas información sobre un evento si el usuario pincha en el día correspondiente.

Eventos estáticos

La forma mas sencilla de crear un calendario con eventos es pasar una lista de argumentos en el momento de creación del calendario. Esta lista se puede generar, por ejemplo, al renderizar la página en PHP o Rails.


var mi_agenda = [
    { period: '2010/02/22', label: ["Publicar nuevo artículo", "Hacer la compra"], cls: 'evento'},
    { period: '2010/02/27', label: ['comprar esquís'], cls: 'evento'},
    { period: $A($R(new Date('2010/03/01'),new Date('2010/03/09'))), label: ['vacaciones'], cls: 'evento'} 
];

Arriba vemos un ejemplo de una lista de eventos. Un evento de un sólo día en una lista así se define como {period: '2010/01/01', label: ['Nuevo año'], cls: 'evento'}. Con period pasamos la fecha del evento. Para funcionar correctamente en todos los navegadores debemos pasar la fecha en un formato tipo 'año/mes/día'. label es una lista de cadenas. Si pasamos mas que una cadena se crea un evento para cada uno. Finalmente con cls podemos pasar una clase de CSS para fácilmente darle estilos personalizados a la entrada del evento en el calendario.

También podemos crear eventos que duran varios días. En vez de pasar la fecha como 'Enero 1, 2010' usamos unas funciones especiales de la librería Prototype: $A($R(new Date('Marzo 1, 2010'), new Date('Marzo 9, 2010'))). Este código crea una lista de los días del 1 al 9 de marzo.

Con esta lista de eventos ya podemos crear el calendario. Simplemente pasamos la lista con la opción planner:


<div id='calendario1' class="iscal">
</div>
<script>
var calendario1 = new scal('calendario1', function(){}, {
  titleformat: 'mmm yyyy',
  closebutton: 'X',
  dayheadlength: 2,
  weekdaystart: 1,
  planner: mi_agenda
});
</script>

El código arriba podemos ver en acción en el ejemplo ejemplo 1. Si habéis leído el artículo de la semana pasada notarais que el calendario está mucho mas grande. Es porque hemos usado otro estilo. Scal viene con algunos estilos predefinidos. Se elige un estilo pasando una clase de CSS al DIV contenedor del calendario. En el ejemplo usamos el estilo 'iscal' ya que es el único que muestra eventos por defecto. Los otros estilos los esconden con 'display:none'.

Añadir eventos

Ahora vamos a ver como podemos añadir eventos a un calendario ya visible. Scal nos proporciona el método setPlannerValue(año, mes, día, nombre_evento, clase_css). Año, mes y día pasamos como números y nombre_evento y clase_css como cadenas, igual como en el ejemplo arriba.


var calendario2 = new scal('calendario2', function(){}, {
  titleformat: 'mmm yyyy',
  closebutton: 'X',
  dayheadlength: 2,
  weekdaystart: 1,
  planner: []
});

function nuevo_evento(formulario) {
  calendario2.setPlannerValue(
    formulario.down('[name=year]').value,
    formulario.down('[name=month]').value,
    formulario.down('[name=day]').value,
    formulario.down('[name=evento]').value,
    'evento'
  );

  return false;
}

En el ejemplo arriba (podéis verlo en acción en el ejemplo 2) pasamos una lista vacía como eventos. Con el formulario abajo del calendario podemos crear los eventos nosotros mismos. Lo único que hace el formulario es llamar a la función nuevo_evento cuando pinchamos en "Crear evento". Es en esta función donde llamamos al método setPlannerValue pasando como parámetros los valores especificados en el formulario.

Con lo presentado en los dos artículos hay muchas posibilidades para facilitar una experiencia mejor al usuario. Por ejemplo, podríamos presentar los archivos de un blog mediante un calendario, cargando los eventos (las entradas del blog) con llamadas AJAX cuando cambiamos de mes en el calendario.