The drag-and-drop feature enables graphical interactions with the charts using default user input method. To get started, just define your activities as "mutable" to enable this feature. The drag-and-drop API gives access to multiple methods and interfaces to fine tune activities behavior at every step of the operation such as restricting horizontal dragging, enabling activity bounds edition operations, implementing validation mechanics, affecting other activities programmatically, and reacting to external information. You can design specific behaviors depending on the type and state of the activity that is being dragged.

ScheduleJS offers intuitive ways to zoom in and out of the graphics and a well thought API to manipulate zoom operations. First, you can zoom in and out using the timeline. A couple of ways to do it is by double clicking a period such as a specific day or doing a drag and drop selection on a time interval directly on it. On devices featuring a tactile screen, you can use your fingers to perform a pinch zoom. For desktop users, using the ctrl modifier key while using mouse wheel will also zoom in and out based on your mouse position. The zoom API allows you to set bounds for a maximum and minimum zoom range, listen, and provide information during the zoom operation, trigger zoom-ins and zoom-outs on specific time intervals programmatically, set the graphics resolution depending on the Zoom Level.

ScheduleJS propose four layout modes:

• The “Gantt” layout: provide a start time and an end time to display duration on the timeline. Create specific activity links with typed relations like start-to-end, end-to-start, end-to-end, etc.
• The “agenda” layout: populate the row with a vertical shift period for the selected time interval.
• The “chart” layout: Register an additional value for the activity to display an activity height relative to the other chart entries on the row. The chart layout comes with a customizable vertical scale to present quantitative information to the user.
• The “high-low chart” layout: provide two additional values for the activity to create a “candlestick” with a high value and a low value.

ScheduleJS draws every pixel visible on the graphics by using internal activity renderers. The ActivityRenderer API is designed to empower the developer with extended flexibility. ScheduleJS comes with a wide set of entry points and will let the developer override all the relevant methods to design a specific way to render activities on the screen. The default rendering classes include a large set of tools to add logic and fine-tune the drawings, but you can also fully design your rendering methods using the HTML Canvas API, HTML Elements, images, text, and animations. The rendering method inherits any data from the activity object to let you build unique interactions and breakpoints. ScheduleJS comes with four default activity renderers and two links renderers.

Calendar activities shows on the background of rows. They can mark periods like weekend days, holidays, special events, and so on. Calendar activities are always shown as read-only, meaning they cannot be edited interactively by the user, they should be modified programmatically instead. Under the hood, the calendar activities are drawn using background system layers.

Event handling in ScheduleJS is at the core of the library. We provide a rich set of events, methods, and observables that you can use to design a tailored user experience. Every user input like selecting activities, moving the timeline, changing zoom level, using the drag-and-drop features, expanding and collapsing specific rows, hovering, and clicking implements ways of observing the related state in real time to design advanced interactions.

Activities can be attached to one another using the ActivityLink API. A link can be assigned one of the following four relations, stating the origin of the drawn link and its target:

• End to Start
• End to End
• Start to End
• Start to Start

Links exist in the graphics as standalone objects, holding references to the related activities (origin and destination), allowing access to the underlying data by using the activity reference. Links are drawn using Link Renderers and can be fully customized by overriding the renderer drawing methods.