Understanding class names in React-Big-Calendar and how to interact with them using Selenium

When using selenium with JavaScript on a page that features the react-big-calendar plugin, I encountered some confusion regarding the CSS classes used:

  • The rbc-now class initially seemed to represent the current day, but it was also applied when selecting an appointment.
  • The rbc-current class is applied to all day numbers like today's date, not just the current day.
  • I couldn't determine the meaning of the rbc-today class.

Despite searching on Reactiflux Discord as suggested in the documentation, I couldn't find any conclusive answers. Does anyone have insight into the specific meanings of these classes?

javascriptseleniumreact-big-calendar

Answer №1

Great, I believe I have successfully accomplished it. Let's use the monthly view as an example.

  • rbc-today: represents the big div that corresponds to the closest appointment from today. This class gives a pale blue color to the day. It is assigned to a div that already has the 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 particular div block represents the entire day.

  • rbc-now: this class makes the day's number of the month bold (e.g. 28) and indicates the month number of the nearest appointment happening from today. It is assigned to divs that already have an rbc-date-cell class and 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: has no specific style, functions exactly like rbc-now, but is applied to every single day of the month which matches the date of the appointment, from that day onwards. For example, if you set an appointment for March 28, 2021, rbc-current will be added to April 28th, May 28th, June 28th, and so on, as well as January 28, 2022, February 28, 2022, and so forth.
<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>

I hope this explanation can serve as a helpful point of reference for future needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of AngularJS ng-model seems to be disrupted when it is set within a directive

Is it possible to automatically generate the ng-model of an input based on the name of the input itself? This requirement arises from using Html.TextBoxFor in MVC, which creates the necessary name for binding the input to the server-side model. To streamli ...

javascriptangularjsasp.net-mvcrazor

A method to efficiently send multiple axios GET requests by incrementing the URL parameters

Is there a way to efficiently send multiple HTTP GET requests using Axios? For instance: let maxRequests = 3000; let currentRequest = 0; do { currentRequest = currentRequest + 1; await response = axios.get(`https://example.com/${currentRequest}` ...

javascriptnode.jsecmascript-6axios

Using Javascript to set a maximum height limit for rows or cells within an HTML table by adjusting the table width

I am currently working on a straightforward JavaScript solution that proves to be useful when utilizing overflow-x:auto in tables. The script aims to decrease the height of rows by increasing the width of the table until the rows reach the desired height. ...

javascript

What kind of data structure is suitable for a MediaStream when passing it as a prop in a Vue component

Currently, I have set up a mediastream (multi WebRTC) and plan on placing each MediaStream into the child component that contains a video tag. The stream type is MediaStream, however there is no corresponding type for a Vue prop. Refer to the Vue documenta ...

javascriptvue.jsvuejs2

The function of window.location is a mixed bag of success and failure

I am encountering an issue with a JavaScript function that is supposed to navigate to the next page when clicking a button. The function works correctly for step 1, but it fails for step 2. Upon executing the function using nextstep = 'form', _b ...

javascriptphphtmldebuggingnavigation

Issue with ngModel value not being accurately represented by checkbox state in Angular 2

My issue lies with a checkbox that does not reflect its ngModel value. To provide some context, I have a Service managing a list of products and a component responsible for displaying this list and allowing users to select or deselect products. If a user d ...

javascriptangularcheckboxangular2-templateangular2-ngmodel

retrieve information at varying intervals through ajax

In my web page, there are two div elements that both fetch server data using AJAX. However, div-a retrieves data every second while div-b retrieves data every minute. How can I adjust the frequency at which each div fetches server data? ...

javascriptajax

Assigning a changing label to a radio button

Looking to create a dynamic form where clicking a button calls a JavaScript function. Here's the code snippet: function addRadioButton(type){ var element = document.createElement("input"); //Set attributes for the element. element.setAttr ...

javascripthtml

Utilize Angular 2 to upload and access files directly on the client side

How can I obtain log file(s) from a user so that I can analyze them? Is there a way to create a drop area where the user can upload a file, and then I can read it using JavaScript? I am currently using Angular2 rc5 and have node.js running on the backend, ...

javascriptangulartypescriptclient-side

Utilize AngularJS to implement ngClick function through JavaScript

As I work on a small web page for mobile devices using Angular, I am looking to implement a toggle click listener for the entire page. However, I want to achieve this in an Angular-specific way without resorting to using ng-Click with conditional statement ...

javascriptangularjsaddeventlistenerangularjs-ng-click

Utilizing Google Maps API to update ImageMapType Overlay

I am utilizing the Google Maps JavaScript API to showcase weather data from a tile server. The specific tile server can be accessed here: To display the tile server, I am utilizing an ImageMapType and incorporating it into the Google Map's overlayMap ...

javascriptgoogle-mapsgoogle-maps-api-3

Error message: The checkbox cannot be clicked as it is currently not visible when using Selenium WebDriver with Java

I need to choose a checkbox that is included in the HTML code snippet below. The checkbox is located within an input tag. <div formarrayname="entityTypes" fxlayout="" fxlayoutgap="10px" class="ng-untouched ng-pristine ng-valid ng-star-inserted" style ...

javaseleniumxpathcss-selectorswebdriverwait

Rearrange several divs within a container by using the child input element

My objective is to use jQuery to rearrange the content of a div, including its child elements, by only referencing the input ids. Below is my HTML structure: <div id="fields"> <div class="field fieldContainer"> <label for="field ...

javascriptjqueryhtml

Steps for creating a monochromatic blinking background for notifications

Upon receiving a notification, I retrieve it from the database and activate the blinking effect on the notification box. However, I would like to stop the blinking once the user clicks to view the notification and maintain a single color display. For examp ...

javascriptjqueryajax

Easy steps to automatically disable a checkbox once the expiration date has been reached

I have this PHP code that retrieves values from my database. I want to prevent users from selecting or modifying items with expired dates. Could you assist me with this? The code below currently displays 'Expired' and 'Not Expired' on ...

javascriptphpmysql

"Enabling browser.WaitForAngularEnabled(true) causes the browser to wait until the default jasmine time limit is

Currently, I am focused on Angular 4 test automation and utilizing the Protractor tool. Through various video tutorials, I have come to the conclusion that using WAIT functions for synchronization is unnecessary when working with Protractor. Whenever I inc ...

angularseleniumprotractorautomated-testse2e-testing

Sharing JSON data between PHP and JavaScript/AJAX

In order to validate strings on my website, I am developing a validation mechanism using both Javascript and ajax for client-side validation and PHP for server-side validation. It is essential for both PHP and Javascript to utilize the same variables, suc ...

phpjavascriptajaxjson

Repeatedly invoking the debounce function

When invoking the searchkeyword function on keyUp, my goal is to prevent or clear the timeout of $emit when a new letter is quickly typed. This way, I only want $emit to be called a few times. However, currently, the console triggers debounce on every se ...

javascriptvue.jsecmascript-6debouncing

Facing a Challenge with Textures in ThreeJS ShaderMaterial

I seem to be having trouble with my texture not being displayed properly in three.js r71. The plane is just showing up black and I can't figure out what's wrong with my ShaderMaterial. I could really use another set of eyes to help me identify th ...

javascriptthree.jswebglshader

Making Cross-Origin Requests using jQuery's Ajax function and PHP

I've attempted numerous times to make this function properly, but for some reason, I just can't seem to figure it out. Initially, everything was working flawlessly for a few requests, and then out of the blue, it stopped functioning. Below is t ...

javascriptphpjqueryajaxcors