Hi,
I think that what you are requesting would actually be a good feature to include in a future version of the calendar.
I believe that it is quite a reasonable requirment to not allow the user to see previous months to the current one.
Assuming that you haven't changed anything in your
mootools-cal-public.js you could replace the whole lot (rather than me exaplaining it line by line) with this:
- Code: Select all
/*
File: mootools-cal-public.js
Author: cbolson.com
Script: availability calendar
Version: 3.03
Url: http://www.ajaxavailabilitycalendar.com
Date Created: 2009-07-20
Date Modified: 2010-01-30
*/
var leaveOnlyThisClass = function(el, cl){
el.set('class', el.get('class').split(' ').filter(function(c){return c == this },cl)[0]);
};
// load calendar for month and year
function load_calendar(el,month,year){
var req = new Request({
async:false, // freeze browser whilst getting data - this way the elements are ready to be "clicked" :)
method: 'get',
url: url_ajax_cal,
data: {'id_item':id_item,'month':month,'year':year,'lang':lang},
evalScripts:true,
onRequest: function() {
el.set('html','<img class="img_loading_month" src="'+img_loading_month+'">');
},
onSuccess: function(response) {
el.set('html',response);
if(clickable_past=="off"){
document.id('the_months').getElements('.past').each(function(el) {
el.set('opacity','0.6');
// NOTE - CAN't change bg color as this will mess with states!!!!!!
});
}
// remove classes (except base)
leaveOnlyThisClass(el,'cal_month');
// add class to allow further month loading
el.addClass('load_cal');
//add month class (removed each time)
el.addClass('month_'+month+'');
}
}).send();
}
// make the dates clickable
function activate_dates(){
// add custom events here - eg to update booking form
var dateStart=document.id('date_start');
// event delegation method - requires "more" file
document.id('the_months').addEvent('click:relay(.clickable)',function(){
if(!this.hasClass('booked')){
dateStart.set('value',this.id);
}
});
/*
// no event delegation
$$('li.clickable').each(function(el){
if(!el.hasClass('booked')){
el.addEvent('click',function(){
dateStart.set('value',this.id);
}).setStyle('cursor','pointer');
}
})
*/
}
// calendar navigation buttons
function calendar_nav(){
var d = new Date();
// deactivate prev button on load as the user can't see months previous to today
btPrev=document.id('cal_prev').setStyle("opacity",0);
$$('#cal_controls img').each(function(img) {
// thanks to http://davidwalsh.name/mootools-image-mouseovers
var src = img.getProperty('src');
img.setStyle('cursor','pointer');
var extension = src.substring(src.lastIndexOf('.'),src.length)
img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'_over' + extension)); });
img.addEvent('mouseleave', function() { img.setProperty('src',src); });
img.addEvent('click', function() {
var type=img.getParent().get('id');
if(type=='cal_prev'){
// get each calendar and calculate new date
$$('div.load_cal').each(function(el,index){
var this_date=el.getFirst().id;
var data=this_date.split('_');
// convert to numeric
cur_month = parseFloat(data[0]);
new_year = parseFloat(data[1]);
new_month=(cur_month-months_to_show);
if(new_month<1){
// reset month and add 1 year
new_month=(new_month+12);
new_year=(new_year-1);
}
load_calendar(el,new_month,new_year);
if(index==0){
checkCurrentMonth(new_month,new_year);
}
});
}else if(type=='cal_next'){
// get each calendar and calculate new date
$$('div.load_cal').each(function(el,index){
var this_date=el.getFirst().id;
var data=this_date.split('_');
// convert to numeric
cur_month = parseFloat(data[0]);
new_year = parseFloat(data[1]);
new_month=(cur_month+months_to_show);
if(new_month>12){
// reset month and add 1 year
var curr_month = d.getMonth();
new_month=(new_month-12);
new_year=(new_year+1);
}
load_calendar(el,new_month,new_year);
if(index==0){
checkCurrentMonth(new_month,new_year);
}
});
}
// once drawn, make calendars clickable
activate_dates();
});
});
}
function checkCurrentMonth(m,y){
var d = new Date();
var curr_year = d.getFullYear();
var curr_month = d.getMonth();
if(curr_year==y && (curr_month+1)==m){
// hide prev button
btPrev.setStyle('opacity',0);
}else{
// hide prev button
btPrev.setStyle('opacity',1);
}
}
window.addEvent('domready', function() {
// load initial calendars
if($$('.load_cal')){
$$('.load_cal').each(function(el){
var this_date=el.get('id');
var data=this_date.split('_');
load_calendar(el,data[0],data[1]);
});
// once drawn, make calendars clickable
activate_dates();
// calendar next and back buttons
calendar_nav();
}
});
I haven't actually changed much, just added a new function to check the dates on when the buttons are clicked (it only checks the first month as it is loaded - no need to check the second one in your case)
Replace that file contents with the above code and let me know if it does what you are after.
Chris