MartinSykes

What shortcode are you using? If you can post a link to your page I’ll take a look and see if there’s anything obvious stopping my workaround from working for you

I made a workaround for this on my site: https://www.candssg.ismysite.co.uk

It uses javascript to move the calendar from the bottom of the page into the div after the page loads.

page contains:
<div id=”mycaltoolbar”></div>
<div id=”mycal”></div>
[ai1ec view=”agenda” cat_name=”Cubs (Monday)”]

and then this moves the bits and also deletes some bits I don’t want. You might need different names if it’s not the agenda view:
<script type=”text/javascript”>// <![CDATA[
window.onload=function() {
// Move toolbar
findElementByClassName( ‘ai1ec-calendar-toolbar’, document.body )
d2=document.getElementById(“mycaltoolbar”)
d2.innerHTML=d1.innerHTML
d1.innerHTML=””
// Move calendar
d1=document.getElementById(“ai1ec-calendar-view-container”)
d2=document.getElementById(“mycal”)
d2.innerHTML=d1.innerHTML
d1.innerHTML=””
// get rid of the previous events button
findElementByClassName( ‘ai1ec-pagination btn-group pull-right’, document.body )
d1.parentElement.removeChild(d1)
// get rid of the previous events button
findElementByClassName( ‘ai1ec-title-buttons btn-toolbar’, document.body )
d1.parentElement.removeChild(d1)
findElementByClassName( ‘ai1ec-calendar-title’, document.body )
d1.parentElement.removeChild(d1)
function findElementByClassName( className, obj ) {
if ( obj.className == className) d1=obj;
for ( var i = 0; i < obj.childNodes.length; i++ ) findElementByClassName( className, obj.childNodes[i] );
}
}
// ]]></script>

Thanks – I’m using a workaround for now with the calendar inside a scrolling div so that I can let the list be longer but only three items are visible

I’ve come up with the following workaround until there’s a proper fix. I basically add two dummy divs and use javascript to move the calendar html to where I want it:

Where I want the calendar I have:

<div id="mycaltoolbar"></div><div id="mycal"></div>[ai1ec view="agenda" cat_id="1"]

and then at the bottom of the page I have:

<script>
window.onload=function() {
// Move toolbar
findElementByClassName( 'ai1ec-calendar-toolbar', document.body )
d2=document.getElementById("mycaltoolbar")
d2.innerHTML=d1.innerHTML
d1.innerHTML=""
// Move calendar
d1=document.getElementById("ai1ec-calendar-view-container")
d2=document.getElementById("mycal")
d2.innerHTML=d1.innerHTML
d1.innerHTML=""
function findElementByClassName( className, obj ) {
    if ( obj.className == className) d1=obj;
    for ( var i = 0; i < obj.childNodes.length; i++ ) findElementByClassName( className, obj.childNodes[i] );
}
}
</script>

so after the page has loaded it cut&pastes the calendar html up to where I want it. I’ve tested it here on the site I’m developing: https://candssg.ismysite.co.uk/monday_beavers/