A way to receive events on doubleclick events on the calendar (not the appointment canvas)

206 views

Skip to first unread message

uzilan

unread,

Mar 9, 2010, 10:07:43 AM3/9/10

to gwt-cal

Hi,

I wanted to be able to show a day view calendar once a user double
clicks a day in the month view and ran into some trouble since the
onDoubleClick() method only fires events that were related to
appointments. So I decided to override the onDoubleClick() method but
I still couldn't find the underlying calendar object since the
appointment canvas was in the way. So I found this article at
http://www.vinylfox.com/forwarding-mouse-events-through-layers/ about
forwarding events through layers and implemented it my method. The
idea is to temporarily hide the appointment canvas in order to find
the element that is hiding underneath it.
Also, since GWT does not have the document.elementFromPoint(x, y)
method, I had to use native JavaScript code to make it work.

I thought I'd post it here in case anybody else is in need for the
same trick.

//Uzilan

import com.bradrydzewski.gwt.calendar.client.monthview.MonthView;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;

public class ExtendedMonthView extends MonthView {

/**
* Override MonthView.onDoubleClick in order to receive events on
calendar cells (and not only on appointments)
* @see http://www.vinylfox.com/forwarding-mouse-events-through-layers/
*/
@Override
public void onDoubleClick(Element clickedElement, Event event) {
super.onDoubleClick(clickedElement, event);

int x = DOM.eventGetClientX(event);
int y = DOM.eventGetClientY(event);

// temporarily hide the appointment canvas
clickedElement.setAttribute("style", "visibility:hidden");

// use a native JavaScript method to find the element at the
doubleclick event
Element elementBehind = getElementFromPoint(x, y);

// restore the appointment canvas
clickedElement.setAttribute("style", "visibility:visible");

fireDoubleClickEvent(elementBehind, event);
}

private native Element getElementFromPoint(int x, int y) /*-{
return $wnd.document.elementFromPoint(x, y);
}-*/;

private void fireDoubleClickEvent(Element element, Event event) {
// extract the day number from the element etc.
}
}

bradr

unread,

Mar 9, 2010, 11:45:14 AM3/9/10

to gwt-cal

For some reason my original message didn't get saved, so I am re-
typing ....

Did you try using the TimeBlockClickHander? The event name isn't very
intuitive because it was originally meant for the DayView, but in the
MonthView this event is triggered when a particular day in the month
grid is clicked:

calendar.addTimeBlockClickHandler(new TimeBlockClickHandler<Date>(){
@Override
public void onTimeBlockClick(TimeBlockClickEvent<Date> event) {
...
}
});

You can configure it to use Single vs. Double click in the
CalendarSettings.TimeBlockClickNumber

Let us know if this doesn't meet your needs - it may be a quick fix on
our side and prevent you from having to keep a custom version of the
MonthView class

On Mar 9, 8:07 am, uzilan <uzi.landsm...@gmail.com> wrote:
> Hi,
>
> I wanted to be able to show a day view calendar once a user double
> clicks a day in the month view and ran into some trouble since the
> onDoubleClick() method only fires events that were related to
> appointments. So I decided to override the onDoubleClick() method but
> I still couldn't find the underlying calendar object since the
> appointment canvas was in the way. So I found this article athttp://www.vinylfox.com/forwarding-mouse-events-through-layers/about
> forwarding events through layers and implemented it my method. The
> idea is to temporarily hide the appointment canvas in order to find
> the element that is hiding underneath it.
> Also, since GWT does not have the document.elementFromPoint(x, y)
> method, I had to use native JavaScript code to make it work.
>
> I thought I'd post it here in case anybody else is in need for the
> same trick.
>
> //Uzilan
>
> import com.bradrydzewski.gwt.calendar.client.monthview.MonthView;
> import com.google.gwt.user.client.DOM;
> import com.google.gwt.user.client.Element;
> import com.google.gwt.user.client.Event;
>
> public class ExtendedMonthView extends MonthView {
>
> /**
> * Override MonthView.onDoubleClick in order to receive events on
> calendar cells (and not only on appointments)