Incorrect display of bookings on mobile

@ihor We have a rather serious issue with the display of bookings on the vendor calendar. As mentioned in a previous post, in our case almost 80% of the vendors use mobile to manage bookings.

## Steps to reproduce
When a vendor (host) opens the calendar on mobile, the calendar displays bookings incorrectly. The “+ more #number” indicator crosses fields and messes up the user experience.

## Actual result
The dates of the bookings are displayed incorrectly on mobile. it is nerve wracking for hosts to manage bookings on tools that don’t work as one must understand.

## Expected result
The calendar has to display the bookings on mobile correctly and provide the necessary user experience for our hosts.

If possible with display elements such as on the desktop version that displays visually the bookings. One of the attached images shows this solution with dev tools after reducing the text size of the “+ more 1” element.

## Extra details
I have reduced the size of the “+ more 1” text to 0.65er which helped for one month. Other months require more css editing than I would like to implement to reduce issues with updates.

Additional note: I have used loco translate to locate the text for “+ more 1” with all Hivepress plugins, Woocommerce and Wordpress Core text. I was unable to find it. Please advise where the text is located.

Display of Bookings on desktop calendar (details such as names are still missing)

Display of the same Bookings on MOBILE DEV TOOLS after reducing text size of “+ more 1”. This was only shown in dev tools. This would be optimal. Additionally if all bookings include name of the person (because booking numbers and order numbers are not the same).
Mobile content optimal

Current mobile calendar. The “+ more 1” is displayed one row lower than necessary. Example: the booking on the first is shown on the 8th of the month. This picture was taken after reducing the “+ more 1” text to .65er. It didn’t change the position.
Mobile content issue 1

Current mobile calendar: clicking on the text displayed on the 8th of the month shows the booking of the 1st of the month.
Click on 8th of august shows wrong date

Thanks for the detailed report, we’ll fix this in the next update, maybe FullCalendar (the calendar script we’re using) has extra configuration for mobile, e.g. reducing the number of columns. If not then we’ll add custom fixes like reducing the font size.

1 Like

Than you @ihor ! I would love to see it solved in the next update to reduced the amount of additional code on my side.

Thanks again @ihor - Issue was solved with the last booking update!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.