---
title: "Angular Event calendar Drag and Drop Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/eventcalendar/move-resize-drag-drop-to-create-events"
---

# Drag and Drop - Angular Event calendar demo

Control drag-and-drop in a Angular event calendar — enable/disable click-to-create, drag-to-create, move, resize, and delete per event or globally.

- [Live demo](https://demo.mobiscroll.com/angular/eventcalendar/move-resize-drag-drop-to-create-events)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/calendar-view/move-resize-drag-drop-to-create-events)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/move-resize-drag-drop-to-create-events.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/move-resize-drag-drop-to-create-events.md), [React](https://demo.mobiscroll.com/react/eventcalendar/move-resize-drag-drop-to-create-events.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/move-resize-drag-drop-to-create-events.md)

## Description

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 `Delete` or `Backspace` keys on the keyboard will delete the focused event

You have granular control over features through the [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate), [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate), [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove), [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) and [`eventDelete`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventDelete) options, which are `false` by default.

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.

## What this demo shows

- A desktop month view event calendar with drag-and-drop interactions enabled.
- **Month grid** Day cells display events, each label has a colored line on the left, the background of the event have the same color, the event title, and an `end` value that shows the event end time.
- **Event interaction** Hovering over or selecting an event label highlights it and shows resize handles on both sides, indicating that the event can be resized by clicking and dragging.
- **Interaction controls** A control panel appears next (left side) to the calendar with this title: `Granular control over the interaction`.
- **Toggles** The panel includes five switches, all enabled by default: `Click to create event (double click)`, `Drag to create event`, `Move & reorder`, `Drag to resize existing events`, and `Delete events`.
- **Create interactions** Double-clicking empty space in a day cell creates a new event when click-to-create is enabled.
- **Drag-create interactions** Clicking and dragging across empty space in a day cell creates a new event when drag-to-create is enabled.
- **Move interactions** Existing events can be dragged to a different date when move and reorder is enabled.
- **Resize interactions** Existing events can be resized from either end when drag-to-resize is enabled.
- **Delete interactions** The focused event can be deleted with the `Delete` or `Backspace` key when event deletion is enabled.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button between them on the right.

## Best for

- **Scheduling UIs with permissions** Scenarios where event creation, moving, resizing, and deletion need to be enabled or disabled independently.
- **Role-based workflows** Products where different users or modes should allow different editing actions in the same calendar UI.
- **Interactive planning tools** Team calendars, availability planners, and internal scheduling tools where users need direct drag-and-drop editing in month view.
- **Guardrailed editing** Use cases where users should be able to interact with the calendar while specific actions stay restricted.
- **Mixed editable and fixed events** Calendars that combine movable events with locked entries that should remain visible but not editable.

## Tutorial

### Granular control over the interaction

- [x] Click to create event (double click)
- [x] Drag to create event
- [x] Move & reorder events
- [x] Drag to resize existing events
- [x] Delete events

```html
<mbsc-eventcalendar
    [data]="myData"
    [clickToCreate]="true"
    [dragToCreate]="true"
    [dragToMove]="true"
    [dragToResize]="true"
    [eventDelete]="true">
</mbsc-eventcalendar>
```

```ts
myData = [{
    title: 'Fixed event',
    start: '2026-10-18T00:00',
    end: '2026-10-19T00:00',
    color: '#9e9e9e',
    editable: false
}, {
    title: 'Drag me',
    start: '2026-10-03T00:00',
    end: '2026-10-05T00:00',
    color: '#cc9900'
}, {
    title: 'Resize me',
    start: '2026-10-24T00:00',
    end: '2026-10-29T00:00',
    color: '#ca4747'
}, {
    title: 'Move me around',
    start: '2026-10-11T00:00',
    end: '2026-10-14T00:00',
    color: '#339966'
}];
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-labels) - option
- [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option
- [`dragTimeStep`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragTimeStep) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, setOptions } from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const now = new Date();

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myData: MbscCalendarEvent[] = [
    {
      title: 'Fixed event',
      start: new Date(now.getFullYear(), now.getMonth(), 18),
      end: new Date(now.getFullYear(), now.getMonth(), 19),
      color: '#9e9e9e',
      editable: false,
    },
    {
      title: 'Drag me',
      start: new Date(now.getFullYear(), now.getMonth(), 3),
      end: new Date(now.getFullYear(), now.getMonth(), 5),
      color: '#cc9900',
    },
    {
      title: 'Resize me',
      start: new Date(now.getFullYear(), now.getMonth(), 24),
      end: new Date(now.getFullYear(), now.getMonth(), 29),
      color: '#ca4747',
    },
    {
      title: 'Move me around',
      start: new Date(now.getFullYear(), now.getMonth(), 11),
      end: new Date(now.getFullYear(), now.getMonth(), 14),
      color: '#339966',
    },
  ];

  eventSettings: MbscEventcalendarOptions = {
    view: {
      calendar: { labels: true },
    },
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    dragTimeStep: 15,
  };
}
```

### Template

```html
<mbsc-eventcalendar [data]="myData" [options]="eventSettings"></mbsc-eventcalendar>
```

## Implementation notes

- Set `view: { calendar: { labels: true } }` for a month grid with inline event labels.
- Enable interaction features: set `dragToCreate: true`, `dragToMove: true`, and `dragToResize: true`. Use `dragTimeStep: 15` to snap drag-created and resized events to 15-minute boundaries. `clickToCreate` and `eventDelete` are additional options for click-based event creation and keyboard deletion; all five interaction options are `false` by default.
- Set an event's `editable` property to `false` to mark it as fixed - this disables move, resize, and delete for that specific event regardless of which global interaction options are enabled.
- Mobiscroll automatically adds the `mbsc-event-readonly` CSS class to fixed events; use it to apply visual overrides such as reduced opacity or a different cursor.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-angular.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config angular
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation

## Related demos

- Next: [Drag and Drop Permissions](https://demo.mobiscroll.com/angular/eventcalendar/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Control move and resize per event or globally in a Angular event calendar — lock events from moving, prevent resizing, or mix rules by event type or role.