Home / Questions / 563267
Accepted
Stephii Acevedo
Asked: 2022-10-20 20:56:46 +0800 CST 2022-10-20 20:56:46 +0800 CST

Remove timeGutter section from react big Calendar

  • 772

I am implementing "React Big Calendar" calendar from https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/additional-examples--custom-time-gutter-wrapperand in the link that I put it shows that the side corresponding to the hours can be customized, in my case I want to eliminate all that column, but in the documentation it does not show how or maybe I am the one that has not found the how, anyway I tried to see the documentation in the GitHub repository that has the link, but it has me too confused, so if someone has done something similar, can you help me or if you find how to do it, I have tried in several ways, calling the component from the CSS It works but since I also use the calendar in another section, the side of the time is eliminated from that calendar as well. Finally, if someone knows a way for the css component to only apply to a single calendar, it would help me a lot .rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot{ display: none; }that is the component from the css

javascript

1 Answers

  1. Best Answer

    If it can be removed by cssyou just have to wrap your component calendarin another div, assign a class to that divand then only execute the display:noneif it's in thatdiv

    <div class="remove-time">
   <Calendar ... />
</div>

    and then in yourcss

    .remove-time .rbc-time-gutter > .rbc-timeslot-group > .rbc-time-slot{
     display: none;
}

    Here is an example of how this would work. As you can see it only removes it in one of the two.

    .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>

    • 0