|
sdtc1
|
September 16, 2021 at 1:18 pm
On small screen sizes and mobile devices, some event titles appear to be cut off or cropped on the calendar.
For example: “Fall Saturday Driver Education” is cut off in the box and reads “Fall Saturday Driver Educatio”.
Is there any way to prevent this from happening or fix it?
|
|
Tony
|
September 21, 2021 at 8:13 am
Hi there,
Currently, the only way to work around that within the calendar would be to make the font smaller, but then it will be much harder to read.
Another option is to use a plugin like Mobile Detect and then load another output such as the table view or standard [ESPRESSO_EVENTS] last when viewing on mobile. We have some details on doing this here:
https://eventespresso.com/wiki/events-calendar-add-on/#how_to_calendar_list_on_small_screens
|
|
sdtc1
|
September 22, 2021 at 12:32 pm
Got it, thank you for that info. I used the Mobile Detect plugin to change the mobile version to a list of events instead of the calendar view.
One other question – On desktop is there a reason calendar weeks are elongated quite a bit even if the event text doesn’t fill up the box? Is there a way to make all weeks a uniform size?
Example: September calendar on https://sedrivertrainingcenter.com/calendar/
|
|
Tony
|
September 27, 2021 at 6:37 am
That’s caused by a bug in the library we for the calendar when using later versions of jQuery. When an event spans across multiple weeks in the calendar it displays as a single line, if I use some CSS to force the first line to display a little it looks and then highlight the event it looks like this:
https://monosnap.com/file/YmdpYl8He1kQd8uxcCmPjQ3enFfr2F
That first line spans across 2 weeks on the event, so it displays as a 2px width bar.
We don’t currently have a fix for this but there is a way to work around it using this plugin:
https://github.com/Pebblo/ee-calendar-migrate
Click ‘Code’ and then download zip.
Then install that zip in Dashboard -> Plugins -> Add new -> Upload Plugin.
Activate it and retest the calendar page.
What that plugin does is switch to the previous version of jQuery, but only on that calendar page.
|
|
sdtc1
|
September 30, 2021 at 7:09 am
Thanks for that info, Tony. I activated the jQuery migrate plugin but when I reloaded the page the calendar disappeared. I disabled the plugin in the meantime. Any other thoughts?
|
|
Tony
|
October 4, 2021 at 5:43 am
Hmm, strange.
I use that plugin on a couple of sites and its working there, it could be that something else loading on that page is requiring a newer jQuery function which then throws an error with the older version and prevents the calendar from loading.
Can you create a new page with the calendar shortcode on it so we can test this without disrupting the site?
If you create a new page called Espresso Calendar (so that it has the slug ‘espresso_calendar’) you won’t need to make any changes to that plugin to test it, any other page slug will need to be set in the plugin for it to work (I can walk you through doing that if need).
|
|
sdtc1
|
October 7, 2021 at 5:48 am
Got it – I created a new page using the /espresso-calendar/ slug and reactivated the jQuery plugin. You were right, the calendar does show up on this page – the only problem is for some reason one week of every month shows up incredibly elongated (ex. the 2nd week in December alone takes up my entire screen). Haven’t seen this before.
I’d like to send you the link to review but I’d have to keep the plugin enabled and when it is, the regular calendar page doesn’t function. Am I able to send a screenshot? Or do you suggest anything else?
Thank you again for your help.
|
|
sdtc1
|
October 7, 2021 at 5:49 am
I disabled the jQuery plugin but left the test page published: https://sedrivertrainingcenter.com/espresso-calendar/. You should be able to see the odd formatting?
|
|
Tony
|
October 7, 2021 at 6:13 am
That odd formatting is from what I mentioned here.
The events are displaying in a 2px wide skinny box, so the event title etc is trying to fit into that which elongates the element(s).
To keep the Calendar jQuery plugin enabled you’ll need to edit a line of code in the plugin so that it only targets the espresso_calendar page.
Line 14 needs to just be:
if( is_page( array('espresso_calendar') ) ) {
It’s odd because that plugin is working fine on a couple of test sites.
|
