Cross-Instance Drag and Drop
Usage
theme: 'ios' You can turn auto theming on and let it decide based on the platform.
Usage
themeVariant: 'light' You can turn auto dark mode on based on system settings.
Usage
clickToCreate: true,
// click to create is on dragToCreate: true,
// drag to create is on dragToMove: true,
// reordering is on dragToResize: true,
// resizing is on eventDelete: true
// deleting is on Fine-tune drag & drop with these options, which are false by default.
Usage
locale: mobiscroll.localeEn Selecting the locale loads the localized settings and the translated UI text.
Cross-Instance Drag and Drop
There are certain cases when moving the events between calendars can come in handy.
Dragging and dropping events between two timeline instances can be enabled by turning on the externalDrag and externalDrop options.
Want to learn about how you can configure the horizontal and vertical resolution? Check out how to build a synchronized flight scheduling dashboard →
Demo
Loading the live demo
The live demo didn't load.
Try it on demo.mobiscroll.comCalendar 1
Calendar 2
Code
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-drag-drop-first-calendar', {
view: {
timeline: {
type: 'month',
},
},
height: 420,
dragToMove: true,
eventDelete: true,
externalDrag: true,
externalDrop: true,
resources: [
{
id: 1,
name: 'Resource A',
},
{
id: 2,
name: 'Resource B',
},
{
id: 3,
name: 'Resource C',
},
{
id: 4,
name: 'Resource D',
},
{
id: 5,
name: 'Resource E',
},
],
data: [
{
start: '2026-10-02T00:00',
end: '2026-10-05T00:00',
title: 'Event 1',
color: '#166f6f',
resource: 1,
},
{
start: '2026-10-15T00:00',
end: '2026-10-19T00:00',
title: 'Event 2',
color: '#e20000',
resource: 1,
},
{
start: '2026-10-10T00:00',
end: '2026-10-14T00:00',
title: 'Event 3',
color: '#1dab2f',
resource: 2,
},
{
start: '2026-10-20T00:00',
end: '2026-10-23T00:00',
title: 'Event 4',
color: '#e25dd2',
resource: 2,
},
{
start: '2026-10-03T00:00',
end: '2026-10-10T00:00',
title: 'Event 5',
color: '#4418d2',
resource: 3,
},
{
start: '2026-10-16T00:00',
end: '2026-10-19T00:00',
title: 'Event 6',
color: '#4981d6',
resource: 3,
},
{
start: '2026-10-08T00:00',
end: '2026-10-12T00:00',
title: 'Event 7',
color: '#6e7f29',
resource: 4,
},
{
start: '2026-10-22T00:00',
end: '2026-10-28T00:00',
title: 'Event 8',
color: '#8b8b00',
resource: 4,
},
{
start: '2026-10-02T00:00',
end: '2026-10-07T00:00',
title: 'Event 9',
color: '#a32f00',
resource: 5,
},
{
start: '2026-10-18T00:00',
end: '2026-10-23T00:00',
title: 'Event 10',
color: '#152d2b',
resource: 5,
},
],
onEventCreated: function (args) {
if (args.action === 'externalDrop') {
mobiscroll.toast({
context: '#demo-drag-drop-first-calendar',
message: 'Event dropped to Calendar 1',
});
}
},
});
mobiscroll.eventcalendar('#demo-drag-drop-second-calendar', {
view: {
timeline: {
type: 'month',
},
},
height: 420,
dragToMove: true,
eventDelete: true,
externalDrag: true,
externalDrop: true,
resources: [
{
id: 1,
name: 'Resource A',
},
{
id: 2,
name: 'Resource B',
},
{
id: 3,
name: 'Resource C',
},
{
id: 4,
name: 'Resource D',
},
{
id: 5,
name: 'Resource E',
},
],
data: [
{
start: '2026-10-05T00:00',
end: '2026-10-09T00:00',
title: 'Event 1',
color: '#4418d2',
resource: 1,
},
{
start: '2026-10-16T00:00',
end: '2026-10-20T00:00',
title: 'Event 2',
color: '#8b1a1a',
resource: 1,
},
{
start: '2026-10-08T00:00',
end: '2026-10-11T00:00',
title: 'Event 3',
color: '#e7b300',
resource: 2,
},
{
start: '2026-10-22T00:00',
end: '2026-10-25T00:00',
title: 'Event 4',
color: '#a32f00',
resource: 2,
},
{
start: '2026-10-12T00:00',
end: '2026-10-17T00:00',
title: 'Event 5',
color: '#21a833',
resource: 3,
},
{
start: '2026-10-23T00:00',
end: '2026-10-29T00:00',
title: 'Event 6',
color: '#a917bb',
resource: 3,
},
{
start: '2026-10-04T00:00',
end: '2026-10-10T00:00',
title: 'Event 7',
color: '#e20000',
resource: 4,
},
{
start: '2026-10-18T00:00',
end: '2026-10-25T00:00',
title: 'Event 8',
color: '#4981d6',
resource: 4,
},
{
start: '2026-10-07T00:00',
end: '2026-10-12T00:00',
title: 'Event 9',
color: '#166f6f',
resource: 5,
},
{
start: '2026-10-20T00:00',
end: '2026-10-27T00:00',
title: 'Event 10',
color: '#d6d145',
resource: 5,
},
],
onEventCreated: function (args) {
if (args.action === 'externalDrop') {
mobiscroll.toast({
context: '#demo-drag-drop-second-calendar',
message: 'Event dropped to Calendar 2',
});
}
},
});
<div class="md-drag-drop-calendar">
<div class="mbsc-form-group-title">Calendar 1</div>
<div id="demo-drag-drop-first-calendar" class="md-drag-drop-first-calendar"></div>
<div class="mbsc-form-group-title">Calendar 2</div>
<div id="demo-drag-drop-second-calendar" class="md-drag-drop-second-calendar"></div>
</div>