Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Calendar
Code

Agrega un Calendario de Sitio Web Usando Jalendar 2

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Hay muchas necesidades para un calendario en cualquier sitio web. El problema con muchos programas de calendario es la re-usabilidad. Estos frecuentemente solo funcionan con un Content Management System (CMS). Cuando necesitas moverte a otro, estos no funcionan.

Si estás creando tu propio sitio con archivos estáticos o tu propio CMS, entonces usualmente tienes que desarrollar tu propio calendario. Ese era mi dilema con el goPress CMS que escribí. Entonces encontré Jalendar 2 en CodeCanyon.

Descargando y Desempacando

La primera cosa que necesitas hacer es comprar Jalendar 2 desde CodeCanyon.

Jalendar 2
Jalendar 2

Una vez que tienes el archivo zip Jalendar 2 descargado, desempácalo en tu directorio de trabajo. El archivo zip debería contener estos archivos:

El directorio superior tiene dos carpetas (js y style) y archivos HTML de ejemplo. El directorio js contiene el JavaScript para el programa Jalendar 2. También contiene la versión de jQuery que usa.

Estarás usando el jalendar.min.js en tu proyecto. Este te da el tiempo de carga más rápido para tu sitio web. El autor dice que puedes usar cualquier versión de jQuery versión 1.11.3 o más reciente. Pero cuando probé jQuery 3.1.1, perdí alguna funcionalidad. Así que solo estoy usando la copia de jQuery que viene con la descarga.

El directorio de estilo contiene los archivos CSS para Jalendar 2. En el directorio de estilo, está el archivo jalendar.less. Este archivo crea el jalendar.css y jalendar.css.map cuando es procesado por Less. Less es un preprocesador CSS para crear archivos CSS más fácilmente. Solo necesitarás usar los archivos Less para hacer cambios mayores al estilo de los calendarios. Ya que puedes cambiar los colores con preferencias, cambiar los archivos Less no es necesario.

Calendario Básico

En tu directorio de trabajo para este proyecto, crea el directorio js. Después coloca una copia de los archivos jalendar.min.jsjquery-1.11.3.min.js en el. Después crea el directorio css y coloca el archivo jalendar.css en este.

En la parte superior del directorio, crea un archivo llamado Basic.html y coloca este código:

Esta es la instalación mínima para Jalendar 2. Es la estructura HTML básica con las líneas necesarias para crear un calendario. Las líneas 8 y 10 cargan los archivos para Jalendar 2. La línea 9 carga el jQuery. La línea 15 es el HTML para el div que contendrá el calendario. El id del div puede ser cualquier cosa que quieras. La clase tiene que tener la clase jalendar. De otro modo, no tiene el estilo apropiado.

Las líneas 17 a 19 contienen el código mínimo JavaScript para mostrar un calendario. Este usa jQuery para ubicar el id del div y ejecutar la función jalendar() en este.

Default Jalendar Calendar
Calendario Jalendar por Defecto

Cuando cargas este archivo en tu navegador, verás un calendario de un agradable color azul. Puedes usar las flechas en la parte superior para mover a mes anterior o siguiente. ¡Es un calendario de apariencia agradable para cualquier sitio web!

Agregando Eventos

Mostrar eventos en el calendario es fácil también. Crea una serie de divs de evento dentro del div de calendario. El formato para un div de evento es:

El <link to event details> es un enlace a la página en tu sitio, u otro sitio web, para detalles sobre el evento. El <date of event> es el texto de fecha para el evento. La estructura de datos por defecto es dd-mm-yyyy. El <title of the event> es el texto mostrado al fondo del calendario cuando el usuario selecciona la fecha del evento. Agrega lo siguiente al archivo HTML dentro del div del calendario:

Ahora, recarga la página y verás el evento.

An Event Added to the Basic Calendar
Un Evento Agregado al Calendario Básico

Seleccionar el día del evento te mostrará el texto que le diste al fondo del calendario. Puedes cerrar la lista de evento con el botón Cerrar al fondo.

Personalizando Jalendar 2

Hasta ahora, solo he usado las características básicas para Jalendar 2. Puedes personalizarlo con 17 propiedades diferentes. Puedes ver la lista completa en el sitio web de Jalendar 2.

La primera cosa que necesito hacer es que el calendario coincida con mi sitio web. Mi sitio web usa un color bronceado para el tema básico. Adoro el color azul por defecto, pero no concuerda. Cambia el código del script a:

Este código establece un día personalizado usando la propiedad customDay. Estoy estableciendo el día personalizado de manera que cuando lo pruebes en tu sistema obtendrás los mismos resultados.

El color está establecido con las propiedades color y color2. Las propiedades de color establecen el color más alto. Con la propiedad color2 establecida, este crea un degradado suave desde el color superior hasta el color inferior. Las propiedades titleColor, weekColor, y todayColor establecen la colorización para el título, nombres de semana y el número de hoy en el calendario.

El formato dateType establece el formato para usar para las fechas de eventos y para la propiedad customDay.

Jalendar With Custom Parameters
Jalendar Con Parámetros Personalizados

Con estos ajustes, estoy cerca de la apariencia que quiero. Pero me gustan las esquinas más redondeadas. No hay una propiedad para eso, pero puedo ver cómo ajustarlo usando el inspector.

Jalendar With Custom Parameters
Jalendar Con Parámetros Personalizados

En el inspector, puedo ajustar el ajuste CSS y descifrar qué necesita ser cambiado para obtener el resultado que quiero. La ruta CSS .jalendar .jalendar-container .jalendar-pages maneja el redondeo de las esquinas. Cuando establezco la propiedad border-radius a 20px, obtengo la apariencia que me gusta.

Jalendar With Custom Parameters
Jalendar Con Parámetros Personalizados

Esto lo acerca, pero aún hay un problema. El botón cerrar de del fondo muestra un poco de negro en las esquinas inferiores. El inspector muestra que el estilo .jalendar .jalendar-container .jalendar-pages .add-event .close-button es responsable. así que necesitarás agregar las dos reglas de estilo al HTML:

Es fácil editar propiedades CSS selectas de esta manera. Hackeando el código fuente CSS original es a veces más difícil. También permite mantener tus ediciones separadas de lo que obtienes del autor. Cuando actualizas a una nueva versión, puedes ver qué ediciones hiciste sin perderlas.

Agregando el Calendario al Sitio Web goPress

Ahora que tengo la apariencia que quiero, puedo agregarlo a mi sitio web. La descarga de este tutorial tiene una copia de mi Servidor goPress que uso con el tema para sitio web. Por favor refiérete al tutorial goPress Server sobre cómo construir el servidor.

Agregué el siguiente código al archivo site/parts/sidebar.html:

Después necesitarás agregar el jalendar.css al directorio site/css. Los archivos jquery-1.11.3.min.jsjalendar.min.js van en el directorio site/js. Ya que los archivos JavaScript dependen del orden de carga, agrega un 00- al archivo jQuery y 01- al archivo Jalendar 2. Establezco el ancho para el div .jalendar para centrar el calendario. El archivo jalendar.css ya tenía los márgenes para el calendario establecidos a auto. El problema es que el navegador no lo centra a menos que asignes el ancho.

Ahora, necesitas establecer el código para procesar el calendario establecido en el archivo site/js/02-site.js. Abre ese archivo y agrega este código:

El código SyntaxHighlighter.all() es para establecer cualquier código de resalte para la página. El resto es lo que copié de el último archivo de prueba ejecutando el código Jalendar 2 desde la última sección.

The Test Website with Jalendar 2
El Sitio Web de Prueba con Jalendar 2

Cuando ejecutas el servidor goPress, deberías ver la página web de arriba. El calendario centrado es la barra lateral con el tema apropiado emparejando colores.

Agregando un Selector de Fecha

A veces, necesitarás un selector de fecha dentro de tu página web. Jalendar 2 funciona muy bien para esto también. En el archivo site/main.html, agrega estas líneas:

Después agrega este código al archivo site/js/02-site.js:

Este código está justo después del código para inicializar el calendario de barra lateral. La propiedad type está establecida a selector para crear un selector de fecha. La propiedad selectingBeforeToday está establecida a false. Esto asegura que el usuario no puede seleccionar una fecha antes de la fecha actual. La propiedad selectingAfterToday está establecida a true. Esto asegura que el usuario puede seleccionar fechas después de la fecha actual.

The Test Website with Jalendar 2
El Sitio Web de Prueba con Jalendar 2

El selector de fecha resultante luce justo como el de la barra lateral. Hay dos diferencias principales. Este muestra la fecha actual, y el usuario solo puede seleccionar fechas después de la fecha actual. Cuando seleccionas una fecha, se coloca en la caja de texto arriba del calendario.

Conclusión

Con las herramientas indicadas, agregar elementos a tu sitio web es fácil. El Jalendar 2 es fácil de integrar con cualquier sitio web y luce bien. Ahora, necesitas agregarlo a tu sitio wen. Hay más elementos en CodeCanyon que puedes agregar a tu sitio web también.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.