Support

Home Forums Event Espresso Premium Calendar Event Styling

Calendar Event Styling

Posted: November 5, 2013 at 6:57 pm


Angela Haddon

November 5, 2013 at 6:57 pm

Hi, I’m having a bit of a hard time styling my calendar events so that their width is appropriate for the table’s column width. I have resized the table so that it is narrower than the full page width, but the plugin’s javascript is still setting the event width to a proportion of the FULL page width, not the new table width. Thus the events are hanging over the columns, and the effects are cumulative across the table.
I have set widths for columns and tried overriding pretty much everything within CSS, but because the javascript is setting absolute positioning on the fly, it’s proving to be an issue. I don’t want to tinker around with the plugin’s core files without seeing if there’s an easier way first…where does the javascript derive its values from, and is there an easy way to change this?
Thanks for your help!


Dean

November 6, 2013 at 1:47 am

Hi,

Without an example I’m guessing a bit here, but if I understood correctly, you want to reduce the width of the calendar within the page?

If so, why not wrap the calendar shortcode in a div and style the width?

<div style="width:300px;">[ESPRESSO_CALENDAR show_expired="true"]</div>

You may need to style the table header somewhat or remove some of the buttons (see Calendar Settings page) to make it fit.

If I have missed the mark and this is not what you are trying to do, please provide an example (link ideally).


Angela Haddon

November 7, 2013 at 1:40 pm

Thanks Dean; turns out I had a CSS override that somehow escaped my notice, but your suggestion to wrap the whole thing in a div was useful for a few other things anyway. Thanks!

The support post ‘Calendar Event Styling’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso