Errors in calendar

Hi @knubew

Thanks for your feedback, we will have a look and see what we can do.

Have a great day.

I also encountered another problem when I open the calendar on a mobile phone.

1.) If another element exists under the “Search Box” element and the opened calendar overlaps this element, you can no longer close the calendar using the “Close calendar” link.

2.) In addition, the text “Close calendar” is disturbed by the font of the underlying element.

See https://i.imgur.com/wkxLRpb.jpg

See https://i.imgur.com/cH3YcyA.jpg

I noticed one more thing in the calendar that should be changed if possible.

On a desktop computer, the mouse pointer becomes a pointer (hand) in the open calendar once the mouse pointer reaches the date box surrounding the date number. However, a mouse click is only accepted if you exactly hit the date number with the mouse click, because the JavaScript Function “javascript:pickDate(2022,02,3,’b_checkin’,’b_frm’);” is bound to the date number and not to the surrounding field.

On mobile devices this is not a problem because a finger is quite large. But on desktop computers with a mouse and a mouse pointer, it is not immediately clear why a mouse click on the field is not accepted, even though the mouse pointer signals that the entire field is a link.

Hi @knubew

Thanks for your feedback, we are currently working on improving the plugin, as soon as we have an update, we will let you know.

Thanks for your patience.

Have a great day

Hi @knubew

Do you have a link to your implementation?
So we can have a look at the styling issues, it seems you have conflicting css.

Thanks.

Do you have a link to your implementation?
So we can have a look at the styling issues, it seems you have conflicting css.

I can give you access to our staging site, which is password protected. But I need an email address to send the auth data to, please.

Our production “HomeTIX – Online Ticketing Portal” site is under https://secure.hometix.eu/portal/. But the CSS for the “bookingcom-official-searchbox” on the production site is already tweaked (not optimal, but 95% working).

Hi @knubew,

Please use: [email protected]

Thanks

I have just sent the access data for the staging site to the email address.

Hi @knubew,

I checked and noticed some css that is causing the calendar to overlap:

table th, table td {
padding: .75em !important;
}

If you would remove the !important that would solve the overlapping.

Hi @sp-bookingcom,

thank you for the helpful hint. This was an old tweak of the CSS code of my Avada theme. I have now corrected this to:

/* AVADA Theme - Workaround for small mobiles */
@media screen and (max-width: 414px) {
  /* Reduce padding in tables */
  .table-1 table th, .table-1 table td {padding: .75em !important;}
  .table-2 table th, .table-2 table td {padding: .75em !important;}
}

Now the booking.com calendar popup is no longer affected by this CSS code.

Hi @sp-bookingcom,

by the way … my CSS tweaks for the Booking.com calendar popup currently look like this on the production site:

/* Booking.com - Calendar CSS tweaks - 10.02.2022 */
.b_calendarInner, .bos_calendar_month, .bos_calendar__row, #flexi_searchbox .bos_month_wrapper select, .b_calFuture a, .b_calClose a {
  color: #385c94 !important;
  opacity: inherit; /* For Google Chrome */
}
.bos_calendar_day-name, .b_calClose a, .bos-calendar__dates .bos-calendar__date--b_calSelected a {
  font-weight: bold;
}
.bos-calendar__dates .bos-calendar__date--b_calSelected {
  background-color: #385c94
}
.bos-calendar__dates .bos-calendar__date--b_calSelected a  {
  color: #ffffff !important;
}

/* Booking.com - Calendar CSS tweaks - 10.02.2022 */
@media screen and (min-width: 769px) {
  #flexi_searchbox #b_calendarPopup .b_popupInner {font-size: 15px;}
}

Hi @knubew,

We have updated our plugin to version 2.3.0, it contains a fix for the calendar languague when you select a date. Also some for the minor css fixes for the calendar and some new features for styling the selected dates and daynames.

Let us know if this works for you?

Have a great day.

Hi @sp-bookingcom,

thank you for all the changes and optimizations. I think it should now be perfectly adequate for the vast majority of your plugin users.

The only thing I noticed now was an inconsistency in the display of the date (Check-In-Date / Check-Out-Date).

When the “bookingcom-official-searchbox” is initially displayed, the two date values are displayed in the following format:
Mi 16 Feb 2022 Do 17 Feb 2022
For example, if I select a different check-out date, the newly selected date is displayed in this format (with dots):
Mi 16 Feb 2022 Do. 17 Feb. 2022

It would make sense to keep the format of the date values consistent and always use the country-specific date format. For example, for German-speaking countries (Germany, Austria, Switzerland), the correct date format would be:
Do. 17. Feb. 2022
So also with a point after the date number!

I still use some CSS tweaks for the calendar, but I’m okay with that. I will post my personal tweaks in case other users are interested and search for them in this forum.

Hi @knubew,

We have updated the plugin to version 2.3.1.

You might need to re-select pre-fix dates in the backend as we have updated the format for those 2 fields.
Calendar fields are only updated with the German layout.

Hope this works for you.

Have a nice day.

Hi,

thank you very much for the further optimization of the plugin and the corrections. Unfortunately, I won’t find time to test everything more closely until next week. I’ll be happy to get back to you with my feedback.

All the best…