estoy implementando el calendario "React Big Calendar" de https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/additional-examples--custom-time-gutter-wrapper y en link que coloque se muestra que se puede personalizar el costado correspondiente a las horas, en mi caso quiero eliminar toda esa columna, pero en la documentación no enseña como o tal vez yo soy la que no ha encontrado el como, de todas maneras intente ver la documentación en el repositorio de GitHub que posee el link, pero me tiene demasiado confundida, así que si alguien ha hecho algo parecido pueda ayudarme o si encuentran el como hacerlo, he intentado de varias maneras, llamando el componente desde el CSS me funciona pero como el calendario también lo uso en otro apartado, se elimina de ese calendario igual el costado del tiempo, si alguien sabe por ultimo alguna manera de que el componente del css solo aplique para un solo calendario, me ayudaria demasiado .rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot{ display: none; }
ese es el componente desde el css
Añade un comentario
|
1 respuesta
Si se puede eliminar mediante css
solo tienes que rodear tu componente calendar
en otro div
, asignarle una clase a ese div
y después solo ejecutar el display:none
si está en ese div
<div class="remove-time">
<Calendar ... />
</div>
Y luego en tu css
.remove-time .rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot{
display: none;
}
Te dejo un ejemplo acá de cómo funcionaría esto. Como puedes ver solo lo elimina en uno de los dos.
.rbc-timeslot-group {
display:flex;
border: 1px solid black;
}
.remove-time .rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot{
display: none;
}
<div class="rbc-time-gutter">
<div class="rbc-timeslot-group">
<div class="rbc-time-slot">
<ul>
<li>9:00</li>
<li>10:00</li>
<li>11:00</li>
<li>12:00</li>
</ul>
</div>
<div class="calendar">
<ul>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
<li>Jueves</li>
</ul>
</div>
</div>
</div>
<div class="remove-time">
<div class="other-div">
<div class="rbc-time-gutter">
<div class="rbc-timeslot-group">
<div class="rbc-time-slot">
<ul>
<li>9:00</li>
<li>10:00</li>
<li>11:00</li>
<li>12:00</li>
</ul>
</div>
<div class="calendar">
<ul>
<li>Lunes</li>
<li>Martes</li>
<li>Miércoles</li>
<li>Jueves</li>
</ul>
</div>
</div>
</div>
</div>
</div>
-
Graciaaas! no sé como no se me ocurrió antes, un grande! Commented el 20 oct. 2022 a las 16:46