Integración del calendario JS Calendar2 v1.8 en una aplicación web

Application Development

22/07/2010 - Marc Pinyot

Después del post que publiqué sobre cómo integrar el editor HTML CKEditor, he considerado interesante publicar este nuevo post tratando la integración de otra aplicación Javascript muy potente y usable: el calendario JSCalendar2.

Al igual que el CKEditor, estoy seguro que muchos de vosotros también conoceréis el JSCal y lo habréis integrado alguna vez en una aplicación web.

A continuación veréis los pasos para realizar una integración básica del calendario:

1. Lo primero es descargarse el zip de la web oficial: http://www.dynarch.com/projects/calendar/download/1.8/JSCal2-1.8.zip

2. Luego descomprimimos la carpeta JSCal2-1.8 directamente en la raíz de nuestro servidor web y le cambiamos el nombre a JSCal2.

3. Seguidamente creamos un HTML con las siguientes líneas de código:

<!DOCTYPE html PUBLIC

“-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”/JSCal2/css/jscal2.css” /><span style=”color: #ff0000; font-weight: bold; font-size: 9px;”%gt; <!– CSS principal del calendario, obligatorio –>

<link rel=”stylesheet” type=”text/css” href=”/JSCal2/css/border-radius.css” /> <!– CSS para redondear las esquinas del calendario, solo para navegadores compatibles con CSS 3. –>
<!– De los siguientes 4 archivos CSS solo hay que dejar el del skin que queramos o ninguno para el skin estándar. –>

<link rel=”stylesheet” type=”text/css” href=”/JSCal2/css/gold/gold.css” />

<link rel=”stylesheet” type=”text/css” href=”/JSCal2/css/matrix/matrix.css” />

<link rel=”stylesheet” type=”text/css” href=”/JSCal2/css/steel/steel.css” />

<link rel=”stylesheet” type=”text/css” href=”/JSCal2/css/win2k/win2k.css” />
/JSCal2/js/jscal2.js <!– Javascript principal del calendario, obligatorio –>
<!– De los siguientes 11 archivos js solo hay que dejar el del idioma que queramos. –>
/JSCal2/js/lang/ru.js
/JSCal2/js/lang/de.js
/JSCal2/js/lang/fr.js
/JSCal2/js/lang/ro.js
/JSCal2/js/lang/es.js
/JSCal2/js/lang/cz.js
/JSCal2/js/lang/pl.js
/JSCal2/js/lang/pt.js
/JSCal2/js/lang/jp.js
/JSCal2/js/lang/cn.js
/JSCal2/js/lang/en.js

</head>

<body>
<!– Capa contenedora del calendario. –>

<!– A partir de aquí añadiríamos las líneas de configuración del calendario en lenguaje Javascript. –>
var LEFT_CAL = Calendar.setup({

cont: “cont”,

weekNumbers: true,

selectionType: Calendar.SEL_MULTIPLE,

showTime: 12

})
</body>

</html>

Y ya lo tendríamos integrado con su configuración estándar. Si queréis cambiar el aspecto del calendario, añadir o quitar más funciones, etc., podéis encontrar toda la documentación relacionada con la integración y configuración en esta dirección: http://www.dynarch.com/projects/calendar/doc

Para terminar os dejo unas capturas de pantalla de varias configuraciones y aspectos del calendario:

Este sería el aspecto del calendario integrado con su configuración estándar y en idioma español:
Skin Gold:
Skin Matrix:
Skin Steel:
Skin Windows 2000:
Modo compacto:
Sin reloj, sin número de semanas, con un día seleccionado y el rollover del ratón:
Multiselección de días y reloj en modo 24 horas y situado a la izquierda:
Posibilidad de añadir información a uno o varios días del calendario como si fuera una agenda: