Rouergue Creation Events Sidebar

This plugin was developed to address the limitations of Calendar Embed (The Events Calendar)
when it is used inside an iframe embedded in a sidebar.

By default, Calendar Embed enforces several behaviors that are not suitable for sidebar integration:

• events open in a new browser tab
• event content is loaded inside the iframe
• unnecessary interface elements are displayed (description, subscription, etc.)
• iframe height is not properly controlled

This plugin provides a robust solution, without modifying The Events Calendar plugin, by relying
on a controlled JavaScript interception and targeted CSS rules.

Main Features

• Calendar displayed in monthly view only
• Removal of unnecessary elements in the embed context:
  • custom description
  • calendar subscription block
• Sidebar-optimized iframe:
  • 100% width
  • fixed height (600px)
  • no border
  • no internal scrolling
• Click behavior fix:
  • neutralization of Calendar Embed JavaScript
  • events open in the same browser tab
• CSS and JavaScript conditionally applied to Calendar Embed pages
• Procedural, lightweight, and maintainable code
• No template overrides
• No theme dependency

Setup

◆ How To Configure Event Calendar Embeds

• Insert the iframe into the sidebar using a custom HTML block.
• Copy and paste the code below into the HTML block.
• In the code, replace the URL in the src attribute with the embed URL provided by Calendar Embed(Menu: Events/Calendar Embed, then click on Get Embed Snippet).
• The inline CSS ensures a fixed iframe height in the sidebar context.

Integration code example:

<style>
    @scope {
        iframe[data-tec-events-ece-iframe="true"] {
            width: 100%;
            max-width: 100%;
            height: 600px!important;
        }
    }
</style>
<iframe 
    data-tec-events-ece-iframe="true" 
    src="https://votresite.fr/calendar-embed/XXXXXXXX/embed/" 
    frameborder="0" 
    scrolling="no"> 
</iframe> 

👉 This plugin has no settings page.
No additional configuration is required.

Démo

See the plugin in action on our demo site

Discover our other plugins

◆ Easy Custom Event Tickets
◆ Editor Custom Color Palette
◆ Slider Galerie Native Responsive
◆ Filter Bar Custom Post Type
◆ Rouergue Création Top Notice Bar