The eventline Angular Component
<schedule-event-line [gantt]="gantt"></schedule-event-line>

The eventline requires a reference to the gantt element to operate. Date units are calculated using the node package js-joda under the hood. One of the reasons to use this library is its compatibility with Java Instant. The js-joda library is required by ScheduleJS and you could also use it to apprehend time units in your project. More info on this library can be found here in the js-joda documentation.


The eventline element displays time cursors: time at mouse location, selected time interval. This element is a part of the Timeline and displayed with the Dateline

Date & Time Formatting

Each application has its own requirements regarding the format in which dates and times are displayed. Accordingly the eventline features a date and time formatter that can be replaced by calling eventline.setDateTimeFormatter(formatter: DateTimeFormatter).

Cursor: Location & Time

The eventline keeps track of the mouse cursor location when the mouse hovers over the timeline or the graphics. The location stored can be accessed using eventline.getCursorLocation(). Whenever the location changes the eventline will also update the value reachable in eventline.getCursorTime(). These two methods make the eventline the perfect provider for cursor information for the entire application.

Marked Time Interval

Whenever the user edits an activity the eventline will display the new time interval occupied by the activity. This interval is settable with the method eventline.setShowMarkedTimeInterval(value: boolean). When its value changes the eventline will display two additional time cursors, one for the beginning of the time interval and one for its end.