Calendar Widths

[larkmeadictsupport]

Hi,
We are having issues changing the width of our calendar on the page below:
http://www.larkmead-school.com/events/
We have tried changing to the default events template which gives us the correct width but crashes our menu at the top of the page 🙁
We’ve also changed the styles and all of these still show the calendar full width across the page.
Any help/advice greatly appreciated.

[Geoff]

Hi there, Guy! Thanks for getting in touch and sorry you’re hitting some trouble here. Hopefully we can figure it out together. 🙂

We have tried changing to the default events template which gives us the correct width but crashes our menu at the top of the page

It sounds like there might be a theme conflict. Does the same issue happen when using a default WordPress theme, like Twenty Fourteen, and disabling other plugins?

We’ve also changed the styles and all of these still show the calendar full width across the page.

You have a couple of options here:

1) Create a custom template

One would be to override the Default Events Template and customize it to fit your theme’s layout. To do this, make a copy of the template (located in /plugins/the-event-calendar/views/default-template.php). Then, create a new folder in your theme called tribe-events and drop your copied file in there.

Once the template is in your theme folder, it can be customized however you see fit. In this case, it looks like you theme uses Bootstrap, so you could wrap the calendar in the Bootstrap grid. Something like:

<div class="row">
<div class="col-sm-12">
...
</div>
</div>

Check out our Themer’s Guide for a more thorough walkthrough of how template overrides work.

2) Force the width using CSS

An alternative is to use CSS to add padding to the left and right sides of the calendar container. Add something like this to your theme’s stylesheet (typically style.css):

#tribe-events-content {
padding: 2px 50px;
}

I’m afraid we’re rather limited in how much support we can provide for customizations like this, but hopefully this helps point you in right direction so the calendar fits nicely with your theme’s layout. 🙂

Cheers!
Geoff

[larkmeadictsupport]

Hi,
Thanks for the information.
I have created a duplicate default-template.php in our theme folder but having issues with the next step. You say you can customise the template and our theme is using bootstrap so we could wrap the calendar in the bootstrap grid. Does this mean we should add the code you have suggested into the default-template,php in our themes folder or somewhere else? Sorry, we aren’t experienced php users 🙁

We tried forcing the width using CSS, which worked but when viewing on a tablet or phone it makes the calendar look like a thin stick, it also screws up the responsiveness of the calendar when viewing on a PC or laptop 🙁

Any help/advice greatly appreciated.

[Geoff]

Hey there, Guy! Thanks for following up. You’re doing a great job so far. 🙂

Does this mean we should add the code you have suggested into the default-template,php in our themes folder or somewhere else?

Yeah, you can drop that code right into the default-template.php template your added to your theme folder. The idea is to wrap the calendar inside the Bootstrap grid classes so it fits inside the grid rather than taking up the full screen width.

We tried forcing the width using CSS, which worked but when viewing on a tablet or phone it makes the calendar look like a thin stick

Shoot, sorry about that. You may need to fiddle with it a little bit (such as using CSS media queries to adjust the width at certain screen widths), but it should still be a viable option.

I hope this helps a little more. 🙂

Cheers!
Geoff

[larkmeadictsupport]

Hi,
Thanks for the further update, within the default-template.php I have the following code below. It doesn’t make any difference to the layout of the calendar though, it is still showing full screen. Apologies if I’m not getting this, as mentioned before we aren’t experienced with php so maybe need more detailed instructions.
Thanks 🙂

<?php
/**
* Default Events Template
* This file is the basic wrapper template for all the views if ‘Default Events Template’
* is selected in Events -> Settings -> Template -> Events Template.
*
* Override this template in your own theme by creating a file at [your-theme]/tribe-events/default-template.php
*
* @package TribeEventsCalendar
*
*/

if ( ! defined( ‘ABSPATH’ ) ) {
die( ‘-1’ );
}

get_header(); ?>
<div id=”tribe-events-pg-template”>
<?php tribe_events_before_html(); ?>
<?php tribe_get_view(); ?>
<?php tribe_events_after_html(); ?>
</div> <!– #tribe-events-pg-template –>
<?php get_footer(); ?>

<div class=”container”>
<div class=”row”>
<div class=”col-sm-12″>
</div></div></div>

[Geoff]

Hi there, Guy!

You’ll want to wrap the calendar in the code for the grid. Here’s an example of what that might look like.

You may need to fiddle with the example a bit to get it to work exactly with your theme and Bootstrap. For that, I would recommend referring to Bootstrap’s documentation. I’m afraid this is as far as I can help with custom development, but I really think this will help steer you in the clear. 🙂

Cheers!
Geoff

[Geoff]

Hey there, Guy! Just checking in to see if there’s been any further update or if you still need assistance on this one–let me know. 🙂

Cheers!
Geoff

[Geoff]

Hello, Guy! It’s been a while so I’m going to go ahead and close this thread. If we can help with anything else, though, please don’t hesitate to open a new thread. We’d be happy to help. 🙂

Cheers!
Geoff

[Author]

Posts