css class names meaning in react-big-calendar [using it with Selenium]

Question

I'm using selenium in javascript over a page that has the react-big-calendar plugin;

since I'm trying to do several selects and choosing the right day (today, the day current selected, the month current displaying, etc.) I'm trying to figure out some css-classes meaning:

the rbc-now class i thought it was the current day but it's not, since if i select an appointment this class has been applied to it too;
the rbc-current class is applied to ALL the day numbers like today, e.g. if today is the 18th day of the month, all the 18th of jan.,feb.,mar.,... have this class applied (is it right?)
the rbc-today class which I couldn't figure out what is.

I tried to search also in reactiflux discord like suggested in the last row of the above link but with no clue.

Does anyone knows what exactly indicates those classes?

score 2 · Accepted Answer · answered Feb 26 '21 at 13:55

Ok, i think I've managed it. I'll take as example the monthly view.

rbc-today: is the class used for the big div that corresponds to the first nearest appointment happening from today: this class gives the pale blue color to the day. It is assigned to a div that already has rbc-day-bg class:

    <div class="rbc-month-row">
        <div rbc-row-bg>
            <div class="rbc-day-bg"></div>
            <div class="rbc-day-bg"></div>
            [...]
            <div class="rbc-day-bg rbc-today"></div>    <---HERE
        </div>
    </div>

This div block represents the entire day.

rbc-now: this class put bold to the day number of the month (e.g. 28). Indicates the number of the month of the first nearest appointment happening from today. It is assigned to divs that already have an rbc-date-cell class and they are in the first rbc-row class under rbc-row-content:

    <div class="rbc-month-row">
        <div rbc-row-bg>
            <div class="rbc-day-bg"></div>
            <div class="rbc-day-bg"></div>
            [...]
            <div class="rbc-day-bg rbc-today"></div>    
        </div>

        <div class="rbc-row-content">
            <div class="rbc-row ">
                <div class="rbc-date-cell">
                    <a href="#">26</a>
                </div>
                <div class="rbc-date-cell">
                    <a href="#">27</a>
                </div>
                <div class="rbc-date-cell rbc-now">    <---HERE
                    <a href="#">28</a>
                </div>
            </div>
        </div>
    </div>

rbc-current: gives no style, acts exactly as rbc-now, but is assigned to every single number of the day of the month which is equal to the day of the month of the appointment, from that day onwards: e.g. if you put an appointment to march,28,2021, rbc-current will be applied to 28 of april, 28th may, 28th june...etc, but also 28 of jan 2022, 28 feb 2022...etc.

<div class="rbc-month-row">
        <div rbc-row-bg>
            <div class="rbc-day-bg"></div>
            <div class="rbc-day-bg"></div>
            [...]
            <div class="rbc-day-bg rbc-today"></div>
        </div>

        <div class="rbc-row-content">
            <div class="rbc-row ">
                <div class="rbc-date-cell">
                    <a href="#">26</a>
                </div>
                <div class="rbc-date-cell">
                    <a href="#">27</a>
                </div>
                <div class="rbc-date-cell rbc-now rbc-current">    <---HERE
                    <a href="#">28</a>
                </div>
            </div>
        </div>
    </div>

Hope this will be useful for future reference.

css class names meaning in react-big-calendar [using it with Selenium]

1 Answers1