1

3

Intermediate

Basic AJAX Calendar using jQuery

This turorial shows you how to create a basic AJAX calendar using the Calendar asset in Matrix and combining it with very little jQuery.

By Bart Banda

The setup

The first thing you will need to to is to obviously create a Calendar asset and source some Event assets. Also make sure you are including jQuery in your HTML so that the functions written below will work. This tutorial assumes you know what jQuery is and how it can be used to work with dynamic HTML and CSS.

Once you have created your Calendar asset it is probably best if you set the default view to something other than Year view, I suggest Week or Month view but this isn't crucial. Same goes for display type, I like to use List Without Headings with Show Title Only, but this is again up to you.

Now you are ready for the page contents, it will probably help you if you have 2 seperated Raw HTML bodycopy divs, one for the HTML and one for the JavaScript. In the first bodycopy put the following HTML in:

<div class="loading" style="display:none"><em></em></div>

<div id="calendar-wrapper">
<div id="calendar-contents">

<h2>%calendar_title%</h2>

<p>%prev_link%&nbsp;&nbsp;&nbsp;&nbsp;%up_link%&nbsp;&nbsp;&nbsp;&nbsp;%next_link%</p>

%calendar_contents%

</div>
</div>

You can style this up as much as you want with your CSS so I'll leave that part up to you.

Now in the second bodycopy div, put the following JavaScript in:

<script type="text/javascript">
//<![CDATA[

//Function for capturing the calendar navigation links and making them AJAX request links
function iniCalendar(){
   //Find the calendar nav links and put click functions on them
   $(".calendarNavLink").click(function(){
      $('#calendar-wrapper').hide(); //Hide the calendar contents while we load the next page
      $('.loading').html('<em>Loading, please wait...</em>').show(); //Show loading message
      var requestUrl = $(this).attr('href') + ' #calendar-contents'; //Construct our AJAX request URL
      $('#calendar-wrapper').load(requestUrl, function() {
         //After the AJAX has loaded our next page, hide the loading message and show the calendar contents
         $('.loading').html('').hide();
         $('#calendar-wrapper').show();
         iniCalendar(); //Initiate the calendar click functions again
      });
      return false;
   });
}

//Initiate the calendar click functions after the calendar contents have loaded
iniCalendar();

//]]>
</script>

Save your changes and that's it! You now have a basic AJAX Matrix Calendar so that you can navigate through months without reloading the page.

Extra development

Further to this basic functionality, there are heaps more you can do do it if you reckon you are up for it, for example:

• Apply a really simple user defined design to the Calendar asset so that you can make AJAX requests that will return the contents a lot quicker rather than requesting the Calendar page with your full site design
• Make each Calendar page load update the URL in the browser using a Hash so that specific Calendar views can be bookmarked, see this example.
• Combine it with a jQuery date picker plugin to further increase the user interaction and make date picking a breeze.
• Use your creative mind to come up with more expansions....

Enjoy!

Tutorial Feedback

There is currently 1 comments.

Add Your Feedback

You must be logged in to leave a comment. You can sign-up for free!