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.