---
title: "Javascript Scheduler Drag, Resize and Create Events Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/move-resize-drag-drop-to-create-events"
---

# Drag, Resize and Create Events - JavaScript Scheduler demo

Enable or disable drag-to-create, move, resize, and delete in a Javascript Scheduler — configure snap interval and lock individual events as read-only. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/scheduler/move-resize-drag-drop-to-create-events)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/scheduler/move-resize-drag-drop-to-create-events)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/scheduler/move-resize-drag-drop-to-create-events.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/move-resize-drag-drop-to-create-events.md), [React](https://demo.mobiscroll.com/react/scheduler/move-resize-drag-drop-to-create-events.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/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/javascript/eventcalendar/api#opt-clickToCreate), [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate), [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove), [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) and [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) options, which are `false` by default.

Use the [`dragTimeStep`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-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.

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **View controls** A configuration panel next to the scheduler lets users switch between `Daily scheduler` and `Weekly scheduler`, with the weekly scheduler selected by default.
- **Daily scheduler** Selecting `Daily scheduler` updates the layout to display a daily scheduler view.
- **Interaction controls** Below the view controls a second panel titled `Granular control over the interaction` allows individual interaction modes to be enabled or disabled.
- **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 on time grid creates a new event when click-to-create is enabled.
- **Drag-create interactions** Clicking and dragging across empty space on time grid creates a new event when drag-to-create is enabled.
- **Move interactions** Existing events can be dragged to a different date/ hour 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.
- **Drag sensitivity controls** A third panel titled `Control drag sensitivity` lets users define the snap interval in minutes used during drag operations.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Read-only events** Events marked with `editable: false` remain visible but cannot be moved, resized, or deleted.

## 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 application modes should allow different editing actions in the same scheduler UI.
- **Guardrailed editing** Use cases where users should be able to interact with the calendar while specific actions remain restricted.
- **Mixed editable and fixed events** Schedulers that combine movable events with locked entries that should remain visible but not editable.
- **Admin and operator dashboards** Interfaces where administrators need full editing capabilities while other users have limited access.
- **Workflow testing and configuration** Applications that need to demonstrate or dynamically configure scheduler interaction behavior.

## Tutorial

- ( ) Daily schedule
- (x) Weekly schedule

### 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

### Control drag sensitivity

Snap events to every `15` minutes when moving.

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        scheduler: { type: 'week' }
    },
    data: [{
        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'
    }],
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    dragTimeStep: 15,
    eventDelete: true
});
```

With "Daily schedule":

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        scheduler: { type: 'day' }
    },
    data: [{
        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'
    }],
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    dragTimeStep: 15,
    eventDelete: true
});
```

## API used in this demo

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

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var now = new Date();

mobiscroll.eventcalendar('#demo-drag-drop-events', {
  view: {
    scheduler: { type: 'week' },
  },
  data: [
    {
      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',
    },
  ],
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  dragTimeStep: 15,
});
```

### HTML

```html
<div id="demo-drag-drop-events"></div>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }`.
- Define events across 4 categories with relative dates: **Fixed events** (`editable: false`, grey) - locked against all interactions; **"Drag me"** (yellow) - moveable; **"Resize me"** (red) - resizable; **"Move me around"** (green) - both moveable and resizable.
- Enable `dragToCreate: true`, `dragToMove: true`, `dragToResize: true`. Set `dragTimeStep: 15` to snap all drag actions to 15-minute increments.
- Events with `editable: false` are locked - Mobiscroll adds `mbsc-event-readonly` to their CSS class, which can be targeted for visual overrides.

## 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-javascript.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 javascript
   ```

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

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

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

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

## Related demos

- Next: [Drag, Resize & Move Restrictions](https://demo.mobiscroll.com/javascript/scheduler/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource.md) - Restrict drag, resize, and moves per event, per resource, or globally in the Javascript Scheduler — fix length, lock time, or block cross-resource moves.