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=false// relevant events
const myData = [{
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
const myResources = [{
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
}];
<Eventcalendar
view={{
timeline: { type: 'day' }
}}
data={myData}
resources={myResources}
dragToMove={true}
dragToResize={true }
dragInTime={true }
dragBetweenResources={true }
/>
JSXTSX
import { Eventcalendar, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myView = useMemo(
() => ({
timeline: { type: 'day' },
}),
[],
);
const myEvents = useMemo(
() => [
{
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',
},
],
[],
);
const myResources = useMemo(
() => [
{
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,
},
],
[],
);
return <Eventcalendar view={myView} data={myEvents} resources={myResources} dragToMove={true} dragToResize={true} />;
}
export default App;
import { Eventcalendar, MbscCalendarEvent, MbscEventcalendarView, MbscResource, setOptions } from '@mobiscroll/react';
import { FC, useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const myView = useMemo<MbscEventcalendarView>(
() => ({
timeline: { type: 'day' },
}),
[],
);
const myEvents = useMemo<MbscCalendarEvent[]>(
() => [
{
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',
},
],
[],
);
const myResources = useMemo<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,
},
],
[],
);
return <Eventcalendar view={myView} data={myEvents} resources={myResources} dragToMove={true} />;
};
export default App;