Drag, Resize and Create Events
Drag & drop is a core feature of the event calendar and it is composed of four sub-features:
- Click to create events - double click to create events. This can be turned off or set to single click
- Drag to create events - tap/click to start creating an event and drag to the desired length
- Move events - grab an event and move it wherever needed
- Resize events - change the length of an event, grab it from either end and resize it
- Delete events - pressing the
DeleteorBackspacekeys on the keyboard will delete the focused event
You have granular control over features through the clickToCreate, dragToCreate, dragToMove, dragToResize and eventDelete options, which are false by default.
Use the dragTimeStep option (defaults to 15 minutes) to set the snap resolution of all drag actions.
Events can be marked as fixed by setting their editable property to false. This turns delete, drag & drop move and resize off for the event. The mbsc-event-readonly CSS class will be added to the events. This means if you would like to add opacity, override the mouse cursor or apply any other CSS override, you can add it to this class.
Demo
Granular control over the interaction
Click to create event (double click)
Drag to create event
Move & reorder events
Drag to resize existing events
Delete events
Control drag sensitivity
Snap events to every
minutes when moving.
<mbsc-eventcalendar
[view]="{scheduler: { type: 'week ' }}"
[data]="myData"
[clickToCreate]="true "
[dragToCreate]="true "
[dragToMove]="true "
[dragToResize]="true "
[dragTimeStep]="15 "
[eventDelete]="true ">
</mbsc-eventcalendar>tsmyData = [{
title: 'Fixed event',
start: '2026-10-20T16:00',
end: '2026-10-20T20:00',
color: '#9e9e9e',
editable: false
}, {
title: 'Fixed event',
start: '2026-10-22T06:00',
end: '2026-10-22T09:00',
color: '#9e9e9e',
editable: false
}, {
title: 'Fixed event',
start: '2026-10-23T12:00',
end: '2026-10-23T14:00',
color: '#9e9e9e',
editable: false
}, {
title: 'Drag me',
start: '2026-10-21T11:00',
end: '2026-10-21T15:00',
color: '#cc9900'
}, {
title: 'Drag me',
start: '2026-10-24T04:00',
end: '2026-10-24T08:00',
color: '#cc9900'
}, {
title: 'Resize me',
start: '2026-10-20T02:00',
end: '2026-10-20T06:00',
color: '#ca4747'
}, {
title: 'Resize me',
start: '2026-10-24T13:00',
end: '2026-10-24T18:00',
color: '#ca4747'
}, {
title: 'Move me around',
start: '2026-10-22T19:00',
end: '2026-10-22T23:00',
color: '#339966'
}, {
title: 'Move me around',
start: '2026-10-25T08:00',
end: '2026-10-25T11:00',
color: '#339966'
}]
ComponentTemplate
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
myEvents: MbscCalendarEvent[] = [
{
title: 'Fixed event',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2, 16),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2, 20),
color: '#9e9e9e',
editable: false,
},
{
title: 'Fixed event',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 6),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9),
color: '#9e9e9e',
editable: false,
},
{
title: 'Fixed event',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 12),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 14),
color: '#9e9e9e',
editable: false,
},
{
title: 'Drag me',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 11),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 15),
color: '#cc9900',
},
{
title: 'Drag me',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2, 4),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2, 8),
color: '#cc9900',
},
{
title: 'Resize me',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2, 2),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 2, 6),
color: '#ca4747',
},
{
title: 'Resize me',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2, 13),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2, 18),
color: '#ca4747',
},
{
title: 'Move me around',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 19),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23),
color: '#339966',
},
{
title: 'Move me around',
start: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3, 8),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3, 11),
color: '#339966',
},
];
eventSettings: MbscEventcalendarOptions = {
view: {
scheduler: { type: 'week' },
},
dragToCreate: true,
dragToMove: true,
dragToResize: true,
dragTimeStep: 15,
};
}
<mbsc-eventcalendar [data]="myEvents" [options]="eventSettings"></mbsc-eventcalendar>