integration with a form

Help with installation and general calendar setttings

Re: integration with a form

Postby caracol » Sun Mar 06, 2011 9:25 pm

Hi Chris,
I tried it, but it didn´t work for me.

calendar is clickable, and cursor 'pointer' is showed correctly.
But when I click dates, nothing happens.

I wrote one alert, but its not showed when I click date.
(Alert is only showed first time page is loaded)

Code: Select all
<input type="text" name="dateStart" id="dateStart">


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


I´m using 'firebug' and it doesn´t show any error.

Please, any idea what´s wrong with it?

Thanks very much for your time.

chris wrote: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');
    }
  })
}
}
caracol
 
Posts: 4
Joined: Sat Feb 26, 2011 11:53 pm

Re: integration with a form

Postby chris » Sun Mar 06, 2011 9:56 pm

Hi,
Would it be possible to share an url so I can take a closer look?

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 caracol » Sun Mar 06, 2011 10:19 pm

Hi Chris,

I have no public url by now, I´m working on local server.

When I finish it, I´ll give you the url, so you can add it if you want to your "example sites"

I´ve fixed it.

I don´t know why, this line didn´t work for me:
Code: Select all
dateStart.set('value',this.id);


So I modified it to this one:
Code: Select all
dateStartvalue = this.id;


you can see that´s wrong. The correct one should be:
Code: Select all
dateStart.value = this.id;


So now it´s working correctly. The date is on english format, but I can change it to spanish format.

Thanks very much for your help and your great script.
caracol
 
Posts: 4
Joined: Sat Feb 26, 2011 11:53 pm

Re: integration with a form

Postby kotoshy » Tue Mar 15, 2011 7:02 am

How do you put your MySpace calendar in a scroll box? My calendar is full of events and I can't stand the big blue list on my profile. Please don't suggest hiding it - as I want some events to show up. Is there a way I can put my calendar in a scroll box?
Last edited by kotoshy on Thu Mar 17, 2011 11:22 am, edited 1 time in total.
kotoshy
 
Posts: 1
Joined: Sat Mar 12, 2011 9:41 am

Re: integration with a form

Postby chris » Tue Mar 15, 2011 2:25 pm

Hi,
I think that you must have the wrong calendar and forum. This calendar has nothing to do with Myspace.

;)
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 Arro » Thu Jun 16, 2011 6:16 am

Hi,
sorry for my english, but i've got a question.
Is there any possibilty to post a summary of the changings to let this work?
I didn't understand where i've to implement the codes.
Like: in file mootools-cal-public.js after ... (code) you have to insert ... (code)
My knowing of programming isn't so good to know, where i have to do what.
Thanks for your help
Greets
Arro
Arro
 
Posts: 1
Joined: Thu Jun 16, 2011 6:10 am

Re: integration with a form

Postby chris » Thu Jun 16, 2011 8:40 am

Hi,
What do you need that isn't explained in my earlier post in this thread?

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 Zulu » Fri Sep 02, 2011 8:14 am

I have integrated the calendar successfully to a form when I installed the calendar via PHP. I however cannot get any type of form validation to work on this form because of the forms used in the calendar code (which allows users and submit blank forms). In order to resolve this, I moved the calendar into an iframe. This is fixed the form validation problem, but now I do not know how to pull the item_id into the form. I have various items to select & book, so when the user posts the form, I need to know the item_id that they are wishing to book. The reason that this is so important is that when the user posts the form, I provisionally book the date - without the item_id in the form, I cannot do this. I am however not a java programmer so have no idea where to look. when I put the calendar into the page via PHP, i used the input field below to pull the item_id across. but this does not work when using the form via iframe.
Code: Select all
<input name="item" type="hidden" value="<?php   echo ID_ITEM ?>" />


Is there a way to amend the code below from the mootools-cal-public to push the date & item_id to the form?

Code: Select all
function activate_dates(){ 
  var dateStart=parent.document.getElementById('date'); //send dateStart to forms 'date' field
  var idno=parent.document.getElementById('idfield');   //send idno to forms 'idfield' field
   $$('li.clickable').each(function(el){
    if(!el.hasClass('booked')){
      el.addEvent('click',function(){
        dateStart.value = this.id;      //getting date value
      idno.value = $_GET["id_item"];    //apparently this is the correct script, but does not work?
   // idno.value = this.document.id_item.value;   Tried this, but does not work
      }).setStyle('cursor','pointer');
    }
  })   
}


I have been able to get the value to push into the form by using the code below. This however requires that the form is refreshed first - something that you cannot rely on users to do.

Header in parent:
Code: Select all
  <script language="javascript">
  function readval(string){
   var idno=string
   document.getElementById('idfield').value=idno;
   }</script>


In field of iframe:
Code: Select all
onchange= parent.readval(this.form.id_item.value);"



PS. This is a really nice calendar and very easy to implement! :D
Zulu
 
Posts: 3
Joined: Thu Sep 01, 2011 4:28 pm

Re: integration with a form

Postby Zulu » Sun Sep 04, 2011 9:30 am

OK, I found a solution and it was silly of me not to think of it. I changed my form to read:
Code: Select all
<input type="text" id="item" name="item"  size="30" value="<?php echo $_REQUEST["id_item"] ?>" type="hidden" >
and it pulls the id_item from the address bar. If anyone is looking to post the booking as provisionally booked, I used the code below in the form processing script:

Code: Select all
$varItemID = $_POST['item'];
$vardate = $_POST['date'];
mysql_query("INSERT INTO bookings (id_item , the_date , id_state , id_booking ) VALUES ('$varItemID', '$vardate', '4', '0')");


This enables the user to see that their booking has been acknowledged and other users will see this immediately- which prevents the possibility of double bookings.

Again - Awesome calendar!
Zulu
 
Posts: 3
Joined: Thu Sep 01, 2011 4:28 pm

Re: integration with a form

Postby OldDog » Tue Sep 06, 2011 12:40 am

I have played with so many Booking Calendars and stumbled across yours. This is the one I am going to persevere with.
By reading through various posts, I have managed make a go of using it but I don't want to make my efforts public yet because when I do I should have no hesitation in making a donation.

I have some questions that I need help with. I read Zulu's post that he has integrated a booking form that updates the calendar and Chris has also given tips on how to make a start.

I also find that my 'Prev' button is going beyond current month. I have trawled through to see where the setting is to prevent it from doing that but have not found an answer. I am sure someone has sorted this out!

Right now I am experimenting with a wordpress blog with a calendar per post. I have created the calendar manually and update it manually. I display it in iFrame.
Ideally, I would like to update the calendar with provisional booking automatically but not sure how to integrate a form with wordpress.
I also want to search all calendars to show corresponding posts.
Sorry for the rambling on.
OldDog
 
Posts: 1
Joined: Tue Sep 06, 2011 12:02 am

PreviousNext

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron