I'm trying to implement this: https://www.viget.com/articles/building-an-expressionengine-mini-calendar-scroller/

However comments are closed and the contact link goes to an agency. Help! I'm clearly not adding the Javascript snippet correctly, everything else seems to work. What am I doing wrong? Here is the test page:


Calendar is in the lower left, the arrow should slide the old month out of the way and pull in the new one, rather than directing to a new page.


1 Answer 1


You need to make some changes to the jQuery. See below:

$(document).ready(function() {
    $(document).on('click','.nav-calendar a',function(e){
        var $this = $(this),
            action = $this.parent().attr('class'),
            $wrapper = $this.closest('div.scroller-wrapper'),
            $cal = $this.closest('div.content');

        $.get($this.attr('href'), function(data) {
            var $d = $(data),
                delta = (action === 'prev') ? '-100' : '100';

                'left' : delta + '%',
                'position' : 'absolute'

            var newHeight = $d.height();

                'left' : '-='+delta+'%'
            }, 250);

                'height' : newHeight
            }, 350);

From the above code $.get() is the Ajax request which loads the HTML content from the URL provided in next/previous arrow links.

Also, you need to create another template which will only have the calendar code which will be used by the Ajax request URL.

  • 1
    Thank you - this is getting closer. I already had the calendar code in a separate template, but outside the template group. I updated the jQuery, created the template called "calendar" and the calendar is sliding - but then turns white. Still at: link Sep 27, 2018 at 13:47
  • Check I have updated the code. You are replacing the whole container so just remove , function() {$cal.fadeOut(250).remove();} from code.
    – Jainil
    Sep 27, 2018 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.