---
title: "Javascript Event calendar Drag and Drop Permissions Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/conditional-move-resize-drag-drop-fixed-event-length-fixed-to-resource"
---

# Drag and Drop Permissions - JavaScript Event calendar demo

Control move and resize per event or globally in a Javascript event calendar — lock events from moving, prevent resizing, or mix rules by event type or role. Plain JS api for usage everywhere.

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

## Description

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 [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) option to `false` the events cannot be resized.
- **Events can be fixed in time (cannot be moved)** - by setting [`dragInTime`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragInTime) option to `false` the events cannot be moved in time. Take in consideration that [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) must be set to `true`

To control this on an event basis, use [the appropriate properties](https://demo.mobiscroll.com/javascript/eventcalendar/event-data-structure) which have precedence over global calendar options.

## What this demo shows

- A desktop month view event calendar is displayed with event labels rendered inside the day cells.
- **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.
- **Per-event permissions** The purple `Event 2 (cannot be moved in time)` can be resized but cannot be moved in time.
- **Per-event permissions** The red `Event 3 (cannot be resized)` can be moved in time but cannot be resized.
- **Event interaction** Hovering over or selecting an event label highlights it and shows resize handles on both sides (exception where resizing is disabled), indicating that the event can be resized by clicking and dragging.
- **Global interaction controls** A control panel appears next to the calendar (left side) with this title: `Control the interaction globally (all events)`.
- **Global interaction controls** Two switches are shown and both are disabled by default.
- **Global interaction controls** The `Events cannot be resized dragToResize=false` switch disables resizing for all events while still allowing events to be moved in time.
- **Global interaction controls** The `Events cannot be moved in time dragInTime=false` switch disables moving events in time for all events while still allowing resizing.
- **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.
- **Month navigation** The visible month can be changed by clicing and dragging the calendar left or right.
- **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

- **Mixed editing rules** Calendars where some events can be moved, some can be resized, and others need to stay fixed in one dimension.
- **Event-type restrictions** Scheduling setups where different event categories need different drag and drop behavior.
- **Role- or policy-driven control** Use cases where interaction rules depend on business logic, permissions, or approval requirements.

## Tutorial

### Control the interaction globally (all events)

- [ ] Events cannot be resized `dragToResize=false`
- [ ] Events cannot be moved in time `dragInTime=false`

```js
mobiscroll.eventcalendar('#calendar', {
    view: {
        calendar: { type: 'month' }
    },
    // relevant events
    data: [{
        color: 'blue',
        dragInTime: false,
        end: '2026-10-22T00:00',
        start: '2026-10-19T00:00',
        title: 'Event 2 (cannot be moved in time)'
    }, {
        color: 'brown',
        end: '2026-10-26T00:00',
        start: '2026-10-23T00:00',
        resize: false,
        title: 'Event 3 (cannot be resized)'
    }],
    dragToMove: true,
    dragToResize: true,
    dragInTime: 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
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`dragInTime`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragInTime) - option

## Code

### JS

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

mobiscroll.eventcalendar('#demo-conditional-drag-drop-calendar', {
  view: {
    calendar: { type: 'month' },
  },
  dragToMove: true,
  dragToResize: true,
  data: [
    {
      color: 'cyan',
      end: '2026-10-18T00:00',
      start: '2026-10-17T00:00',
      title: 'Event 1',
    },
    {
      color: 'blue',
      dragInTime: false,
      end: '2026-10-22T00:00',
      start: '2026-10-19T00:00',
      title: 'Event 2 (cannot be moved in time)',
    },
    {
      color: 'brown',
      end: '2026-10-26T00:00',
      start: '2026-10-23T00:00',
      resize: false,
      title: 'Event 3 (cannot be resized)',
    },
    {
      color: 'teal',
      end: '2026-10-27T00:00',
      start: '2026-10-26T00:00',
      title: 'Event 4',
    },
    {
      color: 'yellow',
      end: '2026-10-29T00:00',
      start: '2026-10-28T00:00',
      title: 'Event 5',
    },
  ],
});
```

### HTML

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

## Implementation notes

- Set `view: { calendar: { type: 'month' } }`. Enable `dragToMove: true` and `dragToResize: true` at the calendar level to allow moving and resizing by default across all events.
- To prevent an individual event from being moved in time, set `dragInTime: false` on the event data object - the event can still be resized. To prevent an individual event from being resized, set `resize: false` on the event data object - the event can still be moved. Event-level properties take precedence over the global calendar options.
- To apply restrictions globally, set `dragToResize: false` on the calendar to block resizing for all events, or set `dragInTime: false` on the calendar to block time-based moving for all events. When using `dragInTime: false` globally, `dragToMove` must remain `true`.

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

- Previous: [Drag and Drop](https://demo.mobiscroll.com/javascript/eventcalendar/move-resize-drag-drop-to-create-events.md) - Control drag-and-drop in a Javascript event calendar — enable/disable click-to-create, drag-to-create, move, resize, and delete per event or globally.
- Next: [Drag and Drop Between Calendars](https://demo.mobiscroll.com/javascript/eventcalendar/drag-drop-between-calendar-instances.md) - Drag and drop events between two side-by-side Javascript event calendar in month view — move events across separate calendars with cross-calendar drag and drop.