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

# Linked Events & Dependencies - Angular Timeline demo

Link Angular Timeline events with arrows for task dependencies — configure finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections.

- [Live demo](https://demo.mobiscroll.com/angular/timeline/connecting-linking-events-arrows)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/connecting-linking-events-arrows)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/connecting-linking-events-arrows.md), [jQuery](https://demo.mobiscroll.com/jquery/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/angular/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

```ts
myEvents: MbscCalendarEvent[] = [{
    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
}];

myConnections = [{
    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'
}];
```

```html
<mbsc-eventcalendar
    [data]="myEvents"
    [connections]="myConnections">
</mbsc-eventcalendar>
```

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

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`cssClass`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-cssClass) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`connections`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-connections) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventConnection,
  MbscModule,
  MbscResource,
  setOptions,
} from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  view: MbscEventcalendarView = {
    timeline: {
      type: 'month',
    },
  };

  myResources: MbscResource[] = [
    {
      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',
    },
  ];

  myEvents: MbscCalendarEvent[] = [
    {
      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,
    },
  ];

  myConnections: MbscEventConnection[] = [
    {
      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',
    },
  ];
}
```

### Template

```html
<mbsc-eventcalendar [view]="view" [data]="myEvents" [resources]="myResources" [connections]="myConnections"></mbsc-eventcalendar>
```

### 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-angular.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 angular
   ```

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

- Previous: [Event Data Structure](https://demo.mobiscroll.com/angular/timeline/event-data-structure.md) - Define event properties for a Angular 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/angular/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 Angular Timeline.