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');
}
})
}
}
