How to select an element by part of class and text?

Question

For a calendar, I have it setup as this:

<div class="Calendars__day___1LZkL">1</div>
<div class="Calendars__day___1LZkL">2</div>
<div class="Calendars__day___1LZkL">3</div>
<div class="Calendars__day___1LZkL">4</div>

and so on. I want to select the calendar day by class name and text but can't figure out how to get it to work.

I currently have a function setup like this:

    calendarDay(day) {
        return $(`[class^="Calendars__day"][text()="${day}"]`);
    }

but this throws an error "invalid selector: invalid selector: An invalid or illegal selector was specified"

I'm using WDIO to run automation and that is what the selector is for

Answer 1

Figured it out, the selector to use that works is:

$(`//div[contains(@class, "Calendars__day") and contains(., ${day})]`);