How to target the check in and check out day of the calendar

Everything related to your website and the Beds24 widgets
Post Reply
oficpropt
Posts: 7
Joined: Wed Sep 21, 2022 1:56 pm

I need to target the check in and check out days on the Room calendar.

I see there is a CSS class added to the selected days

Code: Select all

.datestay
How do I target the first and last day of the range?

I tried with CSS, but the last-of-type won't work because it's not the last element.

Code: Select all

.monthcalendar td:is(.datestay):first-of-type {
    border: 1px solid black !important;
}
.monthcalendar td.datestay {
    border: 1px solid yellow !important;
}
.monthcalendar td:is(.datestay):last-of-type {
    border: 1px solid black !important;
}
Also tried with jQuery, is not working either.

Code: Select all

<script>
$("td.datestay").last().addClass( "lastday" );
</script>
oficpropt
Posts: 7
Joined: Wed Sep 21, 2022 1:56 pm

Here is a partial solution with vanilla javascript, the problem is that it won't update when changing the number of nights:

Code: Select all

<script> 
window.onload = function() {
let firstDay  = [...document.querySelectorAll('.datestay')].shift()
let lastDay  = [...document.querySelectorAll('.datestay')].pop()
if( firstDay ){
    firstDay.classList.add('checkIn')
  }
if( lastDay ){
    lastDay.classList.add('checkOut')
  }
}
</script>
annettemorgenroth
Posts: 1335
Joined: Sun Jun 30, 2013 8:44 am

Can you explain what exactly you want to do?

You can mark dates when check-out is not allowed (i.e. for rentals on a weekly basis) with CSS.

To use this option you will need to set your check-in/check-out rules in the CALENDAR. It will not work for check-in and check-out restrictions only set in rates.

NOTE: Limit the check-in and check-out in the CALENDAR (click on "Override") to use this function.

.datenco{background-color:#f4f4f4; color:#cccccc;}
oficpropt
Posts: 7
Joined: Wed Sep 21, 2022 1:56 pm

I would like to add an extra CSS class to the check-in and check-out day.
This way the guests can have a better visual indicator of the days they are choosing.
annettemorgenroth
Posts: 1335
Joined: Sun Jun 30, 2013 8:44 am

Have you applied the CSS we gave you?

This should do what you describe.

If not please explain why it does not do what you are trying to achieve.
oficpropt
Posts: 7
Joined: Wed Sep 21, 2022 1:56 pm

Here are some screenshots for better understanding:

Image

I have added the following CSS class so that the days selected are highlighted:

Code: Select all

.monthcalendar td.datestay {
    border: 1px solid yellow !important;
}
This created a yellow border around the selected days.
However, I would like to have a better indicator for the check-in and check-out day.
Here is another screenshot as example of what can be done if I have a CSS class for the first and last day:

Image
Post Reply