---
title: "Javascript Timeline Linked Events & Dependencies Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/connecting-linking-events-arrows"
---

# Linked Events & Dependencies - JavaScript Timeline demo

Link Javascript Timeline events with arrows for task dependencies — configure finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/connecting-linking-events-arrows)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/connecting-linking-events-arrows)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/connecting-linking-events-arrows.md), [Angular](https://demo.mobiscroll.com/angular/timeline/connecting-linking-events-arrows.md), [React](https://demo.mobiscroll.com/react/timeline/connecting-linking-events-arrows.md), [Vue](https://demo.mobiscroll.com/vue/timeline/connecting-linking-events-arrows.md)

## Description

Link events together, show dependency or event sequence through the [`connections`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-connections) option.

Pass an array of connection objects where you can specify:

- `from`- The ID of the event where the connection starts
- `to`- The ID of the event where the connection ends
- `color`- Defines the color of the connection
- `arrow`- Defines the arrow style of the connection. Can be:

  - `'from'`- The arrow points to the starting event
  - `'to'`- The arrow points to the ending event
  - `'bidirectional'`- The arrow points to both events
  - `false`- No arrow is displayed
- `type`- Defines the type of the connection. Can be:

  - `'fs'`- finish-to-start: connects the finish of the starting event with the start of the ending event
  - `'sf'` - start-to-finish: connects the start of the starting event with the finish of the ending event
  - `'ss'` - start-to-start: connects the events' start times
  - `'ff'` - finish-to-finish: connects the events' finish times
- `cssClass` A custom css class to the connection SVG paths. E.g. if you want to render a dashed line in some cases or add hover effects, you can do it through a custom `cssClass`

## What this demo shows

- A desktop monthly timeline where days are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between months, and the Today button returns to the current date.
- **Month view** The strip below the header shows the days of the selected month, with the current date highlighted.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Event cards** Events appear as colored cards with a colored stripe on the left, a bold event title, and the exact start and end time below the title.
- **Date positioning** Events are positioned by their assigned resource and exact date range.
- **Event connections** Connector lines visualize dependencies between events directly on the timeline.
- **Dependency direction** Arrows show predecessor and successor relationships so the execution order of scheduled tasks is easier to follow.
- **Cross-resource dependencies** Connections can link events across different resources and dates.
- **Connection types** The demo shows finish-to-start, start-to-start, finish-to-finish, and start-to-finish dependency types with configurable connector styling.
- **Connection styling** Connector lines can use custom colors, arrow styles, and CSS classes, including dashed-line styling.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Task dependencies** Applications that need to show predecessor and successor relationships between scheduled tasks.
- **Critical path planning** Project schedules where users need to understand task order, downstream impact, and dependency chains.
- **Workflow management** Resource-based workflows where work items depend on other tasks being started or completed.
- **Project scheduling** Planning interfaces that need to connect events across teams, equipment, rooms, jobs, or other resources.
- **Production planning** Manufacturing, maintenance, construction, and production schedules where task sequencing needs to stay visible on the timeline.

## Tutorial

```js
mobiscroll.eventcalendar('#mycalendar', {
    data: [{
        id: 1,
        start: '2026-10-01T00:00',
        end: '2026-10-04T00:00',
        title: 'Event 1',
        resource: 1
    }, {
        id: 2,
        start: '2026-10-03T00:00',
        end: '2026-10-05T00:00',
        title: 'Event 2',
        resource: 1
    }, {
        id: 3,
        start: '2026-10-06T00:00',
        end: '2026-10-08T00:00',
        title: 'Event 3',
        resource: 2
    }, {
        id: 4,
        start: '2026-10-06T00:00',
        end: '2026-10-09T00:00',
        title: 'Event 4',
        resource: 2
    }, {
        id: 5,
        start: '2026-10-09T00:00',
        end: '2026-10-11T00:00',
        title: 'Event 5',
        resource: 3
    }, {
        id: 6,
        start: '2026-10-10T00:00',
        end: '2026-10-12T00:00',
        title: 'Event 6',
        resource: 3
    }, {
        id: 7,
        start: '2026-10-13T00:00',
        end: '2026-10-16T00:00',
        title: 'Event 7',
        resource: 4
    }, {
        id: 8,
        start: '2026-10-14T00:00',
        end: '2026-10-17T00:00',
        title: 'Event 8',
        resource: 4
    }, {
        id: 9,
        start: '2026-10-18T00:00',
        end: '2026-10-20T00:00',
        title: 'Event 9',
        resource: 5
    }, {
        id: 10,
        start: '2026-10-19T00:00',
        end: '2026-10-22T00:00',
        title: 'Event 10',
        resource: 5
    }, {
        id: 11,
        start: '2026-10-22T00:00',
        end: '2026-10-26T00:00',
        title: 'Event 11',
        resource: 6
    }, {
        id: 12,
        start: '2026-10-24T00:00',
        end: '2026-10-28T00:00',
        title: 'Event 12',
        resource: 6
    }],
    connections: [{
        from: 1,
        to: 2,
        color: 'green',
        arrow: 'bidirectional',
        type: 'fs'
    }, {
        from: 2,
        to: 3,
        color: 'orange',
        arrow: 'to',
        type: 'fs'
    }, {
        from: 3,
        to: 4,
        color: 'olive',
        arrow: 'to',
        type: 'ff'
    }, {
        from: 4,
        to: 5,
        color: 'blue',
        arrow: 'bidirectional',
        cssClass: 'dashed-line',
        type: 'sf'
    }, {
        from: 5,
        to: 6,
        color: 'green',
        arrow: 'to',
        type: 'ss'
    }, {
        from: 6,
        to: 8,
        color: 'black',
        arrow: 'from',
        type: 'ff'
    }, {
        from: 8,
        to: 11,
        color: 'purple',
        arrow: 'from',
        type: 'sf'
    }, {
        from: 7,
        to: 10,
        color: 'green',
        arrow: 'from',
        type: 'ss'
    }, {
        from: 9,
        to: 12,
        color: 'brown',
        arrow: 'from',
        type: 'fs'
    }, {
        from: 10,
        to: 9,
        color: 'red',
        arrow: false,
        type: 'fs'
    }, {
        from: 11,
        to: 12,
        color: 'orange',
        arrow: 'bidirectional',
        type: 'sf'
    }, {
        from: 12,
        to: 14,
        color: 'pink',
        arrow: 'to',
        type: 'fs'
    }]
});
```

```css
.dashed-line {
    stroke-dasharray: 5;
}
.dashed-line.mbsc-connection-arrow {
    stroke-dasharray: initial;
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`connections`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-connections) - option
- [`cssClass`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-cssClass) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.eventcalendar('#demo-connecting-linking-events-arrows', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    timeline: {
      type: 'month',
    },
  },
  resources: [
    {
      id: 1,
      name: 'Resource 1',
      color: '#fdf500',
    },
    {
      id: 2,
      name: 'Resource 2',
      color: '#ff4600',
    },
    {
      id: 3,
      name: 'Resource 3',
      color: '#ff0101',
    },
    {
      id: 4,
      name: 'Resource 4',
      color: '#239a21',
    },
    {
      id: 5,
      name: 'Resource 5',
      color: '#8f1ed6',
    },
    {
      id: 6,
      name: 'Resource 6',
      color: '#01adff',
    },
  ],
  data: [
    {
      id: 1,
      start: '2026-10-01T00:00',
      end: '2026-10-04T00:00',
      title: 'Event 1',
      resource: 1,
    },
    {
      id: 2,
      start: '2026-10-03T00:00',
      end: '2026-10-05T00:00',
      title: 'Event 2',
      resource: 1,
    },
    {
      id: 3,
      start: '2026-10-06T00:00',
      end: '2026-10-08T00:00',
      title: 'Event 3',
      resource: 2,
    },
    {
      id: 4,
      start: '2026-10-06T00:00',
      end: '2026-10-09T00:00',
      title: 'Event 4',
      resource: 2,
    },
    {
      id: 5,
      start: '2026-10-09T00:00',
      end: '2026-10-11T00:00',
      title: 'Event 5',
      resource: 3,
    },
    {
      id: 6,
      start: '2026-10-10T00:00',
      end: '2026-10-12T00:00',
      title: 'Event 6',
      resource: 3,
    },
    {
      id: 7,
      start: '2026-10-13T00:00',
      end: '2026-10-16T00:00',
      title: 'Event 7',
      resource: 4,
    },
    {
      id: 8,
      start: '2026-10-14T00:00',
      end: '2026-10-17T00:00',
      title: 'Event 8',
      resource: 4,
    },
    {
      id: 9,
      start: '2026-10-18T00:00',
      end: '2026-10-20T00:00',
      title: 'Event 9',
      resource: 5,
    },
    {
      id: 10,
      start: '2026-10-19T00:00',
      end: '2026-10-22T00:00',
      title: 'Event 10',
      resource: 5,
    },
    {
      id: 11,
      start: '2026-10-22T00:00',
      end: '2026-10-26T00:00',
      title: 'Event 11',
      resource: 6,
    },
    {
      id: 12,
      start: '2026-10-24T00:00',
      end: '2026-10-28T00:00',
      title: 'Event 12',
      resource: 6,
    },
  ],
  connections: [
    {
      from: 1,
      to: 2,
      color: 'green',
      arrow: 'bidirectional',
    },
    {
      from: 2,
      to: 3,
      color: 'orange',
      arrow: 'to',
    },
    {
      from: 3,
      to: 4,
      color: 'olive',
      arrow: 'to',
    },
    {
      from: 5,
      to: 4,
      color: 'blue',
      arrow: 'bidirectional',
      cssClass: 'dashed-line',
    },
    {
      from: 6,
      to: 8,
      color: 'black',
      arrow: 'from',
    },
    {
      from: 7,
      to: 6,
      color: 'purple',
      arrow: false,
    },
    {
      from: 8,
      to: 10,
      color: 'green',
      arrow: false,
    },
    {
      from: 9,
      to: 12,
      color: 'brown',
      arrow: 'from',
    },
    {
      from: 10,
      to: 9,
      color: 'red',
      arrow: false,
    },
    {
      from: 10,
      to: 11,
      color: 'orange',
      arrow: 'bidirectional',
    },
    {
      from: 12,
      to: 14,
      color: 'pink',
      arrow: 'to',
    },
  ],
});
```

### HTML

```html
<div id="demo-connecting-linking-events-arrows"></div>
```

### CSS

```css
.dashed-line {
    stroke-dasharray: 5;
}

.dashed-line.mbsc-connection-arrow {
    stroke-dasharray: initial;
}
```

## Implementation notes

- Use `timeline: { type: 'month' }` - a full-month view.
- Define 6 resources (1-6) with distinct colors: yellow, orange-red, red, green, purple, blue.
- Add 12 events (ids 1-12) distributed in pairs across the 6 resources, each with a numeric `id` - connections reference events by `id`. Use `dyndatetime` for dates within the current month.
- Pass a `connections` array as a separate calendar option (not part of `data`). Each connection object specifies `from` (source event id), `to` (target event id), `color`, and `arrow`. The demo uses all four `arrow` values to illustrate the differences:
  - `'bidirectional'` - arrowheads on both ends
  - `'to'` - arrow points toward the target event
  - `'from'` - arrow points back toward the source event
  - `false` - plain line, no arrowhead
- One connection (5→4) uses `cssClass: 'dashed-line'` to apply a custom CSS rule to the SVG path, rendering it as a dashed line. Define `.dashed-line` in CSS with a `stroke-dasharray` style on the path element.
- The default connection type is `'fs'` (finish-to-start) when `type` is omitted. The `type` option (`'fs'`, `'sf'`, `'ss'`, `'ff'`) controls which endpoints of the two events are joined.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Event Data Structure](https://demo.mobiscroll.com/javascript/timeline/event-data-structure.md) - Define event properties for a Javascript Timeline — titles, dates, colors, resource and slot assignments, recurrence, buffer times, and per-event drag/resize control.
- Next: [Date Input Formats](https://demo.mobiscroll.com/javascript/timeline/date-object-ISO-8601-moment.md) - Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the Javascript Timeline.