This plugin provides a clean and controlled integration of Calendar Embed (The Events Calendar) into a WordPress sidebar.

Rouergue Création

<p>This plugin was developed to address the limitations of <strong>Calendar Embed</strong> (The Events Calendar)<br />
when it is used inside an <strong>iframe embedded in a sidebar</strong>.</p>
<p>By default, Calendar Embed enforces several behaviors that are not suitable for sidebar integration:</p>
<ul>
<li>events open in a new browser tab</li>
<li>event content is loaded inside the iframe</li>
<li>unnecessary interface elements are displayed (description, subscription, etc.)</li>
<li>iframe height is not properly controlled</li>
</ul>
<p>This plugin provides a <strong>robust solution</strong>, <strong>without modifying The Events Calendar plugin</strong>, by relying<br />
on a controlled JavaScript interception and targeted CSS rules.</p>
<h3>Main Features</h3>
<ul>
<li>Calendar displayed <strong>in monthly view only</strong></li>
<li>Removal of unnecessary elements in the embed context:
<ul>
<li>custom description</li>
<li>calendar subscription block</li>
</ul>
</li>
<li>Sidebar-optimized iframe:
<ul>
<li>100% width</li>
<li>fixed height (600px)</li>
<li>no border</li>
<li>no internal scrolling</li>
</ul>
</li>
<li>Click behavior fix:
<ul>
<li>neutralization of Calendar Embed JavaScript</li>
<li>events open <strong>in the same browser tab</strong></li>
</ul>
</li>
<li>CSS and JavaScript conditionally applied to <strong>Calendar Embed pages</strong></li>
<li>Procedural, lightweight, and maintainable code</li>
<li>No template overrides</li>
<li>No theme dependency</li>
</ul>
<h3>Setup</h3>
<p>◆ <a href="https://theeventscalendar.com/knowledgebase/event-calendar-embed/" rel="nofollow ugc">How To Configure Event Calendar Embeds</a></p>
<ul>
<li>Insert the iframe into the sidebar using a custom HTML block.</li>
<li>Copy and paste the code below into the HTML block.</li>
<li>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).</li>
<li>The inline CSS ensures a fixed iframe height in the sidebar context.</li>
</ul>
<p><strong>Integration code example:</strong></p>
<pre><code><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> 
</code></pre>
<p>👉 This plugin has no settings page.<br />
No additional configuration is required.</p>
<h3>Démo</h3>
<p>See the plugin in action on our <a href="https://rouerguecreation.fr/demo/masterclasses-rock-4-temps/" rel="nofollow ugc">demo site</a></p>
<h3>Discover our other plugins</h3>
<p>◆ <a href="https://wordpress.org/plugins/custom-event-tickets/" rel="ugc">Easy Custom Event Tickets</a><br />
◆ <a href="https://wordpress.org/plugins/editor-custom-color-palette/" rel="ugc">Editor Custom Color Palette</a><br />
◆ <a href="https://wordpress.org/plugins/slider-galerie-native-responsive/" rel="ugc">Slider Galerie Native Responsive</a><br />
◆ <a href="https://wordpress.org/plugins/filter-bar-custom-post-type/" rel="ugc">Filter Bar Custom Post Type</a><br />
◆ <a href="https://wordpress.org/plugins/rouergue-creation-top-notice-bar/" rel="ugc">Rouergue Création Top Notice Bar</a></p>


Alternatives to Rouergue Creation Events Sidebar

Top alternatives