7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Los mejores complementos de calendarios y calendarios de eventos en JavaScript de 2019

Scroll to top
Read Time: 9 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Hay muchas razones por las que quizá quieras usar un complemento de calendario en tu sitio web. La más común entre ellas es para listar y programar eventos. Otro uso sería proporcionar un enlace para listar todas las publicaciones de un blog o eventos de noticias que se publicaron en un día en particular. En algunos casos, es posible que simplemente estés buscando un selector de rangos de fechas y horas.

Teniendo en mente todos estos casos de uso, he creado esta lista de algunos de los complementos de calendarios en JavaScript más populares disponibles en CodeCanyon. Estos complementos proporcionan muchas funciones a un precio bajo. Y si compras alguno de ellos, también obtendrás actualizaciones gratuitas de por vida y seis meses de soporte gratuito para ayudarte a comenzar.

En esta publicación compartiré algunas de mis selecciones en cuanto a los mejores complementos y plugins de calendarios en JavaScript de 2019.

Simple Events Calendar

El primer complemento en nuestra lista es el altamente valorado Simple Events Calendar. Está basado en jQuery y es compatible con varios lenguajes.

Simple Events CalendarSimple Events CalendarSimple Events Calendar

Lo primero que notarás sobre este complemento es su diseño muy simple pero atractivo. Todos los días de un mes se muestran en la parte superior con una fuente pequeña para ahorrar espacio, y la fecha seleccionada se muestra con una fuente más grande.

Los eventos para la fecha seleccionada se muestran en la parte inferior. Los usuarios pueden ordenar los eventos en base al horario, título o prioridad. Todos los días que tienen un evento adjunto están marcados con una flecha para que puedas ver fácilmente qué días están vacíos actualmente y crear tu itinerario en consecuencia.

Puedes crear eventos periódicos con este complemento. Esto significa que puedes añadir fácilmente los eventos que se repiten semanal, mensual o anualmente.

El complemento también te proporciona acceso a algunos métodos y devoluciones de llamadas de eventos para extender la funcionalidad del calendario o para ayudarte a integrarlo con el resto de tu sitio web.

Puedes probar todas las funciones del complemento en la página de demostración, que también proporciona una guía de instalación rápida.

DZS jQuery Mini Events Calendar

El complemento DZS jQuery Mini Events Calendar sería la elección perfecta para ti si estás buscando un complemento de calendario en JavaScript que se vea perfecto en todos los tamaños de pantalla y que tenga muchas funciones.

DZS Mini Events CalendarDZS Mini Events CalendarDZS Mini Events Calendar

Es fácil de configurar y viene con una documentación detallada para ayudarte en caso de que tengas algún problema. También es altamente personalizable y compatible con SEO.

Hay una variedad de modos y pieles disponibles que puedes usar de acuerdo a tus necesidades. Algunos eventos que marques en un calendario serán más importantes que otros. Puedes ver la diferencia entre eventos importantes y eventos regulares fácilmente con la etiqueta important (importante). El complemento muestra eventos importantes en color rojo y eventos regulares en color azul.

Otro complemento, llamado DZS tooltips plugin (complemento DZS para descripciones emergentes), ya se encuentra integrado con este complemento para proporcionar una mejor experiencia al usuario. Las descripciones emergentes que tú generas pueden tener HTML en su interior, lo que las vuelve bastante potentes y flexibles. Básicamente podrás añadir cualquier tipo de contenido (incluso videos) en el interior de las descripciones emergentes.

Existen tres pieles diferentes disponibles para este calendario, y se llaman clean (limpio), aurora y black (negro). Puedes elegir la piel que funcione mejor con tu tema, y también tienes la opción de mostrar los eventos como una descripción emergente o con una rápida animación de deslizado.

El complemento también puede funcionar en otros dos modos, además de ser un calendario de eventos. Su primer modo es un simple selector de fechas. El segundo modo es más interesante, ya que te permite seleccionar una fecha y luego mostrar cualquier elemento enlazado a esa fecha, por ejemplo las publicaciones de un blog.

No olvides echar un vistazo a la página de demostración del complemento. Tengo la certeza de que te gustarán las funciones que se ofrecen con él.

Tiva Events Calendar

Tiva Events Calendar ofrece una solución única y sencilla para realizar un seguimiento de los diferentes eventos de tu agenda.

Tiva Events CalendarTiva Events CalendarTiva Events Calendar

Este complemento difiere con respecto a los primeros dos calendarios de eventos. Quizá hayas notado que tanto Simple Events Calendar como DZS jQuery Events Calendar solamente marcan la fecha del evento en el calendario. No se te proporciona ningún otro tipo de información de antemano. Esto significa que tienes que hacer clic en una fecha para realmente poder ver el evento.

El diseño compacto en este complemento también funciona de manera similar, y solo muestra los eventos una vez que pases el cursor del ratón sobre la fecha. Sin embargo, el diseño completo del complemento también muestra el título de los eventos, con el fin de que no tengas que hacer clic en cada fecha para ver los eventos del día. No obstante, aún puedes hacer clic en los eventos para ver más detalles sobre ellos.

Otra característica interesante del complemento es que los eventos están codificados por colores. Podrás asignar diferentes colores a distintos tipos de eventos, como fiestas o reuniones de negocios. Esto permite que sea más fácil obtener un panorama general de la agenda con un simple vistazo al calendario, nuevamente sin tener que hacer clic en cada fecha.

Tanto el diseño completo como el compacto contienen una vista de calendario y una de lista. La vista de calendario te mostrará todos los días del mes, como un calendario normal. Por otro lado, la vista de lista simplemente enumera todos los eventos del mes. Puedes ver todo esto en acción en la página de demostración.

Calentim: Date Time Range Picker

A diferencia de los otros complementos de la lista, Calentim Date Time Range Picker no es un complemento para calendarios de eventos en absoluto, y solamente se enfoca en ser un excelente selector de rango de fecha y hora.

Calentim Date Time PickerCalentim Date Time PickerCalentim Date Time Picker

Con su enfoque limitado, el complemento puede permitirse ofrecer muchas funciones en este nicho en particular. Uno de los mejores aspectos de este complemento es que el selector se ve muy bien en dispositivos con pantallas de todos los tamaños.

Es compatible con dispositivos móviles debido a su diseño responsivo y su uso de gestos como el soporte para el toque deslizante. Por ejemplo, es muy sencillo cambiar entre meses y años debido al diseño bien pensado del complemento.

También es fácil de personalizar, por lo que puedes ocultar cualquier elemento de la interfaz de usuario y desactivar las funciones que no necesites.

El complemento es compatible con 109 lenguajes diferentes. Básicamente, esto significa que el complemento probablemente viene con soporte integrado para el idioma que tu cliente use.

Hay muchas otras funciones en el complemento que se mencionan en su página de demostración. Simplemente prueba los ejemplos de la página. Tengo la certeza de que encontrarás todas las funciones que esperas tener en un complemento de calendarios selector de rangos de fechas.

Jalendar 2 Calendar Kit

Jalendar 2 Calendar Kit es un complemento basado en jQuery que ofrece muchas funciones diferentes. Uno de sus mayores puntos a favor es la facilidad de su personalización. Por ejemplo, puedes cambiar rápidamente el color de fondo del calendario así como el color de los días, semanas o años. Esto significa que el complemento nunca se verá como si estuviera fuera de lugar en tu sitio web. Puedes cambiar fácilmente todos los valores de color para que coincidan con tu esquema de colores.

Jalendar 2 Calendar KitJalendar 2 Calendar KitJalendar 2 Calendar Kit

La cantidad total de eventos de cada mes se muestra con burbujas de notificación, y las fechas están marcadas con pequeños puntos de colores. Al hacer clic en una fecha se muestran todos los eventos para ese día en particular.

Puedes usar el complemento de cuatro maneras diferentes. Puedes usarlo como un calendario de eventos, selector de fechas o selector de rangos de fechas, y el cuarto uso del complemento es como vinculador de fechas, lo que te permite asignar diferentes fechas a distintos enlaces. Esto puede ser útil cuando deseas permitir que los usuarios abran las publicaciones de un blog para un día en particular.

Otra característica interesante de este complemento es su soporte para 13 lenguajes diferentes. Si tus clientes no saben inglés, hay otros 12 idiomas de entre los que puedes elegir al crear el calendario de eventos.

Hubeleke jQuery Events Calendar

Hubeleke jQuery Events Calendar es, nuevamente, distinto a todos los complementos que hemos visto hasta ahora. Puede conectarse a tu base de datos y recuperar todos los eventos de la fecha seleccionada para mostrarlos en tu página web.

Hubeleke Events CalendarHubeleke Events CalendarHubeleke Events Calendar

Todas las fechas que tienen un evento vinculado a ellas están marcadas con un fondo de color. Se ha aplicado un estilo mínimo al calendario, por lo que es fácil darle un estilo de acuerdo a tus propias necesidades.

También puedes añadir compatibilidad para el lenguaje de tu elección simplemente duplicando los archivos de JavaScript y traduciendo los nombres de todos los meses y días.

Si quieres extender la funcionalidad del complemento, existen varias propiedades y eventos a los que puedes acceder. Por ejemplo, hay eventos como onClickMonth y onClickDay que te ayudan a hacer algo específico cuando un usuario haga clic en un mes o día en particular.

Deberías consultar la página de demostración del complemento para ver cómo funciona y leer sobre sus diferentes funciones con más detalle.

Consideraciones finales

En esta publicación he reunido los cinco complementos de calendarios en JavaScript más populares disponibles en CodeCanyon. Todos son buenos, pero si necesitas más ayuda para tomar una decisión, aquí hay algunas ideas.

Si simplemente estás buscando un selector de fecha y hora, el mejor complemento para ti sería Calentim—Date Time Range Picker. Si estás buscando un complemento que pueda recuperar eventos de tu base de datos en segundo plano, deberías comprar el complemento Hubeleke jQuery Events Calendar. El resto de los complementos mencionados en la publicación son buenas opciones si estás buscando un complemento de calendarios de eventos que ofrezca muchos diseños y opciones de personalización diferentes.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.