Integración del calendario JS Calendar2 v1.8 en una aplicación web
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” />
<script type=”text/javascript” src=”/JSCal2/js/jscal2.js”></script> <!– Javascript principal del calendario, obligatorio –>
<!– De los siguientes 11 archivos js solo hay que dejar el del idioma que queramos. –>
<script type=”text/javascript” src=”/JSCal2/js/lang/ru.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/de.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/fr.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/ro.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/es.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/cz.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/pl.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/pt.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/jp.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/cn.js”></script>
<script type=”text/javascript” src=”/JSCal2/js/lang/en.js”></script>
</head>
<body>
<div id=”cont”></div> <!– Capa contenedora del calendario. –>
<!– A partir de aquí añadiríamos las líneas de configuración del calendario en lenguaje Javascript. –>
<script type=”text/javascript”>
var LEFT_CAL = Calendar.setup({
cont: “cont”,
weekNumbers: true,
selectionType: Calendar.SEL_MULTIPLE,
showTime: 12
})
</script>
</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: | |
Deja un comentario
Nuestra red social |
|
|
Hola gracias por tu tutorial quisiera preguntarte porque los ejecuto en un servidor local y me funciona excelente pero al subirlo a un servidor web no me muestra no se ejecuta el jscal2.js gracias por tu colaboración