WP Admin / Booking overlapping issue.

[Ryan Labelle]

Hi there!

Under Admin > Bookings > Calendar would it be possible to Increase Day Column Width + Row Height?

It would be helpful to increase the day column width + row height to facilitate readability of booking IDs when one-day bookings are made back to back. Currently, our 5-digit Booking IDs (which are, in effect, serialized global post IDs) overlap each other and become unreadable on all mobile screens and all laptop/desktop screens below 1500px wide when 2 or more bookings are adjacent. This will also provide more space for adding metadata to the calendar blocks (see related enhancement #2 below).

See screen shot attached from laptop screen with 3 back-to-back one-day bookings.

[Andre Flores]

Hi, Ryan!

You may try adding the following CSS code under Appearance ->Customize ->Additional CSS:

.mphb-bookings-calendar-wrapper table.mphb-bookings-date-table td {
    min-width: 15px;
}

Increase the 15px value (it’s the original value) in order to add more space between back-to-back booking ID’s.
If the issue persists, I would recommend that you submit your request at: https://support.motopress.com/hc/en-us/requests/new providing temporary access to your WordPress dashboard.

Regards,
Andre

[Ryan Labelle]

Awesome. Thanks!

[Andre Flores]

Hi, Ryan!

You are always welcome 🙂

Regards,
Andre

[Thomas Kolnowski]

Hello, Andre and MotoPress team. This CSS is very helpful to make the calendar much more readable – thanks!

We have provided this to our hotelier (we are using 45px for column width), and they are pleased. Now, they have asked for 2 additional tweaks.

1) Is there a way to have the Bookings calendar center itself on the current date column as the page is displayed or when a new Period is selected? Since the calendar table viewport is wider than the screen, the current date’s bookings are often off-screen until they scroll over to them. We did not see an immediate way to do this via a CSS or jQuery snippet.

2) Is there a way to have the Bookings calendar default to the Year view instead of Monthly view to give them seamless scrolling? We found we could use a simply jQuery snippet to pre-populate the Period selector with “Year” but did not stumble upon a way programmatically code a submit for the “Show” button:

jQuery(document).ready(function( $ ){
   $("#mphb-bookings-calendar-filter-period").val("year");
});

Thank you again for the great support.

Thomas Kolnowski
Digitized House Media, LLC

[J. Davis]

Hi Thomas,

Thanks for your question. Unfortunately, it is not possible to fulfill any of the requested features at the moment but we will keep your request in mind for the time when we start working on enhancing the back-end calendar. We will notify you if we have any news. Thanks.

best regards,
J. Davis

[Thomas Kolnowski]

Hi, John. Thank you again for considering these features for the future.

Thomas Kolnowski
Digitized House Media, LLC

[Author]

Posts