Title: Errors in calendar Last modified: February 4, 2022 --- # Errors in calendar * [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 4 months ago](https://wordpress.org/support/topic/errors-in-calendar/) * Hi, * so, here is my description of some errors in the calendar popup and some optimization suggestions. * **A newly selected date is displayed in the wrong language** I am currently using the “bookingcom-official-searchbox” on a German-language website. The initial display is okay. See [https://i.imgur.com/gUgmVnS.jpg](https://i.imgur.com/gUgmVnS.jpg) [](https://i0.wp.com/i.imgur.com/gUgmVnS.jpg?ssl=1) * But when I select a new date for “Check-In-Date” in the pop-up calendar, the new date values are displayed in English format and NOT in German format. See [https://i.imgur.com/QDWcuD2.jpg](https://i.imgur.com/QDWcuD2.jpg) [](https://i0.wp.com/i.imgur.com/QDWcuD2.jpg?ssl=1) * **Selecting a new date causes a “Deprecation warning” in the browser console** * ``` Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info. Arguments: [0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 2022-2-10, _f: undefined, _strict: undefined, _locale: [object Object] t/<@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:3274 ba/<@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:21836 ba@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:21887 Sa@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:22453 Ha@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:22535 M@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/moment-with-locales.min.js?x10279:1:209 pickDate@https://my.xyz.com/portal/wp-content/plugins/bookingcom-official-searchbox/assets/js/bos_date.js?x10279:307:29 @javascript:pickDate(2022,02,10,'b_checkin','b_frm');:1:9 ``` * **The pop-up calendar needs some CSS tweaking** 1.) The pop-up calendar needs a z-index for the CSS id “b_calendarPopup” to ensure that the element covers all other elements that may be located under the “bookingcom-official-searchbox”. CSS example: #b_calendarPopup {z-index: 100;} * 2.) When the pop-up calendar is displayed, some items (in my case) are not displayed correctly. See for [https://i.imgur.com/XJRziHA.jpg](https://i.imgur.com/XJRziHA.jpg) [](https://i0.wp.com/i.imgur.com/XJRziHA.jpg?ssl=1) * **Here are some custom CSS changes I had to make in my case:** a) The text color for the days of the week is white (#FFFFFF) in my case. So of course you can’t see the days of the week on a white background. This is probably reflecting the text color selected for the “search-box”. I changed the font color for the days of the week to “#385c94” and set the “font-weight” to “bold”. * b) I changed the background color of the “Selected-Day Container” to “#385c94”. * c) I changed the font color of the date number in the “Selected-Day Container” to “#FFFFFF” and I set the “font-weight” to “bold”. * I fixed the display errors with some custom CSS, but I think it would make sense to offer the user some additional CSS settings for the pop-up calendar as well. * ``` /* Booking.com - Calendar - CSS Tweaking - 04.02.2022 */ #b_calendarPopup { z-index: 100; } .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; } ``` * See the result: [https://i.imgur.com/XyaQRMh.jpg](https://i.imgur.com/XyaQRMh.jpg) [](https://i0.wp.com/i.imgur.com/XyaQRMh.jpg?ssl=1) * Finally, I would like to point out that the selection of a small font in the pop-up calendar is more suitable for mobile devices. For desktops, the small font is not so good. * ``` #flexi_searchbox { font: small/1.2 Arial,Helvetica,sans-serif; font-weight: normal; font-size: small; line height: 1.2; font-family: Arial, Helvetica, sans-serif; ``` * I would suggest that the small font in the CSS file “bos_searchbox.css” is better offloaded into a media query for mobile devices and a normal font size is used for desktop computers. * **I haven’t added this change to my custom CSS code yet!** * Sorry – I know these are a lot of suggested changes/requests. But I think that even users who have no knowledge of CSS should be able to influence the display of the pop-up calendar in an uncomplicated way with additional CSS settings. * Best regards Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/errors-in-calendar/page/2/?output_format=md) [→](https://wordpress.org/support/topic/errors-in-calendar/page/2/?output_format=md) * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 4 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15328065) * Hi [@knubew](https://wordpress.org/support/users/knubew/) * Thanks for your feedback, we will have a look and see what we can do. * Have a great day. * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 4 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15331066) * 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](https://i.imgur.com/wkxLRpb.jpg) [](https://i0.wp.com/i.imgur.com/wkxLRpb.jpg?ssl=1) * See [https://i.imgur.com/cH3YcyA.jpg](https://i.imgur.com/cH3YcyA.jpg) [](https://i0.wp.com/i.imgur.com/cH3YcyA.jpg?ssl=1) * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 4 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15331096) * 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. * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15343576) * Hi [@knubew](https://wordpress.org/support/users/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 * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15343671) * Hi [@knubew](https://wordpress.org/support/users/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. * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15346383) * > 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](https://secure.hometix.eu/portal/)” site is under [https://secure.hometix.eu/portal/](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).** * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15347134) * Hi [@knubew](https://wordpress.org/support/users/knubew/), * Please use: [wp-plugins@booking.com](https://wordpress.org/support/topic/errors-in-calendar/wp-plugins@booking.com?output_format=md) * Thanks * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15347315) * I have just sent the access data for the staging site to the email address. * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15349947) * Hi [@knubew](https://wordpress.org/support/users/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. * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15352153) * Hi [@sp-bookingcom](https://wordpress.org/support/users/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. * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15352172) * Hi [@sp-bookingcom](https://wordpress.org/support/users/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;} } ``` * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15366236) * Hi [@knubew](https://wordpress.org/support/users/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. * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15370361) * Hi [@sp-bookingcom](https://wordpress.org/support/users/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. * Plugin Author [SPBooking.com](https://wordpress.org/support/users/sp-bookingcom/) * (@sp-bookingcom) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15403048) * Hi [@knubew](https://wordpress.org/support/users/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. * Thread Starter [knubew](https://wordpress.org/support/users/knubew/) * (@knubew) * [4 years, 3 months ago](https://wordpress.org/support/topic/errors-in-calendar/#post-15411026) * 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… Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/errors-in-calendar/page/2/?output_format=md) [→](https://wordpress.org/support/topic/errors-in-calendar/page/2/?output_format=md) The topic ‘Errors in calendar’ is closed to new replies. * ![](https://ps.w.org/bookingcom-official-searchbox/assets/icon-128x128.png?rev =1134398) * [Booking.com Official Search Box](https://wordpress.org/plugins/bookingcom-official-searchbox/) * [Frequently Asked Questions](https://wordpress.org/plugins/bookingcom-official-searchbox/#faq) * [Support Threads](https://wordpress.org/support/plugin/bookingcom-official-searchbox/) * [Active Topics](https://wordpress.org/support/plugin/bookingcom-official-searchbox/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/bookingcom-official-searchbox/unresolved/) * [Reviews](https://wordpress.org/support/plugin/bookingcom-official-searchbox/reviews/) * 19 replies * 2 participants * Last reply from: [knubew](https://wordpress.org/support/users/knubew/) * Last activity: [4 years ago](https://wordpress.org/support/topic/errors-in-calendar/page/2/#post-15631030) * Status: not resolved