integration with a form

Help with installation and general calendar setttings

Re: integration with a form

Postby jimbeeer » Tue May 08, 2012 8:04 pm

Has anyone worked out how to get it so you can click the first date in one month and the second date in another month that you've clicked forward to get to?

This is all I need to do now and this calendar will be perfect.



By the way, other people were asking about this and I don't think it's been answered so here's how to reformat the date to whatever you want it to look like:

Expanding on the previous code in page 1:

Code: Select all
if ( click =='one'){
   var dStart = this.id.replace( "date_", "" ); // removes the prefix 'date_'
   var curr_date = dStart.split('-')[2]; // grabs the day
   var curr_month = dStart.split('-')[1]; // grabs the month
   var curr_year = dStart.split('-')[0]; // grabs the year
   dateStart.value=(curr_date + "/" + curr_month + "/" + curr_year); // outputs the desired format, in my case it's dd/mm/yyyy


Then just do the same for the code for the second click.
jimbeeer
 
Posts: 3
Joined: Tue May 08, 2012 5:22 pm

Re: integration with a form

Postby jimbeeer » Wed May 09, 2012 11:15 am

Okay, I've worked out how to set it so you can have one calendar on there, flick between them and still be able to select a start date and end date.

Also I've modified it so you can only book one day if you want.

I'll be the first to admit that the javascript is scrappy, but it works how I want it to, and that's all that matters at this time.

You will need to create 3 hidden fields in your form. This is so it can keep the position you're in when you're switching between months.

Code: Select all
<input name="clicked" type="hidden" id="clicked"/>
            <input name="dayS" type="hidden" id="dayS"/>
        <input name="dayE" type="hidden" id="dayE"/>


And here's my modified function activate_dates(), I'm using the calendar in an iframe with the form in the parent page.

Code: Select all
//   make the dates clickable
   
function activate_dates(){
 var dateStart=parent.document.getElementById('dateStart');
var dateEnd=parent.document.getElementById('dateEnd');
var clicked=parent.document.getElementById('clicked');
var dayS=parent.document.getElementById('dayS');
var dayE=parent.document.getElementById('dayE');
  if (clicked.value ==''){
   var click= 'one';
   } else {
      var click= clicked.value;
   }
   clicked.value=click;
  var arrival='';
  $$('li.clickable').each(function(el){
    if(!el.hasClass('booked') ){
      el.addEvent('mousedown',function(){
        if ( click =='one'){
               var dStart = this.id.replace( "date_", "" );
               dayS.value = this.id;
                var curr_date = dStart.split('-')[2];
               var curr_month = dStart.split('-')[1];
               var curr_year = dStart.split('-')[0];
                dateStart.value=(curr_date + "/" + curr_month + "/" + curr_year);
               click = 'two';
                clicked.value=click;
               arrival.value = dayS.value;
            } else if ( click =='two') {
            var dEnd = this.id.replace( "date_", "" );
               dayE.value = this.id;
               if (dayE.value >= dayS.value) {
                var curr_date2 = dEnd.split('-')[2];
               var curr_month2 = dEnd.split('-')[1];
               var curr_year2 = dEnd.split('-')[0];
            dateEnd.value=(curr_date2 + "/" + curr_month2 + "/" + curr_year2);
               clicked.value = 'one';
            click = 'three';
         } else {
              dateEnd.set();
         }
         }else{
            dateStart.value='';
            dateEnd.value='';
            click = 'one';
         }

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


Hope this helps someone out there as much as it will me.
jimbeeer
 
Posts: 3
Joined: Tue May 08, 2012 5:22 pm

Re: integration with a form

Postby Wiciu87 » Mon May 14, 2012 10:42 pm

Hello,
I've read the tread several times now,I've tried almost everything mentioned here but I still can't make data to be pushed into the form fields

I'm using your calendar in an iframe on joomla website with a chronoforms form for booking rooms.
jeres the url:
http://agroturystyka-roztocze.xcl.pl/rezerwacje
I've set the ids for fields added the js code an nothign happens
If somebody could look into it and tell me what am I doing wrong I'd be grateful
Wiciu87
 
Posts: 6
Joined: Mon May 14, 2012 10:38 pm

Re: integration with a form

Postby chris » Tue May 15, 2012 1:14 pm

Hi,
I'm not quite sure where you actually got your code from as some of it looks more like jQuery than Mootools.

Anyway, try replacing the activate_dates() function with this:
Code: Select all
function activate_dates(){
   var dateStart=parent.document.getElementById('dateStart');
   var dateEnd=parent.document.getElementById('dateEnd');
   var click= 'one';
   var arrival='';
   $$('li.clickable').each(function(el){
      if(!el.hasClass('booked') ){
            el.addEvent('mousedown',function(){
              var dDate = this.id.replace( "date_", "" );
              if ( click =='one'){
               dateStart.value=dDate;
               click = 'two';
                  arrival = dDate;
               } else if ( click =='two') {
                  if (dDate > arrival) {
                     dateEnd.value=dDate;
                     click = 'three';
                  } else {
                     dateEnd.value="";
               }
            }else{
               dateStart.value=""
               dateEnd.value=""
               click = 'one';
            }
         }).setStyle('cursor','pointer');
      };
   })
}

That worked for me ;)

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 Wiciu87 » Tue May 15, 2012 1:48 pm

unfortunately it doesn't work:/
as far as I know joomla works on jquery so i suppose there's a conflict between them,
is there any other way to make that work in this particular situation?
The calendar is a great addition to any website and this feature would greatly help my website
If anyone has any idea let me know
Wiciu87
 
Posts: 6
Joined: Mon May 14, 2012 10:38 pm

Re: integration with a form

Postby chris » Tue May 15, 2012 1:53 pm

This issue is not related to Joomla as the calendar is being shown in an iframe which is running mootools correctly (otherwise the calendar wouldn't even load).

However, as far as I can tell from the url that you posted the code has not been changed - it is still using the previous function.

Could you change the javascript code on your live version so that I can test it out.

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 Wiciu87 » Tue May 15, 2012 2:05 pm

I changed the mootools-cal-public.js located in : [calendar folder]/ac-includes/js
like you posted above
changed file is live on the site
its attached also to this post
maybe its an issue with the form itself, but I've tried to make test input fields and it didnt work either
Attachments
mootools-cal-public.rar
(1.61 KiB) Downloaded 340 times
Wiciu87
 
Posts: 6
Joined: Mon May 14, 2012 10:38 pm

Re: integration with a form

Postby chris » Tue May 15, 2012 2:20 pm

It is now not working at all as you have added these lines to the js file:

Code: Select all
That worked for me ;)

Chris

Those lines (which presumably you copied by mistake from my previous message) are breaking the JavaScript.

Remove them and lets see where we stand.

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 Wiciu87 » Tue May 15, 2012 2:22 pm

It's done, sorry :P
Wiciu87
 
Posts: 6
Joined: Mon May 14, 2012 10:38 pm

Re: integration with a form

Postby chris » Tue May 15, 2012 2:24 pm

That got it ;)

It appears to be working now, isn't it?
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

PreviousNext

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron