[The Events Calendar ] Takes Over theme, shows one bicalendar on entire template

I get exactly the same problem.

The site should look like.
https://rainmakerscompany.com/

But using Event Calendar it looks like:
https://rainmakerscompany.com/2010/02/rainmaker-dialogue-how-to-get-great-performance-using-social-media-in-the-corporate-world/

The Calendar looks like:
https://rainmakerscompany.com/category/events/month/

Help.

So I pretty much figured out the problem with the calendar taking up the whole page, width-wise. The plugin uses three templates, one for the calendar, list view and single event. Each template starts by calling the header…

<?php
	global $spEvents;
	$spEvents->loadStylesAndScripts();

	include (TEMPLATEPATH.'/header.php'); ?>'

…for your template and ends by calling the footer.

<?php
	include (TEMPLATEPATH.'/footer.php'); ?>

Now if you don’t know how to edit your theme this may not help you. But essentially what it is doing is leaving out whatever is normally on your page after the header, which for many people (including myself) may be the sidebar etc or an important containing div, etc.

In my case the calendar began in the div id=”tec-content” which is where a div called “page-column” usually goes, so I opened up events.css in the resources folder of the events calendar plugin folder and changed the properties of div id=”tec-content” to match “page-column” that way the width and floating properities were the same thus it fit in seemlessly.

Now my sidebar which I need to be on every page was not part of the header.php or footer.php so it was getting left out. So I just copied my side by div and php call tag and pasted it above the footer, just as it is with every template page (index, single, category, etc.) and vooala it appeared.

The proof of concept is here:
https://thestudiowlv.com/svhs/category/events/upcoming

I’m working on formatting everything to get it to match the site which is under construction as we speak. But as you can see it worked perfectly.

Sorry for the very very long explanation, but this is the only way I could think to convey my discovery. I hope it helps!

Hi Hept27,
You had an important post… I quite understand that. And the Calendar looks great on your homepage! I would like to do the same if mine. Can you give some advice on how to edit between the header and the footer?
I just took an advice of Suffusion Support (my theme)and I inserted a <div id=”main-col” > just before the <div id=”tec-events” class=”grid” >

It helped to solve the problem of the width. But the backgroud still transparent…

Take a look if you can?
https://thiagoabdalla.com/?cat=24&eventDisplay=month

Thanks!

I used the advice that Hept27 gave,but updating my event.css code didn’t change anything with my formatting. Bit of guess-work showed that the pages were missing calling a css code from my theme that would assign width for the section that calender went in…

essentially, the calender was just being placed on the page… but it needed to be told where to go within the body. Needed a ‘div id=”content” ‘ added in there to confine the calendar within the ‘content’ section of my body.

And, based on the advice of a friend, I installed FireBug for FireFox… wow… what a freakin useful tool! Lets me know that I have conflicting font callouts, so now I know which one to edit, or which one to rename.