WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: The Events Calendar] Calendar not showing up correctly (31 posts)

  1. Zendarin
    Member
    Posted 4 years ago #

    Hi and thank you for making this plugin. I have searched for a long time and this is the first one I have found that seems to provide what I am looking for.

    I just activated it and created an event but the calendar is distorted when I go to it.

    I am running PHP ver. 5.1.3 and the URL is http://www.prayfederalwayonline.com and I would greatly appreciate some guidance on how to resolve the issue.

    I am pc oriented but this I have never ventured far beyond HTML until now so I am just learning how to really use WP, edit templates, etc.

    Thank you,

    Jack

    http://wordpress.org/extend/plugins/the-events-calendar/

  2. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    Whoa - that is messed up. The first tool I suggest you install if you haven't is firebug. It will help you significantly. The second thing I recommend is to run the template (on another page) through the w3c validator to see if anything obvious pops.

    Looks like a little css fu should solve this issue. You have three divs:

    Sidebar 2
    Content
    Sidebar

    you clear:both on content, which makes it take the whole line below rather than floating to the right of sidebar 2. Then you float:right on sidebar, which won't have the affect you expected. Also you did not define a width on content, which you really should in a fixed width layout.

    Soooo..

    Step 1: define a fixed width for all three divs
    Step 2: use the correct floats: You basically want float left on all three and then put a clear:both on an empty div at the bottom.

    You'll probably run into some more issues creating your template. Good luck on them. I've got to focus on the next release or I'll never get it done tonight (fingers crossed).

  3. kissellj
    Member
    Posted 4 years ago #

    Shane:

    I am having the same issue: http://www.whatshappeningprovo.com.

    I am a novice when it comes to code. Could you please help clarify your above response? I think that will help fix my problem.

    I'm just uncertain where I need to go to change my width, etc. Within the plugin or some place else on my admin screen? Sorry to require so much of your time.

    Like the others have said, I really think this calendar is what I have been looking for. I just need to get this calendar looking right. Once the issue is resolved I won't the same issue with others visiting the site on their computer right?

    Also, is there a way to create a 'Page' for the event calendar rather than going through the link on the sidebar?

    Thanks so much for the help.

    James

  4. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    Hey James,

    Jack is messing with his template and I believe is having a different issue than you are. You calendar is correctly placed, but for some reason, the grid is messed up. Keep looking at your css and if you can't figure it out, perhaps one of the contributors (or me) will be able to help you figure it out later this week. Right now we are all focused on this release.

    To be clear - your problem lies with bad code in your template I believe.

  5. Zendarin
    Member
    Posted 4 years ago #

    Actually I did specify a width for the content as well as both side bars. I have 600 px for content and 200 each for the sidebars. These are customizable within the theme.

    The template is the default that showed up when I installled the calendar.

    I haven't looked at the code for the stylesheet though.

    Not sure what the w3c validator is but if it is something in firebug I will certainly install that and see what turns up.

    So which template am I running through this w3c? The event.php template?

    Anyways you at least gave me more than I had so far - I know nothing about php but I will be able to piece things together eventually with enough help.

  6. Zendarin
    Member
    Posted 4 years ago #

    Sorry - I made a couple of errors in my last post and it's too late to edit.

    The template used is categories.php and is controlled by the suffusion theme, there have been no modifications. The stylesheet is also unmodified.

    If I was dealing with a "page" instead of a post I could use a "no sidebar" template for it but I can't choose the template for a post.

    I also looked up Firebug and it seems to require Firefox which I don't use.

    Now I am totally lost and don't know what to do outside of abandon my hope for a calendar.

  7. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    Hi Zendarin,

    I can guarantee you that when I looked at your theme source code output, both the issues I listed are accurate. While you may have entered a body size somewhere in your theme configs, it does not show up in the css. I know this may be a touch confusing but stick with it.

    Trust me that firebug is worth using firefox for. =)

    The W3c validator is here: http://validator.w3.org/

    most of the output might scare you so don't stress it. You are just looking for the obvious errors, like missing </div> etc...

  8. jrodato
    Member
    Posted 4 years ago #

    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.

  9. Zendarin
    Member
    Posted 4 years ago #

    Ok here is the latest:

    Everything is working fine on the web site now EXCEPT for the calendar. All other categories show up using the settings I specified in the theme with a collumn width for the main column of 600 px - only the calendar shows up at 1000 px (which causes the distortion you saw if there is any sidebar at all).

    I posted the info you gave me on the support forum for the theme and this was the response:

    "yes, this is a fixed width theme and yes, the style.css file doesn't have the widths. That is because the widths are computed on the fly based on the settings you make in Visual Effects -> Sizes and Margins, so you will actually see the widths on your page's source code."

    It seems that it is only when the calendar is called that it doesn't work. In fact the main body of the calendar is being squeezed into the 600 pixel size wich is specified in the settings - it's only the top bar of the calendar which stretches out to the full 1000 pixels. Switching to the events view the size of the main column appears correctly.

    Any ideas, workarounds, etc. that you can think of?

  10. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    Interesting. You know I wonder if there is some class or id conflict going on. I asked Dan, another contributor to do a quick scrub of the templates and add "TEC-" in front of all classes and ids. We shall see if that helps.

  11. Zendarin
    Member
    Posted 4 years ago #

    Correction - the events view is also showing at 1000 px. Any other category, however, the main content displays with the correct size.

  12. jrodato
    Member
    Posted 4 years ago #

    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

  13. Zendarin
    Member
    Posted 4 years ago #

    OK we have some progress.

    I got this from the author of the theme:

    "I took a look at the code in the plugin and it makes some serious assumptions. It basically assumes that your central component has an id "content" and that messes up the whole layout (what if there is no style associated with "content" in CSS?). One way to resolve it would be to modify the plugin code. You could open the file wp-content/plugins/the-events-calendar/views/gridview.php and look for this line:

    <id="content" class="grid">

    Add this before the above line:

    <id="main-col">

    And add this after the last "div" in the file:

    </div>

    This fixed one issue - the Calendar header is now showing up the proper size with the sidebar in the correct location, however it did NOT fix the other issue. The last 3 columns in the header are still being squeezed down small and the entire thing distorted. Also the events don't appear to be the calendar view (this may be because the only events exist within the affected columns.

  14. jrodato
    Member
    Posted 4 years ago #

    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

  15. Zendarin
    Member
    Posted 4 years ago #

    jrodata - please open a seperate support thread for your issue. I am sure you want it to get some attention and it likely won't if you are just hijacking my thread all the time + this makes it hard for the admin to know when I have posted some additional info for this issue.

    Thanks,

    Jack (aka zendarin)

  16. jrodato
    Member
    Posted 4 years ago #

    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)

  17. jrodato
    Member
    Posted 4 years ago #

    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

  18. kissellj
    Member
    Posted 4 years ago #

    Jared,

    Thank you for being on top of this with Shane. I am an extreme novice when it comes to this stuff...learning how to create a wordpress account was a stretch for me.

    I think keeping this thread going is a good idea.

    Any word back from Shane on the issue you found in firebug with the calendar showing "thismonth right"?

    How can I change this code so it works on mine? I may need step by step instructions. Thank you.

    Shane,

    Thanks for getting back with me and Jared. We appreciate the help very much. I'm going to need help with the CSS stuff, I don't know what I'm looking for unfortunately.

    Thanks so much!

    James

  19. kissellj
    Member
    Posted 4 years ago #

    Jared and Shane,

    I use Firefox and it looks like the bug has to do with the way Firefox is reading the code. I just opened the site on internet explorer and the grid looks just fine.

    James

  20. Zendarin
    Member
    Posted 4 years ago #

    Thanks Jarod - I figured I would have to fix the other views as well but now that I know how to do it that shouldn't be a problem. I just needed break before my head exploded lol.

    Sorry - I didn't realize you were experiencing the same issue with the last 3 collumns being all messed up.

    I do have confidence that Shane and co. will get this resolved as quickly as possible - especially with it affecting so many.

    ~Jack

  21. jrodato
    Member
    Posted 4 years ago #

    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

  22. Zendarin
    Member
    Posted 4 years ago #

    Woohoo - that fixes 1 more problem, thank you Jared.

    Now the only problem I have left is that no data for my event is showing up on the calendar. It is there if I switch to event view, but calendar view has nothing. -Whoops never mind, I figured this one out on my own. I didn't have a title for the post and if there is no title it won't display on the calendar.

    Thanks again Jared for figuring this out, hopefully they will get this taken care of with the next release.

    ~Jack

  23. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    Hey folks,

    Thanks for all the help!!! (what an amazing community we have with wordpress).

    Dan & I are working on this tonight. This will (hopefully) be resolved in the next release - which will be as soon as we have the template bugs wrapped up.

  24. kissellj
    Member
    Posted 4 years ago #

    Jared you the man!

    I haven't had a chance to go through the steps...slammed right now with work. I'm going to give it a whirl asap. Please look for my feedback, but I think it should be easy enough. Thank you for being so considerate towards my skill level.

    Best,

    James

  25. geektink
    Member
    Posted 4 years ago #

    Sorry guys....I'm not a PHP programmer and am a bit lost here. I am having the same problem with the grid view using the Arclite Theme:
    http://aslinsideatl.com/blog/category/events/

    Any help would be greatly appreciated. Am happy to donate accordingly.

    Thanks in advance,
    Stacy

  26. kissellj
    Member
    Posted 4 years ago #

    Jared it worked!

    Thank you!

    GREAT JOB! and fast too.

    Your instructions were most helpful and simple enough for me to follow along. Thank you.

    James

  27. geektink
    Member
    Posted 4 years ago #

    The earlier fixed you outlined did not work for me.
    I also have a problem with the List page as the text for the event is lost in the background color. My other posts don't have the dark background.

  28. jrodato
    Member
    Posted 4 years ago #

    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

  29. jrodato
    Member
    Posted 4 years ago #

    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

  30. Shane Pearlman
    Modern Tribe
    Posted 4 years ago #

    A very helpful user indeed. Jared you rock.

    Just to follow up - we are going to release a quick update for localization. Once that is out, we will finish working on a new set of templates that should hopefully resolve a number of these class conflicts.

    Ultimately though, if a user wants to integrate with a "fancy" theme, they will probably have the follow the documentation and create their own templates rather than use the default ones we provided with the plugin. Which is kinda cool, I mean how many people use kubric anymore? No one. Making your own themes is what gives our sites character.

Topic Closed

This topic has been closed to new replies.

About this Topic