integration with a form

[bon]

Hi, I am trying to integrate the calendar into a form, I want to allow users to pick a date and submit the selection, how can I do this?

Thanks a lot!

[chris]

Hi, I actually had the solution posted for this on the previous forum (I have since switched back to this phpBB forum) let me see if I can find it and post it here.....

Chris

[chris]

Found it....

This can be achieved with a little bit of Javascript code.
The following code is for adding just one date field to the form. Adding a second one would require you to someway identify which of the 2 fields the date should be passed to and would therefore require a more complex solution.
Allowing the user to define a start date and a number of nights is a simple solution to this problem.

First of all, let's assume that you have a form field for your date on your page something like this:
Copy code

1. <input type="text" id="date" name="date">

It is important to note that the field must have an id (in this case "date") for the javsacript to be able to access it.

Now, you need to open the public javascript calendar file: mootools-cal-public.js
In this file at around line 42 you should be able to see the following empty function:

Code: Select all

function activate_dates(){
   // add custom events here - eg to update booking form
}


I left this in on purpose as a starting point for you to add custom code in for this sort of thing.
So, to make the dates clickable and, when clicked on, the date is passed to the form field, you need to add in this code to that function:

Code: Select all

function activate_dates(){
  var dateStart=document.id('date');
  $$('li.clickable').each(function(el){
    if(!el.hasClass('booked')){
      el.addEvent('click',function(){
        dateStart.set('value',this.id);
      }).setStyle('cursor','pointer');
    }
  })
}


This snippet bascially detects the "clickable" dates but not the "booked" ones and adds an event to them so that, when the user clicks on them, the date is passed to the select box.

Notes.
I am aware that this is not the best way to do this for 2 reasons:

1. The php code for the "public" calendar should not even consider making the booked dates clickable.
2. The javascript would be better if it used "event delegation" to assign the clicks to each "clickable" date. However, this requires another Mootools file to be included so is not an option for the current version without getting into more coding details. In case you would prefer this method, I will post the instructions in a follow-up post.

* The next version of the calendar will address both these issues.

Edit:
If you are implementing this on a calendar shown within an iframe you will need to modify the JS code slightly so as to update elements in the "parent" document
Here is an example of how to do this:

Code: Select all

function activate_dates(){
  //  add custom events here - eg to update booking form
  var dateStart=parent.document.getElementById('date');
  $$('li.clickable').each(function(el){
    if(!el.hasClass('booked')){
      el.addEvent('click',function(){
        dateStart.set('value',this.id);
      }).setStyle('cursor','pointer');
    }
  })
}
}

[virgus]

Hi Chris,
I just had an idea from the old and ugly calendar that was installed on my website and modified the script you made adding mousedown and mouseup events.
This might improve the form filling while visualizing the calendar as you can click the start date and drag the mouse to the end date to see selected all the days you're staying.

Code: Select all

//   make the dates clickable
function activate_dates(){
  var dateStart=document.id('dateStart');
  var dateEnd=document.id('dateEnd');
  $$('li.clickable').each(function(el){
    if(!el.hasClass('booked')){
      el.addEvent('mousedown',function(){
        dateStart.set('value',this.id);
      }).setStyle('cursor','pointer');
      el.addEvent('mouseup',function(){
        dateEnd.set('value',this.id);
      }).setStyle('cursor','pointer');
    };
  })
}


The further improvements might be:

• to scroll the group of visualized months by one month only instead of by groups (can easily be done by modifying function calendar_nav() in mootools-cal-public.js)
  
• to avoid the selection of month and days on the header of each month panel.
• a nicer marker effect of the selected days

Do you have any suggestion on how to achieve the last two of these?

Thanks again,
Virginio

[danbug]

I built a bit on the last post, the first click will populate the dateStart field and the second click will populate the dateEnd field if it is not earlier than the dateStart. The third click will clear both values. The only hiccup is that if you change the months via the arrows it will reset the click count

Code: Select all

//   make the dates clickable

   
function activate_dates(){
  var dateStart=document.id('dateStart');
  var dateEnd=document.id('dateEnd');
  var click= 'one';
  var arrival='';
  $$('li.clickable').each(function(el){
    if(!el.hasClass('booked') ){
      el.addEvent('mousedown',function(){
        if ( click =='one'){
   dateStart.set('value',this.id);
   click = 'two';
   arrival = this.id;
   } else if ( click =='two') {
      if (this.id > arrival) {
      dateEnd.set('value',this.id);
      click = 'three';
      } else {
      dateEnd.set();
      }
   }else{
   dateStart.set('value','');
   dateEnd.set('value','');
   click = 'one';
   }

      }).setStyle('cursor','pointer');
    };
  })
}

[marcodeluca]

Hi,

The code above was easy to implement, thanks for that. Now, I'm not very good with javascript - and I just started playing with this calendar. It's awesome btw:) So I have not yet taken the time to implement the calendar using PHP. I'm sure this will probably be the best way, but before I do that, is it possible to have the clickable dates populate form fields that are on a website page when the calendar is loaded via an iFrame?

Using an iFrame and implementing the code above, I think the form needs to be in the calendar's index.php file to work?

Thanks!

[chris]

Hi,
I haven't tested this but, as I mentioned in another thread, you should be able to get the code to pass the selected dates to a form element in the "main" page (ie the one that holds the iframe) by changing these lines:

Code: Select all

var dateStart=document.id('dateStart');
 var dateEnd=document.id('dateEnd');

to this:

Code: Select all

var dateStart=$(parent.document.body).getElement('dateStart');
  var dateEnd=$(parent.document.body).getElement('dateEnd');

Give that a go and let me know how it goes.

Chris

[marcodeluca]

First try it didn't work, but I did try to implement the code you suggested into a form that had other javascript stuff happening. I'll try to get it working on it's own to make sure there are no conflicts and let you know.

marco

[amisurya]

@ danbug

The only hiccup is that if you change the months via the arrows it will reset the click count

any solution yet? i show only one month on the res page and it makes it real difficult to use it properly, especially because i want to disable the input field so they can't enter booked dates manually. aka dilemma! any form of solution would be greatly appreciated!!!


is there by the way any edit i can make to display the date in a different format? now it says "2010-11-04", yet i'd prefer "04 November 2010", to avoid misunderstanding.

[surfvenus]

Thanks so much for this calendar... it's simple and effective. I got the iframe start and end date picker to work with the following code adjustments:

Code: Select all

 
var dateStart=$(parent.document.body).getElementById('dateStart');
var dateEnd=$(parent.document.body).getElementById('dateEnd');


sort of a combo of the two chris had up there...
Thanks again for the great stuff.
dean