Timespan label events

The SchedulePage may include JavaScript functions in the Client Script section to handle events triggered by user interaction with the displayed timespans and their labels.

This is done by observing events via the CustomEvent object. For example:
 CustomEvent.observe ( "timespan.clicked" , timespanClicked )
In this example, your client script would include a function named timespanClicked to correspond to the one named in the code above.
function timespanClicked (event , element , scheduleItem ) { alert ( "You clicked ID=" + itemID  + " which is " + element ) ; }

The arguments passed to the functions are the event, the HTML element for the timespan, and the GwtScheduleItem of the timespan as given by your Schedule Page's Server AJAX Processor code.

Timespan events that can be observed are:
  • timespan.clicked
  • timespan.contextmenu
  • timespan.dblclicked
  • timespan.mouseover
  • timespan.mouseout
Timespan label events that can be observed are:
  • timelabel.clicked
  • timelabel.contextmenu
  • timelabel.dblclicked
  • timelabel.mouseover
  • timelabel.mouseout

View Properties:

Specify view properties to configure aspects of the view's appearance and behavior:
  • timespan_height: Set to a number of pixels to customize the height of timespans on the view.
  • timespan_between: Set to a number of pixels to customize the amount of space between timespans.
  • drag_scroll: Set to false to prevent scrolling by dragging the timeline background left or right.
Example: Specify four timespans 4 pixels tall with 16 pixels between spans and do not allow drag scrolling.
schedulePage.setViewProperty("timespan_height", 4); 
schedulePage.setViewProperty("timespan_between", 16);
schedulePage.setViewProperty("drag_scroll", "false");

Examples

There are several examples of Schedule Pages used by these plugins:
  • The Group On-Call Rotation plugin contains an example of an on-call calendar.
  • The Project Management v2 plugin contains the Project Resource Timeline Schedule Page.