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 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
To control this on an event basis, use the appropriate properties which have precedence over global calendar options.
Demo
Control the interaction globally (all events)
Events cannot be resized
dragToResize=falseEvents cannot be moved in time
dragInTime=false<mbsc-eventcalendar
[view]="{calendar: { type: 'month' }}"
[data]="myData"
[dragToMove]="true"
[dragToResize]="true "
[dragInTime]="true ">
</mbsc-eventcalendar>
ts// relevant events
const myData = [{
color: 'blue',
dragInTime: false,
end: '2026-11-04T00:00',
start: '2026-11-01T00:00',
title: 'Event 2 (cannot be moved in time)'
}, {
color: 'brown',
end: '2026-11-08T00:00',
start: '2026-11-05T00:00',
resize: false,
title: 'Event 3 (cannot be resized)'
}];
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myView: MbscEventcalendarView = {
calendar: { type: 'month' },
};
myEvents: MbscCalendarEvent[] = [
{
color: 'cyan',
end: '2026-10-31T00:00',
start: '2026-10-30T00:00',
title: 'Event 1',
},
{
color: 'blue',
dragInTime: false,
end: '2026-11-04T00:00',
start: '2026-11-01T00:00',
title: 'Event 2 (cannot be moved in time)',
},
{
color: 'brown',
end: '2026-11-08T00:00',
start: '2026-11-05T00:00',
resize: false,
title: 'Event 3 (cannot be resized)',
},
{
color: 'teal',
end: '2026-11-09T00:00',
start: '2026-11-08T00:00',
title: 'Event 4',
},
{
color: 'yellow',
end: '2026-11-11T00:00',
start: '2026-11-10T00:00',
title: 'Event 5',
},
];
}
<mbsc-eventcalendar [view]="myView" [data]="myEvents" [dragToMove]="true" [dragToResize]="true"></mbsc-eventcalendar>