Mobile Month View Issue

[Jason]

I’ve been trying to troubleshoot an error with the mobile month view. When clicking on a date, the events don’t appear and I have a white line through the middle of the calendar.

http://events.mansfieldstpeters.org/events

[Brian]

Hi Jason,

Sorry for the troubles. I can help you out here.

I went to the site and saw the Events not showing.

I looked at the Console and getting some errors there that I think are causing it.

One of the Errors is from a plugin Portfolio Slideshow?

I would try disabling that plugin and seeing if it solves the problem. Also please follow the steps on the testing for conflicts page and see if that helps:

https://theeventscalendar.com/support/documentation/testing-for-conflicts/

I’m also getting a 404 error, “NetworkError: 404 Not Found – http://events.mansfieldstpeters.org/wp-content/themes/education-events/images/header.png”

That one is caused by Genesis looking for a custom header, but not finding it in the theme.

As for the white line, I did not see that on the Calendar, but can take a look again after we get it working.

Thanks

[Jason]

Brian,
Thanks for taking a look and first round of things to check. Since this is a part of a multisite, I had to network deactivate several plugins and re-enable them on the other sites. At this point, this events subsite is running on minimal plugins — mainly Genesis and Yoast SEO.

Both problems still persist.

The white line is coming from this style in the plugin CSS – when I disable the background-color it disappears.
../plugins/the-events-calendar/resources/tribe-events-full-mobile.min.css?ver=3.7

#tribe-events-header:before, #tribe-events-header:after, #tribe-events-footer:before, #tribe-events-footer:after {
background-color: #fff;
content: “”;
display: block;
height: 100%;
position: absolute;
top: 0;
width: 1px;
z-index: 1;
}

I also do not get the date’s event information to pop-up under the calendar in the remote view.

[Brian]

Jason,

Sorry for the troubles still. I was able to narrow down the problem some more.

White Line
For the white line, you are correct on the css that is creating it, but I am not sure what it is doing it. I did a test on my site with Genesis Theme and it was not there, but if you add this to your theme’s stylesheet or in a place to add custom css it should remove it.

#tribe-events-content-wrapper #tribe-events-header:before, #tribe-events-content-wrapper #tribe-events-header:after {
background-color: none;
}

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>
That is the required div to show the events.

I am going to look into that further of why that might not show, but can you please answer the following for me and take the steps outlined below:

Please confirm that you are using The Events Calendar Pro and The Events Calendar 3.7

Please let me know if you have any custom Events templates in your theme.

Please also try deactivating your Events Calendar Plugins, deleting them, and reinstalling new copies and then reactivating. Although that is a small chance it may clear out what is happening here.

Please let me know what you find out form above and we can go from there.

Thanks

[Jason]

Brian,

Thanks again for your help. I reloaded everything fresh and then started to walk through the custom template files. (I know, I should have done this first — but the changes I had made were only to add the time and a custom field.)

The only major differences between the two template files was the additional array of venue details. There was also an orphan tag in my custom template.

Once I removed these, the error was resolved.

[Jason]

Follow up…though…

For the mobile view, I’d like to add the room code to the list of events it’s a custom field. Where would that be included?

[Brian]

Great, glad the issue is fixed.

Mobile.php template modification:

To modify the template for the Events Under the Mobile Calendar it is the mobile.php file that needs to be moved to your theme.

The file is located here:

the-events-calendar/views/month/mobile.php

It is a move advanced customization as the content is dynamically created using javascript so if you put coding in there directly it will show on all the events.

If you look at this topic:

Add custom fields to tooltip in month view

Ken’s last post tells a similar process on how you would have to add the additional field using the double brackets [[=code]].

 

I am going to go ahead and close this topic as the original issue is fixed. I encourage you to look over that other post and attempt to customize the mobile.php.

If you get stuck or need some help please create a new topic and reference this one.  This way if someone else in the future needs help we have a main topic for us and you to search for.

Thanks

 

[Author]

Posts