En muchos sitios web de asociaciones y agrupaciones, se hace más que interesante incluir un calendario de eventos que se pueda mostrar públicamente en la página web.
En este post vamos a ver como utilizar un plugin gratuito denominado: The Events Calendar. También tiene una versión premium con más funcionalidades. Pero, para las funciones básicas para una asociación con las opciones del plugin gratuito sobra.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE DEL POST
1.- Instalación y activación del plugin WordPress: The Events Calendar
Para instalar un plugin gratuito disponible en el repositorio oficial de wordpress, iremos a: “Plugins > Añadir nuevo”. A continuación, pondremos en la barra de búsqueda el nombre del plugin: “The Events Calendar”, lo buscaremos, instalaremos y activaremos.
2.- Página del calendario de eventos WordPress
La página en la que se mostrará el Calendario de eventos por defecto será en la página …/events/. Es decir, la URL por defecto de la página de eventos será: “mipaginaweb.es/events/
Página de calendario de eventos. En esta página se mostrarán todos los eventos que publiquemos
Digo la URL por defecto, ya que podremos modificar dicha URL por defecto en la que se muestra el calendario de eventos desde: “Eventos > Ajustes > General” y luego modificando el campo: “Slug URL para los Eventos”
2.1.- Configuración de la página del calendario
En caso de utilizar la plantilla Divi, para que la página del calendario se muestre como vas a ver en las siguientes imágenes establece estas opciones de configuración, que en mi opinión son las que mejor muestran el calendario:
Ve a: “Eventos > Ajustes > Visualización” y establece las siguientes opciones:
i.- Hoja de estilo predeterminada utilizada para las plantillas de eventos: Marca la opción “Estilos completos”. Esta opción intenta tomar opciones de diseño de la plantilla para la construcción de la página del calendario.
ii.- Plantilla para eventos: selecciona la opción “Plantilla de Eventos predeterminada” (no mostrará el sidebar).
Si eliges la opción “Plantilla de página predeterminada” se mostrará el sidebar o barra lateral. En las pruebas que he realizado, la opción “Blank page” no me funciona correctamente.
En la página del calendario de eventos los usuarios dispondrán de las siguientes opciones:
2.2.- Selector de tipo de calendario
En la parte superior derecha del calendario aparecerá un selector para cambiar el formato del calendario. Pudiendo elegir entre las siguientes opciones:
Formatos para visualizar el calendario
a.- Mes: esta es la opción en la que se muestra el calendario por defecto. Es decir, si el visitante no cambia la visualización, éste será el formato que se muestre.
Es un formato mensual, en el cual se visualizan todos los días del mes.
Es posible cambiar y que no fuera éste el tipo de visualización de calendario por defecto. Ese cambio se haría en: “Eventos > Ajustes > Visualización” cambiando la opción: “Vista predeterminada”.
b.- Lista: con esta opción se mostrará un listado de próximos eventos
c.- Día: con esta opción del selector se mostrarán los eventos de un día en concreto.
2.3- Selector de fecha de eventos
En la parte superior izquierda aparecerá un filtro por fecha de eventos que será diferente según se esté mostrando el calendario tipo Mes, Lista o Día.
- En el calendario tipo Mes podremos elegir el mes cuyos eventos queremos visualizar.
- En el calendario tipo lista podremos elegir la fecha a partir de la cual queremos ver los próximos eventos
- En el calendario tipo día podremos elegir el día cuyos eventos queremos visualizar en el calendario.
Filtrado de eventos por fecha en el calendario
Nota: para que la fecha del selector se vea en el correcto formato ve a: “Eventos > Ajustes > Visualización > Ajustes para formato de fecha” y en la opción: “Formato de fecha” pon el siguiente tipo de formato: “15/01/2018”
2.4.- Buscador de eventos
El calendario de eventos para WordPress también dispone de un buscador de eventos por palabras. Este buscador está situado en el centro y tiene un botón a la derecha para realizar las búsquedas.
Buscador de eventos en el calendario
2.5.- Miniatura del evento
Al poner el ratón sobre un evento del calendario se mostrará una pequeña ventana emergente con una imagen en miniatura del evento, la fecha, duración y un extracto de la descripción.
Ventana emergente del evento, que aparece al poner el ratón sobre un evento en el calendario
Si haces clic sobre el evento iremos a la ficha específica del evento
Parte superior de la ficha de evento
Para que el formato de horario, que te aparece en la pequeña ventana emergente, salga bien y quitemos el separador @ entre fecha y hora, ve a la configuración y haz los siguientes cambios.
Ve a “Eventos > Ajustes > Visualización” y en el apartado “Ajustes para formato de fecha” establece las siguientes opciones:
i.- Fecha con el año: j F Y
ii.- Fecha sin el año: j F
iii.- Formato de mes y año: F Y
iv.- Separador de fecha y hora: |
Ajustes de formato de fecha para el calendario
3.- Creación de Eventos para que se muestren en el calendario
Para que un evento se pueda mostrar en la página del calendario primero debemos proceder a crearlo. Para crear un nuevo evento iremos a: “Eventos > Agregar nuevo” e iremos rellenando las siguientes opciones:
3.1.- Título y descripción del evento
El nombre del evento lo pondremos en la parte superior de la página. En el área de texto que aparece debajo del título pondremos la descripción del evento.
Título y descripción del evento
3.2.- Categoría del Evento
En el lateral derecho verás un bloque denominado: “Categoría del Evento”. Esta opción sirve para categorizar los eventos según su tipología.
Para que nos aparezcan categorías para seleccionar tendremos que haberlas creado previamente.
Guarda el evento y ve a la página de creación de categorías.
Las categorías se crean en: “Eventos > Categorías de evento”. Simplemente tendrás que asignar un nombre a la categoría y hacer clic en el botón “Añadir nueva categoría de evento”.
Una vez creada la/las categorías de evento, refresca la página del evento que estás creando y ya te aparecerán las categorías para poder seleccionarlas.
3.3.- Fecha y duración del evento
Este apartado se denomina: “TIEMPO & FECHA”. Aquí seleccionaremos la fecha y hora de comienzo y fin del evento.
Si el evento dura todo el día, podremos marcar el check box: “Todo el día”.
Fecha y hora del evento
3.4.- Localización del Evento
Este apartado se denomina: LOCATION. Aquí estableceremos la localización exacta en la que se celebrará el evento.
Podemos crear una nueva localización o elegir una que ya hayamos creado previamente. Al rellenar los diferentes campos crearemos una nueva localización que después podremos utilizar para otros eventos.
Es decir, que, si dos eventos tienen la misma localización, no tendremos que crear dos veces la localización.
La gestión de localizaciones creadas se realiza desde: “Eventos > Lugares”, que es el lugar adecuado para la creación de localizaciones.
Luego desde la ficha del evento podremos seleccionar la localización.
Guardaremos el evento, iremos a: “Eventos > Lugares”, haremos clic en el botón “Agregar Nuevo” para crear la localización del evento que estamos generando.
En el título pondremos el nombre del lugar y en el bloque “Información del Lugar” rellenaremos los datos de localización.
Localización o lugar de celebración del evento
Posteriormente haremos clic en el botón guardar.
Ahora volveremos a la página de creación del evento, refrescaremos y veremos que ahora nos aparece una opción para seleccionar la localización antes creada.
Haz clic sobre el selector: “Create or Find Lugar” y selecciona la localización antes creada.
Seleccionar una localización ya creada
Para configurar el zoom del mapa de situación que aparecerá asociado al evento iremos a: “Eventos > Ajustes > General > Ajustes de los mapas”.
En el apartado: “Nivel de acercamiento (zoom) por defecto en Google Maps” elegiremos la cantidad de zoom, siendo 0 el mínimo zoom y 21 el máximo. Un zoom de 18, en mi opinión está bastante bien.
3.5.- Organizadores del evento
El siguiente apartado a rellenar del evento, es el correspondiente a los organizadores del mismo.
Al igual que hemos hecho con la localización, lo ideal es crear primero el organizador y luego seleccionarlo desde la creación del evento.
Para crear un organizador de eventos iremos a: “EVENTOS > Organizadores”.
En el título de la página podremos el nombre del organizador. En el bloque “Información del organizador” pondremos teléfono, página web y email.
Una vez creado el organizador ya podrá ser seleccionado desde la página de creación de eventos.
En la siguiente imagen puedes ver como se muestra la parte inferior de la ficha de evento. En ella aparece la localización, datos principales y organizadores.
Parte inferior de la ficha del evento
3.6.- Página web de evento y Coste
Aún nos queda rellenar dos partes más de la ficha de eventos: PÁGINA WEB EVENTO y EVENTO COSTE
En PAGINA WEB EVENTO > URL: pondremos la URL específica informativa sobre el evento (en caso de existir dicha página)
En el apartado EVENTO COSTE:
En “símbolo de moneda” pondremos “€” y el selector lo pondremos en “Después de la cantidad”.
En el campo “precio” estableceremos el coste de evento (en caso de que fuera de pago).
Ya tenemos el evento creado.
Podemos hacer una vista previa del mismo o buscarlo a través de la página de calendario.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, enhorabuena por el blog. Tengo una duda, ¿cómo puedo configurar el tiempo y fecha del evento para que aparezca el horario de cada día y no salga en los festivos?, gracias de antemano
Hola ! Es excelente tu post. Pero tengo un problema a cerca del mapa…..no me lo muestra aun con los chekbox tildados, cual podria ser el error.? Gracias
Hola. Yo tengo que armar páginas de grupos de personas (institutos, comisiones) que tienen carácterísticas propias como autoridades, días de reunión. Pasa eso me parece muy práctico usar páginas de categoría y personalizarlas con el constructor de plantilllas de divi. El problema me parece con los eventos o actividades; las mismas no tienen las mismas categorías que las entradas, por lo que no puedo usas la opción «esta categoría» que uso para las entradas. Alguna sugerencia?
hola! muchas gracias por tu tiempo, como puedo hacer para que no me aparezca todo en ingles y este en español, por ejemplo lugares, eventos y demas cosas
Hola Nora.
En general en WordPress, cuando instalas un plugin o plantilla y utilizas wordpress en español, si la plantilla o plugin tienen traducción a español directamente se activa y ves en español todos los textos que se hayan traducido (que no tienen por qué ser todos).
Para realizar traducciones de un plugin o plnatilla o añadir más traducciones, puedes utilizar un plugin. Por ejemplo, Loco Translate
https://www.tiendaonlinemurcia.es/como-personalizar-traducciones-en-woocommerce-cambiar-textos-woocommerce/
https://labarta.es/como-utilizar-loco-translate-correctamente/
Hola, Joaquín: Te quería preguntar si este calendario se puede sincronizar con uno de airbnb, es decir, en formato ical. Me gustaría poner en la web un calendario de reserva de un apartamento, pero sincronizado con el de Airbnb. Muchas gracias
Hola Carmen.
Yo creo que no. Pero, consulta en el foro de soporte del plugin, ya que ellos te pueden responder con mucha más propiedad.
Foro Soporte The Event Calendar
Hola quisiera saber si cualquier persona puede añadir evento en mi web? Es decir que no esté registrado por ejemplo, hay alguna manera para poder hacerlo?
Buenas.
No, solo puede añadir eventos el administrador de WordPress
Como siempre genial Joaquin, gracias ,mas de una vez me has salvado de un apuro.
saludos
Hola buenas1 Muchas gracias por la info, me ha gustado mucho.
Me lo he bajado y ya he creado algun que otro evento, pero no es posible de guardar el calendario en la columna de la pagina principal?
Donde tengo que guardar el calendario para que se vea?
Y otra pregunta, no se puede visualizar los eventos a meses futuros. Es decir, yo edito un evento a fecha de Abril, si estamos en Febrero sólo se pueden ver los eventos de Febero. No hay posibilidad de flechas ni nada para ir a los meses siguientes? Muchas gracias.
Buenas Laura.
1.- El visitante puede cambiar de mes haciendo clic en el selector: «Eventos en:»
2.- Solo se puede utilizar una página específica para el calendario de eventos. Lo tienes en el apartado 2: Página del calendario de eventos WordPress
No se puede introducir el calendario en otras páginas
Un saludo
Buenas Joaquín, me instalé «The Events Calendar» y «The Events Calendar Shortcode» para poner el calendario con los eventos en el sidebar y el footer, pero solo me aparecen los eventos, no el calendario en si mismo. ¿Me puedes ayudar?
Gracias
Hola Elías,
Qué yo sepa solo se puede mostrar el calendario en la página específica de calendario. Pero, puedes escribir en el foro del plugin para que te informen si existe otra posibilidad: Foro soporte The Events Calendar
Hola Joaquin:
somos una pequeña asociación de reciente creación, y estmos usando la parte gratuita de WordPress. Somos 50 no nos da para mas ya que, de momento, no tenemos ingresos. Pero estaba pensando en poner una agenda. Pero veo que hay que subir a business, para instalar los plugins.
No tenemos tampoco mucha idea, pero ¿hay alguna forma de poner una agenda de eventos que se gratuita, hasta que podamos pagar?
Agradeciéndote de antemano tu ayuda,
saludos
Antonio
Hola Antonio.
El plugin que se menciona en este post es gratuito. Te lo puedes descargar e instalar en tu WordPress sin coste alguno.
Como puedo ocultar los eventos que ya estan pasados? esque aunque ya hayan pasado me siguen apareciendo
Buenas,
¿Has probado a eliminar los eventos que hayan finalizado?
Hola buenos días: ¿se puede poner el calendario de eventos la vista del mes en la página de inicio? ¿Cómo?
un saludo y gracias
Buenas,
Que yo sepa no es posible poner el calendario de eventos en la home.
Me gustaría saber si se puede mostrar el próximo evento en el menú principal, no se si con algún widget o algo
Buenas,
Mira a ver si te puede servir este pluging para insertar shortcodes en cualquier parte de la web (cómo por ejemplo, en un widgets) junto al plugin The Event Calendars.
Este plugin se llama: The Events Calendar Shortcode
(Poner los shortcodes en la cabecera te resultará segurmente complicado si tu plantilla no dispone de alguna opción para ello, pero puedes insertar elementos del Calendario en Widgets y otras páginas)
Hola, tengo un problema al crear un evento, no me sale el mapa en el evento, si me sale el enlace a google maps, pero el mapa no.
Sale el espacio en gris donde se supone que saldrá el mapa, pero sin salir
Buenas,
En la ficha del evento, en el apartado: «Location» tienes dos checkbox:
a.- Mostar Google Maps: Puede ser que no tengas marcado el checkbox y entonces no se muestre el mapa
b.- Mostrar enlace de google maps-> esto si te sale
Hola Joaquín
Te pido ayuda: la página a donde direcciono el calendario no muestra los eventos, sin embargo el desplegado de la agenda si lo hace en las páginas restantes
En donde configuro para que aparezcan?
Buenas,
La configuración de la página de enventos se realiza desde: “Eventos > Ajustes > General” y luego modificando el campo: “Slug URL para los Eventos”
Hola Joaquín, como siempre excelente artículo de tu parte, gracias!!!
Es una herramienta fácil de usar y efectiva sobretodo siendo gratis.
Solo me surgen unas dudas que espero me puedas aclarar…
1.- Me sale todo en castellano menos aluna palabra com «All eventos» o «eventos for junio», ¿hay alguna manera, aunque sea mediante código, de cambiar esas palabras por «Todos» o «de»?
2.- Soy consciente de que no puedo programar eventos recurrentes ni lo necesito tal cual pero si un evento lo repito al cabo de por ejemplo 3 meses, ¿Es posible copiar ese evento y crear uno nuevo idéntico (cambiando fechas solamente)?
Muchas gracias y saludos!
Hola Sergio,
Para traducir un plugin pudes usar Loco Translate o algún plugin por el estilo.
Creo recordar que no es posible duplicar eventos, por lo que tendrás que volver a crearlo y copiar sus contenidos. Lo que a lo mejor si puedes hacer, es directamente modificar la fecha del evento que ya haya finalizado, entonces es posible que si valga, pruébalo.
Saludos Sergio, para duplicar un evento y solo cambiar algunos datos, puedes usar el plugin Duplicate Page (https://wordpress.org/plugins/duplicate-page/)
Saludos
Hola ¿Cómo puedo poner eventos que se repiten por ejemplo todos los lunes, todos los martes, todos los domingos, etc.?
¿Cómo puedo fijar los valores default por ejemplo que nunca permita comentarios?
Todos los eventos son en mi local ¿Cómo elimino la parte de ubicación?
Saludos
Buenas,
1.- No existe que yo sepa una forma de programar eventos repetitivos.
2.- Prueba a desactivar los comentarios de manera global desde la página de configuración de comentarios
3.- La parte de ubicación puedes no rellenarla o crear una ubicación y cargarla para todos los eventos.
Nota: ten en cuenta que este es un plugin gratuito y es posible que no disponga de todas las funcionalidades que deseas. Puedes buscar un plugin de eventos de pago que seguramente tendrá más funcionalidades
Me encanta el articulo y el Pluging, pero le veo una pega muy importante a no ser que se pueda solucionar.
Al instalarlo en mi wordpress la velocidad de carga baja mas de 10 puntos.
La verdad que es una lástima.
Buenas,
Imagino que solo será en las páginas en las que se muestre el calendario ¿no?
Supongo que con algún plugin de caché y minificación de archivos CSS, HTML,… se mejorará el rendimiento.