Mobile Calendar Not Displaying Correctly

[Jason]

Ugh, I hate writing in on this issue. I asked a similar question a year ago, but I’ve slept since then and am missing something in the process.

Original Thread: https://theeventscalendar.com/support/forums/topic/mobile-month-view-issue-2/

We just completed a site redesign and somehow in moving my custom month view files, I’ve lost the mobile collapse. In my previous post Brian reported:

Events Not Showing in Mobile Calendar View Under the Calendar
I looked through the source code and saw that under this div:

<table class="tribe-events-calendar"></table>

This div is not there:

<div id="tribe-mobile-container"></div>

I’ve searched the code again and it’s missing, and I’ve tested on Twenty-Fifteen as well with the same results. Plugins have been stripped down to Network Active plugins (on a MultiSite here.)

What file do I stick that div in for the mobile container to appear?

[George]

Hey Jason,

Thanks for reaching out again – just to be clear, when you describe updating your site design, do you also mean that you’ve updated The Events Calendar and Events Calendar PRO?

1. What versions of these plugins are currently active on your site?

2. Next, you write this in your post above: “somehow in moving my custom month view files” – can you specify each of these things: a) how you went about moving your custom files? and b) Do you have a backup of these original custom files at all?

Thanks for this Jason!

One last thing, after you address the two items above: would you mind summarizing what your exact issue is at this point? Based on that old thread, here’s how I would summarize it:

“When clicking on a date in the mobile Month View, the events don’t appear.”

↑ Is that accurate? Just want to be 100% sure what your issues are since the old thread was from a decent amount of time ago.

Thanks!
George

[Jason]

1) I always run the latest version of the plugins. 3.10.1 is running currently. In fact, I uploaded clean versions as part of the troubleshooting.

2) I FTP’d the files down and back up. I didn’t edit the files during this transition. The theme change was just an upgrade of Genesis Child Theme – Education 2.0 to Education Pro 3.0.6.

3) This is what the live calendar displays in mobile view:

[George]

Thanks for the clarification here Jason.

#tribe-mobile-container is added dynamically via JavaScript, not hard-coded into the HTML, so I’m curious if something within your custom template files is preventing #tribe-mobile-container from being added where it belongs.

After making sure your custom Events Calendar template files are backed up on your computer, can you try removing them completely from your theme? I.e. there should no longer be a tribe-events sub-folder in your theme, although this is just temporary!

Next, can I noticed a 404 error on your site because the Events Calendar CSS file tribe-events-full.min.css is not loading.

Do you know anything about this? Did you happen to intentionally leave this file out, for example? If so, add it back in – if not, then even though I know you mentioned having already re-uploaded the plugins for troubleshooting, I’d recommend getting a fresh copy of The Events Calendar – then, delete the existing copy of it off your site. The whole thing. (This will not erase events, settings, etc.).

Then, upload the freshly-download version, check out the site, and see if anything is improved. I’ll check out the site after you do this to see if that file is there.

Thank you for your patience here Jason!

George

[Jason]

George … thanks for the recommendations.

I pulled the /education-pro/tribe-events folder and did complete deletion of plugin files and reinstalled clean versions.

Same results.

As to the CSS, we had a tribe-events.css in the theme folders, but it was calling: @import url(http://events.mansfieldstpeters.org/wp-content/plugins/the-events-calendar/resources/tribe-events-full.min.css);

That file was initially setup to add in some printing CSS.

Looking forward to the next step!

[George]

Hey Jason,

Thanks for investigating that. You mention having already tried the 2015 theme here, with no progress, but I’m wondering – would you be willing to try activating that again, and leaving it active for us to come along and try it out directly?

I’m sorry about the frustrations associated with that – I just can’t think of why this wouldn’t be working save for a theme issue, but if in a default theme it persists then other stuff might be revealed.

Your patience means a lot and we take your issue very seriously, I’m determined to get this working! 🙂

Thank you,
George

[Jason]

Did some additional walk through tonight… Had some luck!

Switched to 2015 == Worked
Switched to Genesis only == Worked
Switched to Gen Edu Pro == Didn’t work.

Then it hit me, I have some Events Calendar calls in my functions.php file for that theme. So I started to strip them out one-by-one and got the mobile stylesheet to work. This was the offending lines…

// Add Printing Support and mobile override

add_filter( 'style_loader_tag', 'tribe_add_screen_to_mobile_css', 100, 2);
function tribe_add_screen_to_mobile_css( $style_tag ) {
	//Grab style tag as XML element
	$customXML = new SimpleXMLElement($style_tag);
    $id = (string)$customXML->attributes()->id;

	//If adding the mobile stylesheet

	if ( $id == 'tribe-events-calendar-mobile-style-css' || $id == 'tribe-events-calendar-full-mobile-style-css' || $id == 'tribe-events-calendar-full-pro-mobile-style-css' || $id == 'tribe-events-calendar-pro-mobile-style-css' ) {
		$media = (string)$customXML->attributes()->media;

		//Replace the media attribute and specify for screen display only

		$customXML->attributes()->media = 'only screen and ' . $media;
		return $customXML->asXML();
	} else {
		return $style_tag;
	}
}

When I removed that line and activated my Education Pro Theme == IT WORKED!

From there, I was able to add back in my custom views in the /tribe-events/ folder and we were still good.

I must have picked this up in the forums at one point, (I think here link, but I see that has been fixed in 3.8.) Since I have SO many older people who like to kill trees and print out calendars each month. Didn’t realize that was fixed.

It looks like we are probably in a good place now. My only other issue is when I activated The Events Calendar Category Colors, it breaks again. I’ll take up a thread in your support queue.

Now, if we can just get that google calendar sync … 🙂

Thanks for all that you do!

• This reply was modified 10 years, 8 months ago by Jason.

[Andy Fragen]

Jason,

I’ve posted on your issue over on .org for Category Colors.

I believe the issue is that you’ve created a template override for your calendar view that adds the start time and venue to the event. If you add these elements inside of the h3 tag, instead of outside of the tag where they currently exist, I think the problem will be solved.

Something like the following:

<h3>
{start_time}
<a>
{venue}
</h3>

Let me know.

Andy

[George]

Jason: awesome! I’m really glad you figured this out. Your patience with us while we worked through your issue here is and was greatly appreciated. Thank you. I hope your site continues to work well and your headaches with it all but vanish 🙂

And Andy, thanks for your input here of course – how do you do it?! How you manage being a good, active community member while also being a trauma surgeon is baffling and inspiring to say the least.

I’ll let you guys continue your conversation over on the .org thread for Category Colors. Thanks to both of you for being awesome customers and people.

Cheers,
George

[Andy Fragen]

This reply is private.

[George]

Right on Andy!

[Andy Fragen]

For those following along, here’s the link to the referenced issue.

https://wordpress.org/support/topic/mobile-view-18

The solution here will remove the Category Colors from the month view grid. It also tells how to ensure that your custom tribe-events/tribe-events.css changes will load very late in the load order so that they have preference over earlier CSS, inline CSS notwithstanding.

[George]

Thanks Andy!

[Author]

Posts