Eventhandler collision between jscalendar and grid with Firefox

Hello Everybody,

I'm using the grid with jscalendar (http://jscalendar.sourceforge.net) on the same page.

This works with no problem in IE 6 but leads to collision between the event handlers of the grid in gecko.js:

-   58     element.attachEvent = function (name, handler) {
 -   59         if (typeof handler != "function") {return}
 -   60         var nsName = name.replace(/^on/, "");
 -   61         var nsHandler = function(event){
 -   62             window.event = event;
 -   63             handler();
 -   64             window.event = null;
     65         };
 -   66         handler[name] = nsHandler;
 -   67         this.addEventListener(nsName, nsHandler, false);
     68     };

and the eventcode in calendar.js:

-   165 Calendar.getTargetElement = function(ev) {
 -   166     var f = Calendar.is_ie ? window.event.srcElement : ev.target;
 -   167     while (f.nodeType != 1)
 -   168         f = f.parentNode;
 -   169     return f;
     170 };

The event handler from the grid is triggered by the events of the calendar popup which calls the function handler() (gecko.js, line 63) and then sets window.event = null. After this the calendar eventhandler gets the event but it is null. All mouse events on the calendar popup lead to a javascript runtime error and the mouse handling is completely disabled.

The solution would be to check if the call to handler realy handles the event and if it does not leave the event in place (not null assignment to window.event).

Does anyone (Alex?) has an idea on how this could be solved?

Thank you for your patience.
April 26,
Has anyone got this problem? Please help!

My suspect was that the event handler in gecko.js catches the event and then disables the event.

Is there anyone out there using the grid with jscalendar in FireFox?

Thank you.
May 3,
Just for pushing this message on the top:

Anyone got an answer?
May 10,

I encountered the same problem but no solution yet. How is your key arrows navigation in Gecko?

May 10,
Do you mean key navigation in the jscalendar?

If yes navigation is working.

I can use the arrow keys to navigate to a date and hit return to select that date or hit esc to cancel date selection.

I can use the space bar to move to the current date.

Arrow up and arrow down navigation is working in the grid.

Maybe Alex can help us?
May 11,

I guess the calendar incorrectly detects the browser as Internet Explorer and tries to use IE event handling methods in Gecko. This happens because in ActiveWidgets I emulate some of IE functionality in Gecko (now it does not look like a good idea anymore).

Probably the fix could be either trying to load calendar libraries before AW or just force Calendar.is_ie property to false after you create the calendar object.
Alex (ActiveWidgets)
May 11,

I tried the Alex tip but no good result ev has no properties still coming on.

Did you find a solution?

The arrow keys in the grid are now doing well in the Gecko grid I installed latest release.


May 11,

I did a simple dump of Calendar.is_ie after the initialization of the calendar Object ( Calendar.setup() ). The result is 'false'.

And I did already load the calendar libraries before the grid libraries.

Sorry but this is not the solution. Event not with the fresh FireFox 1.0.4.

Anyone got a solution.

Thank you all for helping.
May 12,
Again pushing this message on the top:

Anyone got an answer?
May 18,
I looked at jscalendar code - this really is a collision between my IE emulation code and calendar browser detection. Here is the possible fix -change the order of browser checks in calendar.addEvent function.

Original function:

Calendar.addEvent = function(el, evname, func) {
    if (el.attachEvent) { // IE
        el.attachEvent("on" + evname, func);
    } else if (el.addEventListener) { // Gecko / W3C
        el.addEventListener(evname, func, true);
    } else {
        el["on" + evname] = func;

Working variant (just check for Gecko first)
Calendar.addEvent = function(el, evname, func) {
    if (el.addEventListener) { // Gecko / W3C
        el.addEventListener(evname, func, true);
    } else if (el.attachEvent) { // IE
        el.attachEvent("on" + evname, func);
    } else {
        el["on" + evname] = func;

I understand that it is not nice and I should rather fix my own code, but this is the quickiest solution that I see for now.
Alex (ActiveWidgets)
May 18,
Yes! You got it!

Thank you Alex!

Well I'm sure version 2 of the grid solves all these problems ;-)

May 19,
Not to hijack this thread, but I think Google Maps has the same issue. Everytime I use google maps and AW it'll crash. If I comment out the code in AW for the setCapture / releaseCapture functions, google maps continues to work.

I'd try to find a way to alter google maps, but it's not open source so there's no way. Looks like the only way around this is modifying the AW code. Anyway to fix this?
August 19,

If google maps runs in your browser and is no applet you can look at the code what he is doing and debug the stuff. The code is in your temp browser directory. Pick all files and make a local example of it and start debugging.
Good luck (can be tough)

John Ophof http://open-modeling.sourceforge.net
August 20,
The google maps code is obfuscated so I can't really go through the local code to debug. In addition even if I did find the bug, I wouldn't be able to make any changes since I the code is downloaded from google each time I use the JS.
August 22,
I see but to know the answere and want to solve it you must make it reproducable.
How is the obfuscating done. It is possible to make it readable again by transforming a compressed js file back to a readable one. There are tools around doing it for you. If the variables are renamed it will be harder of course.
If you find the error you can do 2 things change the grid software somehow or send google a mail with the error so they can change it.
John Ophof http://open-modeling.sourceforge.net
August 23,
Hola a todos, tengo un problema con JSCALENDAR en MOZILLA.
Calendar.setup() anda bien, pero cuando selecciono una fecha este no me la lleva al campo del formulario.
tienen alguna solucion para esto?

mi codigo es:

<link rel="stylesheet" type="text/css" media="all" href="c:/calendar/calendar-brown.css" />
<script type="text/javascript" src="c:/calendar/calendar.js"></script>
<script type="text/javascript" src="c:/calendar/lang/calendar-sp.js"></script>
<script type="text/javascript" src="c:/calendar/calendar-setup.js"></script>
<INPUT TYPE="text" NAME="P_FECHA_APERTURA" SIZE="11" MAXLENGTH="10" class="texto" width="75%" bgcolor="#E5F5FF" height="30" onBlur="ValidarFecha(this);" ><a href="#" id="P_FECHA_APERTURA1"><img src="/portada1img/calendario.gif" border="0" align="absmiddle" alt="" /></a>

<script type="text/javascript">
Calendar.setup({"ifFormat":"%d-%m-%Y" ,"daFormat":"%d-%m-%Y","firstDay":1,"showsTime":false,"showOthers":true,"timeFormat":12,"inputField":"P_FECHA_APERTURA","button":"P_FECHA_APERTURA1"});</script></TD></TR></TABLE>
Mariela (analistamariela@gmail.com) - Argentina
April 18,
Hi... calendar hav other way to open... look my code:

var onSelect = function(calendar, date){
              // get the value and do something
              dateEl.value = date;
              calendar.callCloseHandler(); // close calendar

      var onClose = function(calendar){
            calendar.hide(); // hide calendar
            calendar.destroy(); //destroy calendar

      var cal = new Calendar(1, null, onSelect, onClose); //create
      dateEl = document.getElementById("dateElement");
      cal.weekNumbers = false;
April 19,
Can this code be used somehow to open JSCalendar instead of popup in Combo Control ? It would be realy great...

July 17,
I did this not just for you ASJ, but for me too.

John Mason
December 20,

This topic is archived.

See also:

Back to support forum