If this element is the first one that doesn't have a class

Question

Ok this is weird, I know. But I have a calendar, and it shows two calendars, the second one is one month ahead than the first one which shows the current month. The user selects one date, and that day on the calendar becomes a filled in circle. Then, they select the second date, and the days in between get filled in as squares, so that the whole selection becomes an oval.

The problem with this is when they select a range that goes between the two months, the last day of the first month needs to be the closing circle, and the first day of the second month needs to be an opening circle.

Some other info:

• Those gaps after the 30th and before the 1st actually have data with the class .nextMonth and .lastMonth. So the 1st isn't actually the first element. Just the first one without that class.
• I have logic set up so that if the range goes between the two months, the last day is always the closing circle and the first day is always the opening. The problem is, what if the user selects just the 30th through the 1st? Then we have this awkward selection, when both of those dates need to be circles.
• Each number is a div with the class .day, inside of a td. If it's selected, it has the class .checked.

SO MY MAIN QUESTION IS: How do you say "If the ending selection is the first element in the calendar that doesn't have the class .lastMonth, change the css styling"

Hope that's enough info. Thanks!!

Answer 1

you could add a CSS rule that applies for the selection only on first cell and last cell to always be rounded

let say you have a .month for the month and .day element for the cell, you could do something like

.month .day:first-child {
    border-radius: 6px 0 0 6px;
}
.month .last-child {
    border-radius: 0 6px 6px 0;
}

assuming that the background color is not a floating element.

If you could provide a snippet of the generated HTML it would be easier to help you.

if we take the javascript approach, I would create a object service as a model to represent the selection and create 2 different instance to represent the range in each month to facilitate but this again is a very abstract proposition as we don't have any example of the HTML nor the calendar plugin used in your example.

hope that the CSS portion gived you ideas