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

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:

<!DOCTYPE html PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<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:
Categorías:Javascript Etiquetas: ,
  1. febrero 24, 2011 en 21:00 | #1

    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

  1. No trackbacks yet.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 113 seguidores

%d personas les gusta esto: