integration with a form

Help with installation and general calendar setttings

integration with a form

Postby bon » Mon Apr 05, 2010 6:44 pm

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!
bon
 
Posts: 1
Joined: Mon Apr 05, 2010 6:39 pm

Re: integration with a form

Postby chris » Mon Apr 05, 2010 8:25 pm

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
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: integration with a form

Postby chris » Mon Apr 05, 2010 8:27 pm

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');
    }
  })
}
}
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: integration with a form

Postby virgus » Thu Aug 12, 2010 10:51 pm

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
virgus
 
Posts: 6
Joined: Thu Aug 05, 2010 5:51 pm

Re: integration with a form

Postby danbug » Mon Oct 11, 2010 5:55 pm

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');
    };
  })
}
danbug
 
Posts: 4
Joined: Mon Oct 11, 2010 5:48 pm

Re: integration with a form

Postby marcodeluca » Fri Oct 22, 2010 5:03 am

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!
marcodeluca
 
Posts: 3
Joined: Fri Oct 22, 2010 4:58 am

Re: integration with a form

Postby chris » Fri Oct 22, 2010 7:28 pm

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
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: integration with a form

Postby marcodeluca » Sat Oct 23, 2010 10:48 pm

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
marcodeluca
 
Posts: 3
Joined: Fri Oct 22, 2010 4:58 am

Re: integration with a form

Postby amisurya » Mon Oct 25, 2010 12:57 pm

@ 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.
amisurya
 
Posts: 1
Joined: Mon Oct 25, 2010 12:54 pm

Re: integration with a form

Postby surfvenus » Wed Jan 19, 2011 1:06 am

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
surfvenus
 
Posts: 1
Joined: Wed Jan 19, 2011 12:59 am
Location: Pavones, Costa Rica

Next

Return to Support

Who is online

Users browsing this forum: Yahoo [Bot] and 1 guest

cron