Drop Down Menu Year Select

[makorebijio]

Hello,

I love this AJAX calendar and I find that it is extremely easy to use and well designed.

My question is, how do I go about creating a DROP DOWN MENU to select the YEAR I want to display?

I would like to put this menu next to the Lang. selection, but I am not sure how to do that in AJAX.

Thanks

[chris]

Hi,
I'm glad that you like the calendar

OK, I like a challenge and I think that this could be a useful addition to the calendar so I have given this a go...

First create your list of years something like this (you can of course do this part however you like):

Code: Select all

<select id="jump_year">
   ';
   for($year=date('Y');$year<=2020; ++$year){
      echo '<option value="'.$year.'">'.$year.'</option>';
   }
   echo '
</select>

Make sure that the "id" of the select list is defined as "jump_year".

Second add this code to the ac-includes/js/mootools-cal-public.js file at the end of the window.addEvent block:

Code: Select all

$('jump_year').addEvent('change',function(){
   var new_year=parseFloat(this.value);
   //   get each calendar and calculate new date
   $$('div.load_cal').each(function(el){
      var this_date=el.getFirst().id;
      var data=this_date.split('_');         
      //   convert to numeric
      new_month   = parseFloat(data[0]);   
      load_calendar(el,new_month,new_year);
      if(new_month==12){
         //   add 1 year
         new_year=(new_year+1);
      }
   });
});

so the resulting block will look like this:

Code: Select all

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();
   }   
   
   $('jump_year').addEvent('change',function(){
      var new_year=parseFloat(this.value);
      //   get each calendar and calculate new date
      $$('div.load_cal').each(function(el){
         var this_date=el.getFirst().id;
         var data=this_date.split('_');      
         //   convert to numeric
         new_month   = parseFloat(data[0]);
         load_calendar(el,new_month,new_year);
         if(new_month==12){
            //   add 1 year
            new_year=(new_year+1);
         }
      });
   });
   
});

Give that a go and let me know how it goes or if you run into any problems

Chris

[makorebijio]

Hi,

Not only is your calendar amazing but the support you give with it is priceless.
Having said that, there is a bug I found with your code for the jump year.
I implemented it and it works perfectly, i get my drop down menu and I can select a year I want and the calendar loads it.

Bug #1 - Say I am in year 2001 then I use the arrows to go to year 2002, the drop down year select does not adjust it's year to reflect 2002.

Bug #2 - Say I am in year 2001, and I hit F5 (refresh) it will refresh the calendar to today's year 2011.

Question (just because you like a challenge):

Say I have 5 (different) separate calendars and I want to display all five calendars at once and only months 1-2-3.....
So my window would be:
Calendar #1 - Jan Feb Mar
Calendar #2 - Jan Feb Mar
Calendar #3 - Jan Feb Mar
Calendar #4 - Jan Feb Mar
Calendar #5 - Jan Feb Mar

Is that an option you ever considered implementing?

[chris]

Hi, thanks for your comments

Bug #1 - Say I am in year 2001 then I use the arrows to go to year 2002, the drop down year select does not adjust it's year to reflect 2002.

OK, I see what you are saying and you are right.
However that was just a quick fix for a specific request that I published as I thought it might be interesting to others like yourself. Ironically the user who made the original request has not yet even read my reply, though no doubt they have their reasons . <rant>I am always surprised by the amount of people who don't come back and see the reply to their resquest </rant>
If I get a chance I will take a look at this, I shouldn't think that it should be too hard to implement.

Bug #2 - Say I am in year 2001, and I hit F5 (refresh) it will refresh the calendar to today's year 2011.

This is slightly different and I would argue that it is not really a bug. When you change the year it doesn't "post" a form rather it updates the calendar via JavaScript (AJAX). So, to get the page to detect this change and "remember" it on page refresh would be pretty tricky if not impossible.

Finally as to your request....
Showing multiple calendars *is* possible but requires various core code changes both to the php and to the JavaScript. However this is the sort of thing that I do as paid customizations for clients - got to make some money out of this somehow
Here is one I did for a client just last week (the web is not finished yet):
http://www.willowbrookcabins.com/cabin_availability.php

Thanks again,

Chris