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

Cómo crear un calendario de eventos simple para tu sitio web PHP

by
Difficulty:BeginnerLength:MediumLanguages:

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

En esta publicación vamos a revisar Events Calendar (Calendario de eventos) de CodeCanyon. Esta secuencia de comandos te permite añadir calendarios a tu sitio web PHP. Es una herramienta lista para ser usada que puedes integrar en tu sitio web PHP existente ¡y comenzar a usar hoy mismo!

Si estás creando un sitio web que esté relacionado con eventos, o si te gustaría presentar los eventos de tu sitio de una manera interactiva e interesante, ¡entonces has venido al lugar correcto!

Existen muchas extensiones y secuencias de comandos para calendarios prémium disponibles para tu sitio web PHP. Puedes esperar código de calidad, correcciones de errores, soporte y mejoras nuevas para cada una de estas extensiones y secuencias de comandos prémium.

En esta publicación vamos a discutir la herramienta Events Calendar, disponible para su compra en CodeCanyon a un precio muy razonable. Esta te permite crear calendarios desde una página administrativa y añadir eventos a cada calendario. Cada calendario es capaz de mostrar un número ilimitado de eventos.

Entonces, si estás buscando una secuencia de comandos que pueda proporcionarte tanto calendarios como eventos, la herramienta Events Calendar es una solución perfecta para ti.

Veamos rápidamente las características importantes que proporciona:

  • un número ilimitado de calendarios
  • un número ilimitado de eventos con cada calendario
  • eventos de uno o varios días
  • soporte de medios para eventos
  • la capacidad de importar fotografías de Flickr
  • soporte multi-idioma
  • opciones de personalización del calendario
  • y más

Como puedes ver, la herramienta Events Calendar ofrece muchas funciones útiles que te permiten configurar calendarios de eventos rápidamente. A lo largo de este tutorial exploraremos las diferentes funciones proporcionadas por este complemento. Para comenzar, veremos cómo descargar e instalar la secuencia de comandos Events Calendar desde el mercado de CodeCanyon.

Instalación y configuración

En esta sección te mostraré cómo instalar y configurar la herramienta Events Calendar una vez que la hayas comprado y descargado de CodeCanyon.

Tan pronto como la compres podrás descargar el archivo zip. Extrae el archivo y encontrarás un directorio con el código principal de la secuencia de comandos: events (eventos). Este proporciona dos versiones diferentes de calendarios de eventos de entre las que puedes elegir.

Calendario de eventos clásico incrustable

En esta versión puedes incrustar un calendario en una página PHP de tu sitio web dentro de un div o un iframe.

Nuevo calendario de eventos compatible con SEO

Esta es una nueva versión del calendario con botones de redes sociales y meta etiquetas para cada página de evento, esto para mejorar la indexación de la página. En esta versión el calendario no puede incrustarse totalmente; solamente puedes incrustarlo dentro de un iframe.

En esta publicación discutiremos la versión clásica incrustable. Desde luego, no hay nada que te detenga si quieres usar la nueva versión compatible con SEO. Si tienes alguna pregunta al configurar la versión compatible con SEO, no dudes en preguntarme en los comentarios mostrados más adelante.

En nuestro caso, ya que hemos seleccionado la versión clásica incrustable, el directorio que vamos a usar es events/embeddable. Copia este directorio a tu aplicación PHP. Por ejemplo, si tu proyecto está configurado en /web/demo-app/public_html, debes copiar el directorio embeddable/web/demo-app/public_html/embeddable.

A continuación necesitas importar las tablas necesarias de la base de datos. Puedes encontrar el archivo de la base de datos SQL en el directorio events_DB, el cual necesitas importar a tu base de datos: events.sql. Importa esta secuencia de comandos a tu base de datos, por ejemplo con phpMyAdmin, ¡y así habrás terminado de configurar la base de datos!

Finalmente, necesitas actualizar el archivo embeddable/admin/include/db_conn.php para que se ajuste a tus configuraciones para la conexión a la base de datos. Actualiza el siguiente fragmento de código de acuerdo a la configuración de tu conexión.

Ajusta la configuración global

Ahora que hemos terminado con la configuración de Events Calendar, deberías poder acceder al panel de control administrativo en https://your-site-domain/embeddable/admin con las credenciales de demostración.

Una vez que hayas iniciado sesión en el back-end administrativo, entra al enlace Settings > General Settings (Configuraciones > Configuraciones generales) en el menú de navegación principal. Veamos algunas configuraciones importantes en esta sección.

Ruta absoluta de la instalación de Events Calendar

Esta es la ruta en la que configuraste tu aplicación de calendario de eventos. Ya que hemos colocado dicha aplicación en el directorio embeddable, la ruta debería ser http://your-site-domain/embeddable.

Zona horaria

Te permite establecer la zona horaria de tu calendario de eventos.

Elige el formato de fecha del calendario

Si deseas cambiar entre los formatos de fecha de Estados Unidos, Reino Unido y la Unión Europea, puedes configurarlo aquí.

Elige el formato de hora del calendario

Esto te permite cambiar entre los formatos de 12 horas y 24 horas.

Vista predeterminada

Esta configuración te permite seleccionar el formato predeterminado de los eventos en el front-end. Hay dos vistas de entre las que puedes elegir: la vista de calendario y la vista de lista.

Y con esto hemos terminado con la configuración necesaria para crear calendarios y eventos. En el próximo par de secciones veremos cómo crear calendarios y añadirles eventos.

Cómo crear un calendario

En esta sección veremos cómo crear un calendario desde el back-end. Ve y accede al vínculo Calendars (Calendarios) de la parte superior de la barra de navegación. Esta pestaña muestra todos los calendarios disponibles de forma predeterminada.

Calendar Listing

En la parte superior de la lista puedes ver la sección Create a new calendar (Crear un nuevo calendario), que te permite generar un calendario nuevo de inmediato. Solamente necesitas escribir el nombre del calendario para crear uno nuevo.

Continúa y crea un nuevo calendario. Yo he creado el calendario Seminars (Seminarios), como puedes ver en la captura de pantalla anterior. Cuando generas un calendario puedes verlo en la lista de calendarios.

Una vez que hayas creado el calendario, ahora estás listo para añadirle eventos. En la siguiente sección veremos cómo agregar eventos al calendario que hemos creado en esta sección.

Cómo añadir eventos

En la sección anterior creamos el calendario que usaremos para mostrar los eventos. En esta sección veremos cómo añadir eventos al calendario.

En la página del listado de los calendarios, puedes ver el vínculo Manage Events (Administrar eventos) para cada calendario que hayas creado, como se muestra en la siguiente captura de pantalla.

Manage Events Link

Haz clic en el vínculo y éste te llevará a la página del listado de los eventos.

Manage Events

En esta página puedes gestionar tus eventos existentes y añadir nuevos. Para añadir un evento nuevo, haz clic en el vínculo Add (Añadir) y serás dirigido a un formulario para agregar un nuevo evento.

Add Event

Como puedes ver, el formulario de eventos contiene muchos campos que puedes llenar. La mayoría de los campos se explican por sí mismos. Sigue adelante y llena todos los campos necesarios para tu evento y guárdalo. Después regresarás a la página del listado de los eventos.

Desde luego, puedes añadir tantos eventos como quieras. Y si deseas clasificar tus eventos, puedes crear múltiples calendarios.

Así que con eso hemos terminado de crear un calendario y añadirle eventos. En la siguiente sección te mostraré cómo integrar el calendario que hemos creado a una página web PHP.

Cómo incrustar el calendario en tu sitio PHP

Existen diferentes maneras de incrustar el calendario en tu página web PHP. El archivo embeddable/index.php contiene comentarios que explican cómo incrustar el calendario en tu página web PHP sin un iframe. Yo te mostraré cómo incrustar el calendario con un iframe.

Es sencillo — solamente necesitas crear un elemento iframe y apuntar su atributo src al URL http://your-site-domain/embeddable. La secuencia de comandos Events Calendar hará el resto.

Esto cargará el calendario predeterminado:

Eso cargará un calendario que debería verse de esta manera:

Front-End Calendar View

Al hacer clic en cualquier fecha con eventos, serás llevado a una página con el listado de los eventos.

Front-End Events Listing

Finalmente, si haces clic en el vínculo Read More (Leer más) de cualquier evento, serás llevado a la página de detalles del mismo.

Front-End Event Detail Page

Como puedes ver, Events Calendar ofrece una solución completa para crear, administrar y mostrar calendarios de eventos. Con esta secuencia de comandos puedes crear una serie de calendarios diferentes y presentar tus eventos con una agradable interfaz en el front-end.

Siéntete en la libertad de probar otras opciones disponibles en la secuencia de comandos, y no dudes en preguntar en los comentarios si quieres consultar algo.

El siguiente paso: un vistazo rápido a un par de secuencias de comandos diferentes para calendarios de eventos

Si estás buscando secuencias de comandos más avanzadas para calendarios que puedas usar de inmediato, te recomiendo que consultes la siguiente publicación, que resume algunas excelentes secuencias de comandos disponibles a un precio bajo.

Aquí hay un par de secuencias de comandos interesantes:

Cleanto

Cleanto es ideal para muchos tipos diferentes de empresas de servicios que buscan una forma confiable de proporcionar reservas en línea con todas las funciones para sus clientes.

Cleanto

Ajax Calendar 2

Ajax Calendar 2 es un calendario personal altamente modificable diseñado para ayudarte a mantenerte organizado. Esta es una actualización de las más vendidas para otra popular secuencia de comandos, el Ajax Full Featured Calendar.

Ajax Calendar 2

Tiva Timetable

Totalmente responsivo, fácil de configurar y muy personalizable, Tiva Timetable es una buena opción para aquellos que buscan un calendario con un diseño moderno limpio y simple.

Tiva Timetable

Conclusión

Hoy hemos revisado la secuencia de comandos Events Calendar disponible en CodeCanyon. Esta te permite crear eventos y calendarios en tu sitio web PHP. En esta publicación discutimos cómo descargar, instalar e incrustar esta secuencia de comandos en tu página web PHP. Teniendo en cuenta las funciones que proporciona, creo que tiene un precio razonable y vale la pena probarla.

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.