Support

Home Forums Event Espresso Premium calendar doesn't seem to be working on mobile

calendar doesn't seem to be working on mobile

Posted: February 24, 2020 at 4:25 pm

Viewing 30 reply threads


Ted Harty

February 24, 2020 at 4:25 pm

You can see the page with the course calendar here.

https://immersionfreediving.com/courses/

The calendar shows on desktop, but on phone, instead of displaying the calendar it displays and old event that is set to be a draft event. That event doesn’t show on desktop but it’s showing up as upcoming courses on the phone and ipad.

Any idea what is going on?


Ted Harty

February 24, 2020 at 4:51 pm

adding commment so I can be notified via email.


Josh

  • Support Staff

February 24, 2020 at 7:33 pm

Hi Ted,

I checked the page with my iPhone and the calendar is displayed there.

https://slack-files.com/T02SY781D-FUH40GU9M-a0f188c7f6

You could go in and edit the page and check the shortcodes. There may be some conditional shortcodes wrapped around the calendar shortcode with the intent of showing the calendar only on specific devices.


Ted Harty

February 25, 2020 at 1:07 pm

I’ve added 2 events to the calendar, it displays fine on desktop.

The Calendar shows up in two places, the PFI Freediver page, and the general courses pages.

https://immersionfreediving.com/courses/

& https://immersionfreediving.com/pfi-freediver-course/

Here is what is displaying on courses page

iphone
https://flic.kr/p/2ixEBjx
ipad
https://flic.kr/p/2ixEBfE

Here is what is displaying on PFI Freedive page
iphone
https://flic.kr/p/2ixEBhy
iPad
https://flic.kr/p/2ixEBgr

Any idea what is causing this and how to fix?

Thanks!


Josh

  • Support Staff

February 25, 2020 at 1:21 pm

Hi Ted,

If you go in to edit those pages, you can compare the shortcodes and change/edit the shortcode parameters to get the desired shortcode output.


Ted Harty

February 25, 2020 at 1:32 pm

to make make matters more confusing even though I haven’t changed anything now the calendar shows up correctly.

https://immersionfreediving.com/courses

as you can see here https://flic.kr/p/2ixF5uj

The issues is there is almost no way anyone would see there is an event there, its tiny and is hard to see.

I can’t even click on the event on the iPhone, but I can click on it on the iPad.

So I have two questions.

How can I make it pop and be easier to see on the iphone and how can it actually be clickable.

Why is it changing back and forth between what it’s showing when I haven’t made any changes in EE at all, since I published these 2 events.


Josh

  • Support Staff

February 25, 2020 at 1:37 pm

You can make it pop and be easier to see on the iphone and actually be clickable by setting a featured image for the event. Or serve a list (instead of a calendar) to small screen devices. We have a guide that shows how to set up a list here:

https://eventespresso.com/wiki/events-calendar-add-on/#how_to_calendar_list_on_small_screens

Why is it changing back and forth between what it’s showing when I haven’t made any changes in EE at all, since I published these 2 events.

I’m not sure. Have you checked the shortcodes by editing those pages? What are the parameters set in the shortcodes?


Ted Harty

February 25, 2020 at 2:05 pm

Here is the current code for displaying the calendar.

[notphone]
[ESPRESSO_CALENDAR show_expired=true]
[/notphone]
[phone]

[ESPRESSO_EVENTS show_title=false]
[/phone]

So you saying if I change it to this it will work?

[wonderplugin_cond deviceinclude=”iPhone,iPod,Android”]
[ESPRESSO_EVENTS]
[/wonderplugin_cond]

[wonderplugin_cond deviceexclude=”iPhone,iPod,Android”]
[ESPRESSO_CALENDAR]
[/wonderplugin_cond]

what’s difference in-between the list view and grid view?


Ted Harty

February 25, 2020 at 2:07 pm

Guess I would need to install this plug in https://wordpress.org/plugins/wonderplugin-conditional-display/

Not sure I know how do to that, is that easy?

Could I get a support token and have you do it?


Josh

  • Support Staff

February 25, 2020 at 2:58 pm

It’s fairly easy to install. You go to your site’s WordPress Dashboard, then click Plugins, then click Add new, then type Conditional Display.

Then click the Install button under “Conditional Display for Mobile – Mobile Detect Plugin”, then click Activate.

Or you could purchase a support token and complete the form and we’ll install it.


Ted Harty

February 25, 2020 at 4:20 pm

if i install the plug in will adding

[wonderplugin_cond deviceinclude=”iPhone,iPod,Android”]
[ESPRESSO_EVENTS]
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude=”iPhone,iPod,Android”]
[ESPRESSO_CALENDAR]
[/wonderplugin_cond]

Make it work correctly?


Ted Harty

February 25, 2020 at 4:33 pm

i installed the plug in and changed the code to on

https://immersionfreediving.com/pfi-freediver-course/

to

[wonderplugin_cond deviceinclude=”iPhone,iPod,Android”]
[ESPRESSO_EVENTS]
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude=”iPhone,iPod,Android”]
[ESPRESSO_CALENDAR]
[/wonderplugin_cond]

It’s still displaying the calendar on my iPhone and ipad as opposed to a list of events.


Josh

  • Support Staff

February 26, 2020 at 7:52 am

Hi Ted,

I checked and that page appears to be using the Divi Builder. The REST API is showing completely different content compared with with you’ve posted here.

https://slack-files.com/T02SY781D-FUKUJDBN3-c53f9d7202

I’m not sure what’s gone wrong, maybe you need to click the Update/Save button after making the changes?


Ted Harty

February 26, 2020 at 8:42 am

when I go to the page and then edit the page, the updated code is listed

UPCOMING COURSES

[wonderplugin_cond deviceinclude=”iPhone,iPod,Android”]
[ESPRESSO_EVENTS]
[/wonderplugin_cond]
[wonderplugin_cond deviceexclude=”iPhone,iPod,Android”]
[ESPRESSO_CALENDAR]
[/wonderplugin_cond]

Can I buy a support token and have you try to fix this issue?


Josh

  • Support Staff

February 26, 2020 at 8:54 am

Hi Ted,

We could. The issue it seems though is you need to make sure you’re using the Divi Builder when you make changes to the page.


Ted Harty

February 26, 2020 at 8:55 am

I am using div builder to make the change, when I go into div builder the updated code is being displayed.


Ted Harty

February 26, 2020 at 8:59 am

when I go the edit the page this shows up, so I know the code I want is in divi builder

https://flic.kr/p/2ixWrAb


Ted Harty

February 26, 2020 at 9:09 am

In the meantime, I gonna work on just displaying the events as a list of hyperlinks like I used to do years ago. And see how that looks.

May 12-15 (spots left x)
June 15-18 (spots left x)
etc.

I used to have some way to have the *spots left x) automatically updates and people were signing up, but i forgot how to do that.

Can you let me know how do do that, i’m pretty sure some sort of shortcode is required.


Josh

  • Support Staff

February 26, 2020 at 9:13 am

Hi Ted,

I’m afraid EE4 doesn’t have shortcodes for this. That was something that could be done with EE3 because EE3 was much simpler with the way an event could have a capacity. In EE4 tickets and datetimes each can have their own capacity, so adding this type of messaging requires PHP.


Ted Harty

February 26, 2020 at 9:19 am

Ok then this is getting beyond my ability to do.

I have the updated codee in the divi builder but it doesn’t seem to make a difference.

I need to have some sort way people can sign up for my courses on a phone and ipad

I will purchase the support token now.


Josh

  • Support Staff

February 26, 2020 at 11:11 am

Hi Ted,

It turns out the Divi builder has a built in feature that lets you disable specific modules for phones, tablets, and/or desktops.

So what I did was put the event list shortcode in one module, then set its setting to show only on phones. Then another module has the calendar shortcode and it’s set to not show on phones.

Here’s a guide that explains this feature in more detail:

https://www.divithemeexamples.com/hide-divi-modules-on-mobile/


Josh

  • Support Staff

February 26, 2020 at 11:14 am

One other thing:

When I logged in I was having trouble with accessing the admin and the error indicated there was a conflict with having two caching plugins activated. So I deactivated both of them. You could reactivate one of them, but it’d be best to activate only one (not both).


Ted Harty

February 26, 2020 at 11:25 am

What were the names of the plug in’s?


Ted Harty

February 26, 2020 at 11:26 am

do you have some sort of way for me to see what the grid view would look like?

Curious what the looks like.


Josh

  • Support Staff

February 26, 2020 at 11:51 am

What were the names of the plug in’s?

WP-Optimize – Clean, Compress, Cache
and
WP Super Cache

do you have some sort of way for me to see what the grid view would look like?

We have a demo page that uses the grid view shortcode here:

https://demoee.org/use-cases/events-grid-template/


Ted Harty

February 26, 2020 at 12:13 pm

THanks this is a workable solution but still have a couple of more questions.

Something has changed, now http://www.ImmersionFreediving.com home page is different, it points to a blog post as opposed to the main page. This only appears to happen on phone and tablet.

Secondly, can you let me know how you create the two different divi text boxes? Mobile-only, and non-mobile? I will need to do that all the places the calendar appears.

How can I make it so it also shows that list for ipad as wel. I’m not sure which way I want the ipad event displayed, but would like to know how to alter them if I wished.

Last thing, can I make it so the calendar starts on a certain month? I’d like the calendar to start on months that have courses as opposed to a blank calendar.

Thanks!


Josh

  • Support Staff

February 26, 2020 at 12:36 pm

Something has changed, now http://www.ImmersionFreediving.com home page is different, it points to a blog post as opposed to the main page. This only appears to happen on phone and tablet.

That actually was happening if you’re logged out of the site. It’s a stale cache. I reactivated the WP Super Cache plugin and clicked its Delete Cache button which deleted the stale cache.

Secondly, can you let me know how you create the two different divi text boxes? Mobile-only, and non-mobile? I will need to do that all the places the calendar appears.

I’ll assume you already know how to create a new module in Divi (you click the + button). Then you follow this guide:
https://www.divithemeexamples.com/hide-divi-modules-on-mobile/

How can I make it so it also shows that list for ipad as wel. I’m not sure which way I want the ipad event displayed, but would like to know how to alter them if I wished.

The “Disable” menu in Divi has 3 icons to choose from. One for phone, one for tablet, one for desktop. You click on the tablet icon to disable a module for tablets.

Last thing, can I make it so the calendar starts on a certain month? I’d like the calendar to start on months that have courses as opposed to a blank calendar.

You add parameters to the shortcode like this:
[ESPRESSO_CALENDAR month=06 year=2020]


Ted Harty

February 27, 2020 at 9:10 am

I’ve added 6 more events, they are showing up properly on desktop but only 2 are showing up on the phone @ https://immersionfreediving.com/pfi-freediver-course/

It seems like any updates on I make to events show up immediately on desktop but not so on phone.

It’s been 30 minutes and only 2 of the 6 events are showing up on my phone.


Josh

  • Support Staff

February 27, 2020 at 9:21 am

Hi Ted,

What you’ll find is if you log into your site with your phone, you’ll see the newly added events. This is because your site is using a caching plugin. The caching plugin serves cached versions of pages to logged out visitors.

You’ll need to delete the WP Super Cache cache after making changes to the site for those changes to go live.


Ted Harty

February 27, 2020 at 10:23 am

i’m never logged into the site with my phone, it just appears to be a 45min to 60 min delay. I’m even using a private browser.

Is this normal?

Why does desktop update immediately but such a delay on phone?


Josh

  • Support Staff

February 27, 2020 at 10:31 am

Hi Ted,

The delay is because you have a caching plugin on your site, and you didn’t delete the cache after making changes.

You might consider disabling caching, then delete the cache, before making changes on your site. Then you can reactivate caching later. You go to the WP Super Cache settings page to disable/enable caching.

Viewing 30 reply threads

The support post ‘calendar doesn't seem to be working on mobile’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso