Change calender CSS - selected day only set border color

[biekeminne]

Hi,

When people come to me booking page, they see 3 days (minimu stay) selected in the calender.
At that point can not see if the selected days are free or closed, as the color changes of that date by the selection-color.
It could be that the day in the middle is closed and the other are free, but they can not see that.

Has anyone experience by only changing the BORDER-color on the kalender-day , so you would get better inside.
1/ you see the day you selected
2/ you see if that day is free or closed.

I'm testing in CSS but had no luck yet in finding a solution.

ps: I think that this should be default be changed for all users, as they miss out now very important information.

Here you can see what I mean.
http://pasteboard.co/3MOgZ6Yof.png
days selected from monday to saterday, but which days are open or closed?
you can not see that. beds24 should not change the day-color but only put a black border around the selected days, so you see what is not free.

I have already made other changes to avoid people clicking on the calender 2 times, thinking it will set begin and end date + little hand on begin and end date

.roomoffercalendarmonth{
pointer-events: none;
}
.monthcalendarhead{
pointer-events: auto;
}
.form-control{
cursor: pointer;
}

[annettemorgenroth]

This is how you do it:

In SETTINGS->BOOKING PAGE-> PAGE DESING -> STYLE set "Selected Dates Background" to have no color (pick the "color" with the red cross)

Go to SETTINGS->BOOKING PAGE->DEVELOPERS and add
.datestay {
border: 1px solid #2f2f2f important;
}

in "Custom CSS".

You can use any border color your like.

[buckinghamhouse]

There may be another solution if you are able to use the adaptive version of the page. This version of the system will show the unavailable dates crossed out even when selected. See my example:

cross out dates.png (165.74 KiB) Viewed 2929 times

[annettemorgenroth]

There may be another solution if you are able to use the adaptive version of the page. This version of the system will show the unavailable dates crossed out even when selected. See my example:

We recommend the use of the responsive booking page because it works much better on mobile devices and can deal better with multiple room bookings.

You can also do this with custom CSS on the responsive booking page:

.datenotavail {
text-decoration: line-through;
}