Page 1 of 1
How to target the check in and check out day of the calendar
Posted: Thu Sep 22, 2022 10:36 am
by oficpropt
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
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>
Re: How to target the check in and check out day of the calendar
Posted: Thu Sep 22, 2022 12:36 pm
by oficpropt
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>
Re: How to target the check in and check out day of the calendar
Posted: Fri Sep 23, 2022 6:08 am
by annettemorgenroth
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;}
Re: How to target the check in and check out day of the calendar
Posted: Fri Sep 23, 2022 8:55 am
by oficpropt
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.
Re: How to target the check in and check out day of the calendar
Posted: Fri Sep 23, 2022 9:27 am
by annettemorgenroth
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.
Re: How to target the check in and check out day of the calendar
Posted: Fri Sep 23, 2022 10:53 am
by oficpropt
Here are some screenshots for better understanding:
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:
