Linked Events & Dependencies
Link events together, show dependency or event sequence through the connections option.
Pass an array of connection objects where you can specify:
from- The ID of the event where the connection startsto- The ID of the event where the connection endscolor- Defines the color of the connectionarrow- 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 eventsfalse- 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
cssClassA 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 customcssClass
Demo
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;
} 
SFC JSSFC TS
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
:view="myView"
:data="myEvents"
:resources="myResources"
:connections="myConnections"
/>
</template>
<style>
.dashed-line {
stroke-dasharray: 5;
}
.dashed-line.mbsc-connection-arrow {
stroke-dasharray: initial;
}
</style><script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type {
MbscCalendarEvent,
MbscEventcalendarView,
MbscEventConnection,
MbscResource
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
:view="myView"
:data="myEvents"
:resources="myResources"
:connections="myConnections"
/>
</template>
<style>
.dashed-line {
stroke-dasharray: 5;
}
.dashed-line.mbsc-connection-arrow {
stroke-dasharray: initial;
}
</style>