Support archive

Low Events Ajax Calendar

Celéste Erasmus 23 Jan 2014 09:28 question, complete

Do you perhaps have any documentation or code snippets that would help me to implement the events calendar with ajax. In other words, not reload the page when clicking the previous or next buttons ?

Any suggestions or pointers would be greatly appreciated.

Replies

1. Low 23 Jan 2014 09:41

   I don't have any docs or examples on that -- it's front-end implementation, which is up to you. However, here's how I would approach it:
   
   - Make sure the bits that need to be reloaded is in its own template. Usually, that would be the Entries tag (eg. events/_entries)
   - Embed this template in the main template where you want to display them (eg. {embed="events/_entries"}
   - Generate the prev/next links like you normally would, and make sure everything works without JS.
   - Use JS to catch the clicks on the prev/next links, change the href to target the embedded template only, and load that up using Ajax, inserting the result in the DOM.

2. Celéste Erasmus 23 Jan 2014 09:46

   great ! thank you !

3. Celéste Erasmus 23 Jan 2014 12:46

   It's working nicely, but only the first time that you click the next or previous buttons.
   
   On the second click, it redirects to the embed template.
   
   Can you think what mistake I might be making ?
   
   $('#prev').click(function(e){
   e.preventDefault();
   var prev = $(this).attr("href");
   $('#calendar').load(prev);
   });

4. Low 23 Jan 2014 13:26

   You'll need to delegate the onclick handler. Something like this:
   
   

   $('#calendar').on('click', '#prev', function(e){ 
      e.preventDefault(); 
      $('#calendar').load(this.href); 
    });

   Low 23 Jan 2014 13:28

   If you give your prev/next links the same class (for example 'nav'), you could trigger both by using this:
   
   

   $('#calendar').on('click', '.nav', function(e){ 
      e.preventDefault(); 
      $('#calendar').load(this.href); 
    });

5. Celéste Erasmus 23 Jan 2014 13:45

   found it - had to adjust my click handler, because the element is loaded dynamically:
   
   $(document).on('click', '#next', function(e){
   e.preventDefault();
   var next = $(this).attr("href");
   $('#calendar').load(next);
   });

6. Celéste Erasmus 23 Jan 2014 13:48

   thank you very much for your feedback - appreciate it

7. Celéste Erasmus 30 Jan 2015 06:02

   The Ajax calendar works well, but I now need to limit how far in advance the user can browse. As soon as I add date_to="+365 day" the next_month nav arrow no longer works. I'm struggling to figure out why. Am I using date_to incorrectly ?
   
   

   
   {exp:low_events:calendar channel="events" date="{segment_3}" date_to="+365 day"}
   
   
   {this_month format="%F %Y"}
   
   
   Click on the dates below to view the events
   
   {weekdays}{weekday}{/weekdays}
   
   {weeks}
   
   {days}
   
   {if events_on_day}
   {day_number}
   {if:else}
   {day_number}
   {/if}
   
   {/days}
   
   {/weeks}
   
   {/exp:low_events:calendar}
   

8. Low 30 Jan 2015 08:14

   The Calendar tag doesn't have a date_to parameter. Instead, you'd have to use conditionals to show/hide the prev/next links.