Removing Prev Month Button on Current Month

[Shawn]

Hey Chris,

Once again I wanted to thank you for all the support you've offered me, I had a quick question that I'm trying to figure out how to do, Basicly I show 2 months at a time, I don't want people to be able to see the previous button if the calendar is on the current month, so basicly you can go Forward/Backwards unless your already on this months calendar is there a easy way to go about this. The way im thinking its gonna have to be done is in the mootools-cal.js file It will need to do a check and set the icon to display:none or so. Any suggestions would be wonderful.

Shawn

[chris]

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

[Shawn]

Once again thanks, I modified my js file abit but after doing a side by side file difference it was easy to change the code to work. Its a excellent feature probably a good idea for your next version. Thank you for all the support its very rare to find a open source project that has this much support. Keep a eye on your paypal either me or my boss will be sending you something this weekend, we highly appreciate your help.

Shawn

[chris]

Good to know that you got it working

To be honest I would normally define the changes made step by step (and the reasoning behind them) as I feel that this helps the person requesting the changes not only understand the code in question but also might possibly help them with other projects if they learn something new.
However today has been incredibly busy so I opted for the easier (for me) option of just pasting the whole lot. Sorry if that made your life a bit harder

Thank you for all the support its very rare to find a open source project that has this much support

I try to give this project as much support as possible though that is not always possible as client work has to come first.
Chris

PS. Yes, I'll keep my eyes on my Paypal account

[itwolfy]

Hi,

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:


Replace that file contents with the above code and let me know if it does what you are after.

Chris

Thank You!! Chris!! This worked perfect for me 2