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
jsmobiscroll.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;
} 
JSHTMLCSS
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-connecting-linking-events-arrows', {
clickToCreate: ,
dragToCreate: ,
dragToMove: ,
dragToResize: ,
eventDelete: ,
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',
},
],
});
<div id="demo-connecting-linking-events-arrows"></div>
.dashed-line {
stroke-dasharray: 5;
}
.dashed-line.mbsc-connection-arrow {
stroke-dasharray: initial;
}