Hello,
I needed the floating calendar to close when the user clicks on a date, rather than clicking on the "X" button. So after a bit of investigation I found a solution which I think it could be useful to somebody.
The solution is to override the _click method in an object that extends the scal object. In my case, I had a method called toggleCalendar that toggles the visibility, so I copied the _click method and added a call to that method:
_click: function(event,cellIndex) {
this.element.select('.dayselected').invoke('removeClassName', 'dayselected');
(event.target.hasClassName('daybox') ? event.target : event.target.up()).addClassName('dayselected');
this._setCurrentDate(this.dateRange[cellIndex]);
this._updateExternal();
this.toggleCalendar(); // Close calendar.
}
I needed to do this to improve a bit the usability of the web site "saving" a click from the user every time he/she uses the calendar.
Greetings,
Octavi.
Floating calendar
Thanks, Octavi!!!
Alternate approach
I am using an alternate approach that doesn't override any internal scal functions. When I examined the scal source code for the _updateExternal function in the scal.js file, I noticed that it checked to see if the updateelement object
That was supplied in the constructor (see below) was a function or not, and invoked the function if it was.
var Cal = new scal('samplecal',updateelement,options);
I create the scal object with a annonymous callback function for the updateelement argument that updates the target field with the date and then hides the calendar. For simplicity, I create a container DIV to hold the calendar and control the visibility of the container instead of the calendar.
The code looks like this (sorry about the lack of indenting):
// Create a instance of the calendar date picker
// to update given input field.
function makeDatepicker(fieldName) {
// name of div we will create to hold calendar
var chName = fieldName + '_chooser';
// did we create the dive on a previous call?
var ch = $(chName);
if(ch) {
// yes, container div exists - toggle its visibility
if(ch.visible()) {
ch.hide();
} else {
ch.show();
}
} else {
// no, container div does not exist - create it now and the calendar too
var dv = "";
$(fieldName).ancestors().first().insert(dv);
var ch = $(chName);
ch.addClassName('googleblue'); // skin the calendar
ch.absolutize(); // calendar will overlay page content
new scal(chName,
function(dt){
// this is called when date picked - update input field and hide calendar
$(fieldName).value = dt.format('mm/dd/yyyy');
ch.hide();
}
);
}
}
None of this is mentioned in the scal documentation that I could find, so there is some risk of it breaking under future versions.
GRK
correction
Sorry, line
var dv = "";should be:
var dv = "<div id='"+ chName + "'></div>";GRK
Post new comment