events:[ {overlap:false, display:'background', start:'2021-12-23 10:15:00', end:'2021-12-23 10:30:00'}, {overlap:false, display:'background', start:'2021-12-23 10:30:00', end:'2021-12-23 10:45:00'}, {overlap:false, display:'background', start:'2021-12-23 10:30:00', end:'2021-12-23 11:15:00'}, {overlap:false, display:'background', start:'2021-12-23 12:00:00', end:'2021-12-23 12:45:00'}, {overlap:false, display:'background', start:'2021-12-23 12:30:00', end:'2021-12-23 13:00:00'} ] Estoy usando Fullcalendar en la vista timeGridWeek y los eventos que se superponen se muestran con un color diferente al de los eventos que no se superponen.
¿Cómo puedo hacer que Fullcalendar use el mismo color para eventos superpuestos que para eventos no superpuestos?
No es realmente un color diferente, es solo que los elementos del evento de fondo tienen transparencia. En el mundo físico, cuando superpones dos cosas transparentes una encima de la otra, el resultado cuando miras a través de ellas es un color más oscuro porque la luz tiene que pasar a través de dos capas de filtrado en lugar de una. Ese comportamiento también se implementa en la forma en que CSS hace transparencia.
La única forma que conozco de garantizar una consistencia completa es eliminar la transparencia y usar un color sólido para los eventos de fondo en su lugar:
.fc-bg-event { opacity: 0.5 !important; }Demostración: https://codepen.io/ADyson82/pen/xxXdpYX
Sin embargo, creo que esto tiene algunas desventajas:
no puede ver las líneas de cuadrícula detrás del evento que muestran los intervalos de tiempo
realmente no puede ver dónde comienza y termina cada evento, por lo que es difícil saber si hay eventos separados en el calendario que se superponen o son consecutivos.
Deberá decidir si su deseo de un color de fondo uniforme es más importante que esos inconvenientes.