Fullcalendar View
Un plugin de estilo de Views que renderiza contenido de Drupal en un calendario JavaScript interactivo FullCalendar con soporte para edición mediante arrastrar y soltar, creación de eventos y eventos recurrentes.
fullcalendar_view
Install
composer require 'drupal/fullcalendar_view:^5.2'
Overview
Fullcalendar View proporciona un potente plugin de estilo de Views que transforma el contenido de Drupal en una visualización de calendario interactiva impulsada por la biblioteca JavaScript FullCalendar. El módulo soporta múltiples modos de vista incluyendo día, semana, mes y lista, con cambio fluido entre ellos.
El calendario ofrece una rica interactividad incluyendo edición de eventos mediante arrastrar y soltar, redimensionamiento de eventos para ajustar la duración, y doble clic para crear nuevos eventos directamente en el calendario. Los eventos pueden codificarse por colores basándose en términos de taxonomía o tipos de contenido, facilitando la categorización visual de diferentes tipos de eventos.
Las características avanzadas incluyen soporte para eventos recurrentes usando el estándar RRule, integración con días festivos de Google Calendar, manejo de zonas horarias, soporte multilingüe con más de 50 opciones de idioma, y diálogos emergentes personalizables para detalles de eventos. Los eventos pueden mostrarse en ventanas emergentes modales o barras laterales off-canvas usando el framework AJAX de Drupal.
El módulo carga automáticamente las bibliotecas JavaScript requeridas desde CDN si no hay copias locales disponibles, simplificando la instalación y reduciendo la carga de mantenimiento.
Features
- Visualización de calendario interactivo con vistas de día, semana, mes y lista
- Edición de eventos mediante arrastrar y soltar para cambiar fechas y horas
- Redimensionamiento de eventos para ajustar la duración (para eventos de todo el día)
- Doble clic en el calendario para crear nuevos eventos
- Codificación por colores de eventos basada en términos de taxonomía o tipos de contenido
- Soporte de eventos recurrentes usando el estándar RRule (RRULE) con fechas excluidas
- Integración con días festivos públicos de Google Calendar
- Soporte multilingüe con más de 50 idiomas y selector de idioma del lado del cliente
- Diálogos emergentes personalizables usando la biblioteca JSFrame para descripciones de eventos
- Modos de visualización con ventana emergente modal y barra lateral off-canvas para detalles de eventos
- Diseño responsive con vistas predeterminadas separadas para escritorio y móvil
- Conversión automática de zona horaria de UTC a zona horaria del usuario
- Formato de hora configurable, duración de intervalos y rango de tiempo de visualización
- Enlaces de navegación para nombres de días/semanas a las vistas correspondientes
- Límite de eventos por día con popover para eventos adicionales
- Protección con token CSRF para operaciones de actualización de eventos
- Respaldo automático a CDN cuando las bibliotecas locales no están instaladas
- API de plugins para extender la funcionalidad del calendario con procesadores personalizados
- Prellenado de campos de fecha al crear nuevos eventos desde clics en el calendario
Use Cases
Calendario de Gestión de Eventos
Crear una vista de calendario para gestionar eventos organizacionales. Configurar un tipo de contenido Evento con campos de fecha de inicio, fecha de fin y taxonomía de categoría. Usar el calendario para mostrar visualmente todos los eventos codificados por color según categoría. El personal puede arrastrar y soltar eventos para reprogramar y hacer doble clic para crear nuevos eventos directamente desde la interfaz del calendario.
Sistema de Reserva de Recursos
Implementar un calendario de reserva de salas o equipos. Crear un tipo de contenido Reserva con campos de fecha/hora y una taxonomía de recursos. Configurar el calendario para mostrar reservas codificadas por color según recurso. Habilitar la configuración de superposición de eventos para prevenir doble reserva, y usar el diálogo emergente para mostrar detalles de reserva sin salir de la página del calendario.
Calendario de Contenido Editorial
Construir un calendario de planificación de contenido para equipos editoriales. Añadir un campo de fecha de publicación programada a los tipos de contenido Artículo y Página. Crear una vista de calendario filtrada por estado de contenido para mostrar próximas publicaciones. Los editores pueden arrastrar artículos para reprogramar y ver toda la línea de contenido de un vistazo.
Sitio de Eventos Multiidioma
Configurar un calendario de eventos internacional con soporte multilingüe. Configurar el idioma del calendario para usar el idioma actual de la página y opcionalmente habilitar el selector de idioma del lado del cliente. Los usuarios pueden cambiar entre más de 50 idiomas soportados para ver nombres de meses, nombres de días y texto de interfaz en su idioma preferido.
Calendario de Eventos Recurrentes
Crear un calendario para eventos con patrones recurrentes como reuniones semanales o revisiones mensuales. Añadir un campo de texto para almacenar cadenas RRule (ej. 'RRULE:FREQ=WEEKLY;BYDAY=MO,WE,FR') y configurar el calendario para usar este campo para eventos recurrentes. El calendario genera automáticamente todas las ocurrencias basándose en la regla.
Calendario con Días Festivos
Construir una línea de tiempo de proyecto o calendario de programación que muestre días festivos públicos. Habilitar la integración con Google Calendar y seleccionar el calendario de días festivos del país o religioso apropiado. Los días festivos pueden mostrarse como colores de fondo o como eventos regulares para ayudar con la planificación alrededor de días no laborables.
Tips
- Use el valor [ ] para timeFormat para ocultar completamente los prefijos de hora en los títulos de eventos en la vista mensual
- Establezca default_mobile_view a 'listYear' para mejor experiencia de usuario móvil ya que muestra eventos como una lista desplazable
- Para eventos recurrentes, use la herramienta generadora de RRule en línea en jakubroztocil.github.io/rrule para crear cadenas RRULE válidas
- Los colores de eventos predeterminan a #3a87ad (azul) cuando no se especifica color de taxonomía o tipo de contenido
- El módulo soporta campos daterange nativamente - el end_value se extrae automáticamente de campos daterange
- Use el parámetro de consulta ?initialDate=YYYY-MM-DD para enlazar directamente a una fecha específica en el calendario
- Al usar colores de taxonomía, si un nombre de término es un color hexadecimal válido (ej. #FF5733), se usará como color predeterminado para ese término
- El popup de descripción muestra el último campo en la lista de campos de su vista - ordene los campos acordemente
- Las bibliotecas se cargan desde CDN automáticamente si no están instaladas localmente - no se requiere instalación manual de bibliotecas para uso básico
- Use la opción dialogModal con dialogCanvas para mostrar detalles de eventos en una barra lateral off-canvas en lugar de un modal
- Todas las actualizaciones de eventos mediante arrastrar y soltar están protegidas por tokens CSRF y requieren que el usuario tenga permiso de actualización en la entidad
- El módulo funciona con cualquier tipo de entidad, no solo nodes - perfiles de usuario, entidades personalizadas, etc. pueden mostrarse
Technical Details
Hooks 3
fullcalendar_view_fullcalendar_view_processor_info_alter
Altera la lista de definiciones de plugins FullcalendarViewProcessor. Permite a los módulos modificar o añadir plugins de procesador de vista personalizados.
hook_library_info_alter
El módulo implementa hook_library_info_alter para reemplazar automáticamente archivos de biblioteca local faltantes con versiones CDN.
hook_form_node_form_alter
El módulo implementa hook_form_BASE_FORM_ID_alter para prellenar campos datetime al crear eventos desde doble clic en el calendario. Usa los parámetros de consulta 'start' y 'start_field'.
Drush Commands 1
drush fullcalendarview:generate
Genera una vista de calendario usando FullcalendarView. Puede ejecutarse interactivamente con indicaciones o no interactivamente proporcionando todos los argumentos.
Troubleshooting 7
Verifique la consola del navegador para errores JavaScript. Asegúrese de que las bibliotecas requeridas se estén cargando (ya sea desde CDN o local). Verifique que la vista tenga un campo de fecha de inicio configurado y contenga resultados. Compruebe que el formato de vista esté establecido a 'Full Calendar Display'.
Esto típicamente es un problema de zona horaria. Verifique la configuración de zona horaria del campo de fecha en la configuración del campo de la vista. El módulo convierte fechas UTC a la zona horaria especificada. Asegúrese de que la zona horaria de su sitio Drupal esté correctamente configurada en /admin/config/regional/settings.
Verifique que 'Allow event editing' esté marcado en los ajustes de visualización del calendario. Asegúrese de que el usuario actual tenga permiso para actualizar la entidad. Compruebe que la entidad no sea un evento recurrente (los eventos recurrentes son de solo lectura). Verifique que el campo de fecha no sea un campo de solo fecha para eventos con componentes de hora.
Asegúrese de que 'Event bundle (Content) type' esté establecido en los ajustes de visualización. Verifique que el usuario actual tenga permiso para crear contenido de ese tipo. La función solo funciona para usuarios autenticados con permisos apropiados.
Verifique que tanto 'Event Taxonomy Field' como 'Vocabularies' estén seleccionados en los ajustes de Legend Colors. Asegúrese de que el vocabulario seleccionado coincida con el referenciado por el campo de taxonomía. Compruebe que se hayan establecido valores de color para los términos de taxonomía.
Verifique que el campo RRule contenga una cadena RRULE válida incluyendo el componente DTSTART. Use la herramienta RRule en línea para validar la sintaxis de su regla. Note que los eventos recurrentes no pueden editarse mediante arrastrar y soltar.
Asegúrese de tener una clave API de Google Calendar válida con la API de Calendar habilitada. Verifique que la clave API no tenga restricciones de referrer que bloqueen su dominio. Revise la consola del navegador para mensajes de error de la API.
Security Notes 5
- Las actualizaciones de eventos vía AJAX están protegidas por tokens CSRF generados por sesión de usuario
- Solo los usuarios con permiso de actualización de entidad pueden modificar eventos mediante arrastrar y soltar
- La creación de eventos requiere permisos apropiados de creación de entidad para el tipo de bundle especificado
- La salida de título y descripción está sanitizada usando Xss::filter() y Xss::filterAdmin()
- El módulo valida permisos de usuario antes de renderizar controles de edición o procesar actualizaciones