Drag, Resize & Move Restrictions
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=false<script setup>
// relevant events
const myData = ref([{
color: 'cyan',
end: '2026-10-22T14:00',
resize: false,
resource: 1,
start: '2026-10-22T09:00',
title: 'Event 1 (cannot be resized)'
}, {
color: 'green',
dragBetweenResources: false,
end: '2026-10-22T16:00',
resource: 2,
start: '2026-10-22T10:00',
title: 'Event 3 (cannot be moved between resources)'
}, {
color: 'blue',
dragInTime: false,
end: '2026-10-22T15:00',
resource: 3,
start: '2026-10-22T11:00',
title: 'Event 5 (cannot be moved in time)'
}]);
// relevant resources
const myResources = ref([{
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
}]);
</script>
<template>
<MbscEventcalendar
:view="{scheduler: {type: 'day'}}"
:data="myData"
:resources:"myResources"
:dragToMove="true"
:dragToResize="true "
:dragInTime="true "
:dragBetweenResources="true "
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myView = {
scheduler: { type: 'week' }
}
const myEvents = ref([
{
color: 'cyan',
end: '2026-10-22T14:00',
resize: false,
resource: 1,
start: '2026-10-22T09:00',
title: 'Event 1 (cannot be resized)'
},
{
color: 'green',
dragBetweenResources: false,
end: '2026-10-22T16:00',
resource: 2,
start: '2026-10-22T10:00',
title: 'Event 3 (cannot be moved between resources)'
},
{
color: 'blue',
dragInTime: false,
end: '2026-10-22T15:00',
resource: 3,
start: '2026-10-22T11:00',
title: 'Event 5 (cannot be moved in time)'
},
{
color: 'pink',
resource: 1,
end: '2026-10-22T19:00',
start: '2026-10-22T16:00',
title: 'Event 2'
},
{
color: 'yellow',
end: '2026-10-22T20:00',
resource: 2,
start: '2026-10-22T17:00',
title: 'Event 4'
},
{
color: 'gray',
end: '2026-10-22T18:00',
resource: 3,
start: '2026-10-22T16:00',
title: 'Event 6'
},
{
color: 'red',
resource: 4,
end: '2026-10-22T13:00',
start: '2026-10-22T09:00',
title: 'Event 7'
},
{
color: 'brown',
end: '2026-10-22T15:00',
resource: 5,
start: '2026-10-22T11:00',
title: 'Event 8'
},
{
color: 'teal',
end: '2026-10-22T18:00',
resource: 6,
start: '2026-10-22T13:00',
title: 'Event 9'
}
])
const myResources = ref([
{
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
}
])
</script>
<template>
<MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" :dragToMove="true" />
</template>
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myView: MbscEventcalendarView = {
scheduler: { type: 'week' }
}
const myEvents = ref<MbscCalendarEvent[]>([
{
color: 'cyan',
end: '2026-10-22T14:00',
resize: false,
resource: 1,
start: '2026-10-22T09:00',
title: 'Event 1 (cannot be resized)'
},
{
color: 'green',
dragBetweenResources: false,
end: '2026-10-22T16:00',
resource: 2,
start: '2026-10-22T10:00',
title: 'Event 3 (cannot be moved between resources)'
},
{
color: 'blue',
dragInTime: false,
end: '2026-10-22T15:00',
resource: 3,
start: '2026-10-22T11:00',
title: 'Event 5 (cannot be moved in time)'
},
{
color: 'pink',
resource: 1,
end: '2026-10-22T19:00',
start: '2026-10-22T16:00',
title: 'Event 2'
},
{
color: 'yellow',
end: '2026-10-22T20:00',
resource: 2,
start: '2026-10-22T17:00',
title: 'Event 4'
},
{
color: 'gray',
end: '2026-10-22T18:00',
resource: 3,
start: '2026-10-22T16:00',
title: 'Event 6'
},
{
color: 'red',
resource: 4,
end: '2026-10-22T13:00',
start: '2026-10-22T09:00',
title: 'Event 7'
},
{
color: 'brown',
end: '2026-10-22T15:00',
resource: 5,
start: '2026-10-22T11:00',
title: 'Event 8'
},
{
color: 'teal',
end: '2026-10-22T18:00',
resource: 6,
start: '2026-10-22T13:00',
title: 'Event 9'
}
])
const myResources = ref<MbscResource[]>([
{
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
}
])
</script>
<template>
<MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" :dragToMove="true" />
</template>