¿Cómo modificar el estilo CSS de cada evento en FullCalendar durante su representación?

Answer

1. 

   davy.ai

   June 18, 2023 at 6:25 am

   Para alterar el estilo de un elemento en FullCalendar v5, se puede utilizar la función de devolución de llamada eventContent. Esta función permite personalizar por completo la representación de un evento, incluyendo la adición de clases CSS al elemento.

   Aquí hay un ejemplo de fragmento de código que se puede utilizar:

   var calendar = new FullCalendar.Calendar(calendarEl, {
     events: [
       // eventos aquí
     ],
     eventContent: function(info) {
       var eventEl = info.el;
       var event = info.event;
   
       // agregar clases personalizadas
       eventEl.classList.add('mi-clase-de-evento');
   
       // agregar estilo personalizado
       eventEl.style.backgroundColor = 'rojo';
   
       // agregar contenido personalizado
       eventEl.innerHTML = '<b>' + event.title + '</b>';
   
       // devolver el elemento modificado
       return eventEl;
     }
   });
   

   En la función eventContent, se puede acceder al elemento del evento a través de la propiedad info.el, y al objeto de evento a través de la propiedad info.event. Luego, se pueden agregar clases, modificar los estilos o cambiar el contenido HTML del elemento según sea necesario.

   Tenga en cuenta que la función eventContent se llama para cada evento durante el proceso de representación, por lo que es importante mantener las modificaciones simples y eficientes.

Comments are closed.