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

# Linked Events & Dependencies - Vue Timeline demo

Link Vue Timeline events with arrows to visualize task dependencies — set finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/timeline/connecting-linking-events-arrows)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/timeline/connecting-linking-events-arrows)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/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), [Angular](https://demo.mobiscroll.com/angular/timeline/connecting-linking-events-arrows.md), [React](https://demo.mobiscroll.com/react/timeline/connecting-linking-events-arrows.md)

## Description

Link events together, show dependency or event sequence through the [`connections`](https://mobiscroll.com/docs/vue/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
<script setup>
myEvents = [
  {
    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'
  }
]
</script>

<template>
  <MbscEventcalendar
    :data="myEvents"
    :connections="myConnections"
  />
</template>
```

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

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myEvents = ref([
  {
    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
  }
])

const myResources = ref([
  {
    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'
  }
])

const myConnections = ref([
  {
    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'
  }
])

const myView = {
  timeline: {
    type: 'month'
  }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :connections="myConnections"
  />
</template>

<style>
.dashed-line {
  stroke-dasharray: 5;
}

.dashed-line.mbsc-connection-arrow {
  stroke-dasharray: initial;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscEventConnection,
  MbscResource
} from '@mobiscroll/vue'
import { ref } from 'vue'

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

const myEvents = ref<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
  }
])

const myResources = ref<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'
  }
])

const myConnections = ref<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'
  }
])

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'month'
  }
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :connections="myConnections"
  />
</template>

<style>
.dashed-line {
  stroke-dasharray: 5;
}

.dashed-line.mbsc-connection-arrow {
  stroke-dasharray: initial;
}
</style>
```

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

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 vue --trial`.

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

## Related demos

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