Wanting to know if anyone has developed a Squiz Calendar where (dynamically using keyword replacements) both the next/prev "Day" and next/prev "Week" view links are both displayed at the same time, and which are clickable for showing a list of Events on the page in either the Day or Week view as well (depending on which link is clicked/selected)??
Also, would there be a way of generating a Day Name link selector (displaying the day names of the selected week [as per above] = Mon to Sun) using Squiz's local features/code/setup?
The links to navigate around the calendar just call the page URL with query string parameters like the ones below, so I'd think its easy to roll these into a button you create yourself rather than rely on what the asset displays itself...
I have a page setup where I roll my own list of months and then use AJAX to dynamically load the view I want, but that view is generated by a calendar asset. As an aside I used a rolling calendar asset to generate the month list but you could do it any way thats convenient.
I'm trying to do something similar with my Events page which is currently nesting in a Calendars page and I want users to be able to switch months without the page being reloaded.
Just wondering if you could give some tips on how you achieved this?
I'm trying to do something similar with my Events page which is currently nesting in a Calendars page and I want users to be able to switch months without the page being reloaded.
Just wondering if you could give some tips on how you achieved this?
You need to use the %next_link% and %prev_link% keywords which you will use to get the URL from to load up the prev or next month using ajax.
//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();