Drag & Drop Restrictions per Event & Resource
The drag & drop interactions can be fine-tuned depending on the requirements and situations. Maybe controlled by roles, event types, resources the move and resize can be turned on/off on an event basis, per resource or globally on the instance.
- Events can be fixed in length (cannot be resized) - by setting
dragToResizeoption tofalsethe events cannot be resized. - Events can be fixed in time (cannot be moved) - by setting
dragInTimeoption tofalsethe events cannot be moved in time. Take in consideration thatdragToMovemust be set totrue - Events can be fixed to resource (cannot be moved to another resource) - by setting
dragBetweenResourcesoption tofalsethe events cannot be moved between resources. Take in consideration thatdragToMovemust be set totrue
To control this on a resource an event basis, use the appropriate properties which have precedence over global calendar options.
Demo
Control the interaction globally (all events/resources)
Events cannot be resized
dragToResize=falseEvents cannot be moved in time
dragInTime=falseEvents cannot be moved between resources
dragBetweenResources=falsemobiscroll.eventcalendar('#calendar', {
view: {
timeline: { type: 'day' }
},
// relevant events
data: [{
color: 'cyan',
end: '2026-10-20T14:00',
resize: false,
resource: 1,
start: '2026-10-20T09:00',
title: 'Event 1 (cannot be resized)'
}, {
color: 'green',
dragBetweenResources: false,
end: '2026-10-20T16:00',
resource: 2,
start: '2026-10-20T10:00',
title: 'Event 3 (cannot be moved between resources)'
}, {
color: 'blue',
dragInTime: false,
end: '2026-10-20T15:00',
resource: 3,
start: '2026-10-20T11:00',
title: 'Event 5 (cannot be moved in time)'
}],
// relevant resources
resources:[{
id: 4,
name: 'Resource D (Events cannot be moved in time)',
eventDragInTime: false
}, {
id: 5,
name: 'Resource E (Events cannot be moved between resources)',
eventDragBetweenResources: false
}, {
id: 6,
name: 'Resource F (Events cannot be resized)',
eventResize: false
}],
dragToMove: true,
dragToResize: true ,
dragInTime: true
dragBetweenResources: true
});
JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
mobiscroll.eventcalendar('#demo-conditional-drag-drop-timeline', {
view: {
timeline: { type: 'day' },
},
dragToMove: true,
dragToResize: true,
data: [
{
color: 'cyan',
end: '2026-10-20T14:00',
resize: false,
resource: 1,
start: '2026-10-20T09:00',
title: 'Event 1 (cannot be resized)',
},
{
color: 'green',
dragBetweenResources: false,
end: '2026-10-20T16:00',
resource: 2,
start: '2026-10-20T10:00',
title: 'Event 3 (cannot be moved between resources)',
},
{
color: 'blue',
dragInTime: false,
end: '2026-10-20T15:00',
resource: 3,
start: '2026-10-20T11:00',
title: 'Event 5 (cannot be moved in time)',
},
{
color: 'pink',
resource: 1,
end: '2026-10-20T19:00',
start: '2026-10-20T16:00',
title: 'Event 2',
},
{
color: 'yellow',
end: '2026-10-20T20:00',
resource: 2,
start: '2026-10-20T17:00',
title: 'Event 4',
},
{
color: 'gray',
end: '2026-10-20T18:00',
resource: 3,
start: '2026-10-20T16:00',
title: 'Event 6',
},
{
color: 'red',
resource: 4,
end: '2026-10-20T13:00',
start: '2026-10-20T09:00',
title: 'Event 7',
},
{
color: 'brown',
end: '2026-10-20T15:00',
resource: 5,
start: '2026-10-20T11:00',
title: 'Event 8',
},
{
color: 'teal',
end: '2026-10-20T18:00',
resource: 6,
start: '2026-10-20T13:00',
title: 'Event 9',
},
],
resources: [
{
id: 1,
name: 'Resource A',
},
{
id: 2,
name: 'Resource B',
},
{
id: 3,
name: 'Resource C',
},
{
id: 4,
name: 'Resource D (Events cannot be moved in time)',
eventDragInTime: false,
},
{
id: 5,
name: 'Resource E (Events cannot be moved between resources)',
eventDragBetweenResources: false,
},
{
id: 6,
name: 'Resource F (Events cannot be resized)',
eventResize: false,
},
],
});
<div id="demo-conditional-drag-drop-timeline"></div>