Inserting calendar into single page layout

[Scott]

Hi,
I’m using a single scrolling page layout. What’s the easiest way to insert the calendar into a section, as opposed to on a new page? Thanks!

[George]

Hey Scott,

Thanks for reaching out to us here, this is an interesting question because inserting calendar views outside their normal layout can be tricky – especially in the context of a scrolling layout, and the design patterns usually in place on such sites.

There are a few different options I can think of.

Idea 1. Using Event Rocket
Event Rocket is a free add-on/experimental plugin made by one of our awesome developers Barry. He’s Scottish and loves dancing, and writes great code, including this plugin, which features some “embedding” shortcodes that many users have found useful for embedding event views into disparate parts of their sites → https://wordpress.org/plugins/event-rocket/

That may not meet your needs here, but is a pretty simple and low-cost thing to try, so it might be fruitful.

---

Idea 2. Writing Custom Theme Templates
All of the front-end views for parts of The Events Calendar are located in the plugin’s /views folder, and you can completely override all views here by making a folder in your theme called /tribe-events, then just duplicating the file names and directory structure from there.

So, for example, if you want to make a theme-specific version of the plugin’s default /views/single-event.php file, all you have to do is make /tribe-events/single-event.php in your theme and it’ll be used instead!

This is a bit more intensive, but it may be awesome for your project because you can just copy the event-generation code from the Core plugin views into your theme-specific versions, but rework all the markup around this event-generation code to make things fit into the page structure of your scrolling layout.

Learn about customizing Calendar templates in detail here → https://theeventscalendar.com/knowledgebase/themers-guide/

---

Idea 3. Embedding (and then Customizing) the Calendar Widget
This last idea is an admittedly an odd one, but if you have our PRO add-on, then you should be able to see that the Mini-Calendar widget is quite similar to the actual full calendar – plus, since it’s a widget, you can embed this anywhere on your site quite easily using WordPress’s the_widget() function (read about this here → https://codex.wordpress.org/Function_Reference/the_widget)

Once embedded, you can use the same principles I mentioned in Idea 2 to customize how the widget looks, and add more data to it so it’s a more full-featured calendar instance, and style it with CSS however you see fit…

Apologies for so much text here Scott! Embedding whole instances of the calendar in places other than their default locales is a bit tricky, so I wanted to cover a lot of ground and get the gears turning on your end of things. I hope something here is helpful – let us know!

Thanks,
George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts