Tengo un React "FullCalendar" que representa muchas fechas. Pero quiero personalizar cada entidad de fecha con un color personalizado obtenido del servidor.

Soy consciente de pasar una 'clase' a las entradas de fecha "FullCalendar", pero dado que el color proviene del servidor y puede ser dinámico, es posible que deba usar algún tipo de estilo en línea.

También leí sobre la implementación de vistas personalizadas y estoy interesado en ello. Pero no pude implementarlo. También me preocupa el rendimiento, ya que tengo más de 100 fechas cargadas desde el servidor en un instante cuando utilizo una vista personalizada compleja para mi caso.

Este es mi código:

 import React, { useEffect, useState } from 'react' import FullCalendar from '@fullcalendar/react' import dayGridPlugin from '@fullcalendar/daygrid' export const Calender = ({ dates }) => { //State const [upcomingDates, setUpcomingDates] = useState([]) //Init function const init = () => { let dts = []; for (let i = 0; i < dates.length; i++) { dts.push( { title: dates[i].EventText, date: dates[i].Event, className: 'bg-dark calender-item', customColor: dates[i].CustomHexColor } ); } setUpcomingDates(dts); } //UseEffect useEffect(() => { init(); }, [dates]); //Custom content function renderEventContent(eventInfo) { return ( <div style={{ backgroundColor: eventInfo.event.customColor}}> <b>{eventInfo.timeText}</b> <i> {eventInfo.event.title}</i> </div> ) } return ( <div className="card card-calendar"> <div className="card-body p-3"> <FullCalendar headerToolbar={{ left: 'prev,next today', center: 'title' }} eventContent={renderEventContent} allDayClassNames="calendar" plugins={[dayGridPlugin]} initialView="dayGridMonth" weekends={true} events={upcomingDates} /> </div> </div> ); }

Según la respuesta del servidor, puedo ver 3 valores de color HEX distintos en respuesta para el EVENTO A, B y C.