jrodato

Tannie,

It looks like there’s a conflict with the id of one of your div tags that is causing it not to appear full screen. You don’t have to deactivate the plugin to edit the files, so go to the editor for the plugin and you’ll need to make a change to the following pages:

the-events-calendar/views/gridview.php
the-events-calendar/views/single.php
the-events-calendar/views/list.php

On each of these pages, change the line that says:

<div id=”content” class=”grid”>

to:

<div id=”calcontent” class=”grid”>

and hit the “Update File” button. The template’s CSS is formatting the <div> with the id of “content” a certain way, but this should fix the width issues.

As far as the last three columns, I know what’s happening, but it’s a little bit harder to fix on your template. What’s happening is the php code is generating the page code for the calendar using a table. The problem lies in the last three columns of the table. The last three <td> tags in every row have a class of “thismonth right” or “othermonth right”.

Here’s what it looks like.

Because there is “right” in that class, the website is pulling the .right formatting from your template’s style.css file which causes the skinny columns. Usually the fix I mentioned in my earlier post will correct this because the plugin’s CSS file would supersede the CSS from your site’s template and make it render properly, but this is not the case with your template. Your template’s CSS file seems to supersede the plugin’s CSS.

Here is what that yours looks like.

I’m not sure why the code is generating the last three columns like this, but I have mentioned it to Shane who is a contributor for the plugin and they are working on the fix. I believe most of these issues should be ironed out in the next release or two depending on what other more important issues show up in the plugin. I’ll keep digging to see if I can come up with a solution for you. Stay tuned.

Sincerely,

Jared

The instructions to fix this can be found here. This link should take you directly to the right post. I had the same issue and that fixed it. Let me know if this helps.

Jared

Geektink,

I see on most of your pages there are some div wrappers in the theme for content. If you look at the page source for your main page, there are some div tags with certain ids that give you your gray background. Those are:
<div id=”main-wrap1″>
<div id=”main-wrap2″>
and so on. I do not see these div tags in your calendar and events page. Are you applying a different template to those pages? You may want to try applying that template to those pages again. I applied the arclite theme to my pages and didn’t have this issue when I applied the “Page with no sidebars” template to my pages. Hope this helps. Let me know what you find out.

Just to make sure I’m clear, I think this is a problem with your theme and not with the calendar plugin. The plugin does not control your background and I can’t find any evidence of conflicting code between the plugin and your theme.

Also, make note that I am not affiliated with The Events Calendar plugin. I just a user that likes to help out where I can.

Jared

Geektink,

I see where you say the fix from my last post did not work, but it looks like you applied that fix and that seems to have cleared up your problem with the last three columns in the grid view. Give me a little time to look at the background/text issues. You might want to start a new post with this issue since the admins have marked this post as resolved. Post the link to the new thread here and I’ll let you know what I find out.

Jared

James,

I believe I found a way to fix your site. The solution is located at our old post:

https://www.ads-software.com/support/topic/356989

Give my last reply a shot and let me know if that helps,

Jared

Jack/James,

I have found a way to make it work for my website so I’m interested to see if this works for you. What was happening on my site was the last three columns on every row had the following html:

<td class=”thismonth right”><div class=”daynum”>1</div></td>

or

<td class=”othermonth right”></td>

Don’t know why is showed up like this, but because the class was “thismonth right” or “othermonth right”, the html was pulling the .right CSS class from my site template’s CSS file. To fix it I had to add some code to the plugin’s CSS file. I’ve looked at both of your sites and I tested this using Firebug and it looks like it will work. James, I know you’re not very code savvy, so I’m going to try and give it to you step by step.

1. Go to your admin dashboard for you site
2. Expand Plugins and click on “Editor”
3. In the top right next to “Select plugin to edit:” choose “The Events Calendar” from the drop down menu and then click “Select”
4.In the right column, click on “the-events-calendar/resources/events.css” (the second link on my page).
5. Go to the bottom of the edit box and start a new line.
6. Copy and paste the below code:
.right {
float: none;
}
7. Click “Update File” below the edit box.
8. Go to your calendar and see how it looks.

This should supersede the CSS from your site’s template (hopefully) and make it render properly. This is just a quick patch and is not a permanent solution.

Shane,

Is there a way to find out why the code is being rendered with the “thismonth right” or “othermonth right” classes? I looked at the PHP and can’t see right off the bat what would be causing it. Hopefully this is something that can be fixed in the next release.

Jared

Zendarin,

Also, I noticed on your website you fixed your grid view. Make sure to check the list view. I had some issues with the “content” div id and had to fix the following php pages too:

the-events-calendar/views/single.php
the-events-calendar/views/list.php

I just renamed them to calcontent, but if the fix you got from the theme provider worked, try it on those pages as well.

Sincerely,

Jared

Zendarin,

Now that your layout issue is fixed, your column issue is the same as mine and James’. All three websites are showing the exact same issue with the last three columns and this is happening on three different themes. Why open an additional thread when the information I’m providing could help solve your other issue? My apologies if you feel like I hijacked your thread, I was just trying to contribute. If you notice, I mentioned the “content” ID in my first post.

Sincerely,

Jared (aka jrodato)

Shane,

I meant to add it also does it for the blank cells. It’ll show “othermonth right” instead of “othermonth”. Once I correct these, the whole calendar populates correctly.

Jared

Shane,

I change the div IDs from “content” to “calcontent” and that cleared up some of my issues but I found the big issue using firebug. When you go to the calendar on my website and look at the page source, a row of the table looks like this:

<tr><td class=’thismonth’><div class=’daynum’>3</div>
</td><td class=’thismonth’><div class=’daynum’>4</div>
</td><td class=’thismonth’><div class=’daynum’>5</div>
</td><td class=’thismonth’><div class=’daynum’>6</div>
</td><td class=’thismonth’><div class=’daynum’>7</div>
</td><td class=’thismonth’><div class=’daynum’>8</div>
</td><td class=’thismonth’><div class=’daynum’>9</div>
</td></tr>

Using Firebug, the source code looks like this on the rows:

<tr><td class=’thismonth’><div class=’daynum’>3</div>
</td><td class=’thismonth’><div class=’daynum’>4</div>
</td><td class=’thismonth’><div class=’daynum’>5</div>
</td><td class=’thismonth’><div class=’daynum’>6</div>
</td><td class=’thismonth right’><div class=’daynum’>7</div>
</td><td class=’thismonth right’><div class=’daynum’>8</div>
</td><td class=’thismonth right’><div class=’daynum’>9</div>
</td></tr>

The last 3 colums are using a class of “thismonth right” according to Firebug even though the source code shows “thismonth”. If I change the “thismonth right” classes to “thismonth” in firebug, the colums appear properly in firefox. Any ideas?

I see the same issue with James’ and Jack’s sites.

Jared

Shane,

I am having the same issue as kissellj above. My calendar looks the same using the iNove template. I ran it through the validator you listed above and it did come back with an error only on the calendar page. There seems to be two div tags with an id of “content”. Could that be causing the problem? Here’s the actual rendered code:

<!– content START –>
<div id=”content”>

<!– main START –>
<div id=”main”>
<div id=”content” class=”grid”>
<div id=’eventsCalendarHeader’ class=”clearfix”>
<h2 class=”cal-title”>Calendar of Events</h2>

Any help would be greatly appreciated.