Integración del calendario JS Calendar2 v1.8 en una aplicación web
22/07/2010 -
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:
“-//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: | |