Restricting Event Moving Directions

You can limit the directions in which the event can be moved using onBeforeEventRender event handler.

• Use moveVDisabled and moveHDisabled properties to forbid moving in the specified direction. 

• Moving can be disabled at all using moveDisabled.

• These values do not override the global eventMoveHandling setting (disabling moving using the eventMoveHandling property has a higher priority).

See Also

• If you want to prevent events from being moved to parent rows, please see parent resources.

• If you want to disable selected cells as targets (e.g cells in the past), please see disabled cells.

• If you need to implement custom rules, please see event moving customization.

JavaScript

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.durationBarVisible = true;
  dp.durationBarMode = "PercentComplete";
  dp.events.list = [
    {
      start: "2013-03-25T00:00:00",
      end: "2013-03-25T12:00:00",
      id: "123",
      resource: "A",
      text: "Event",
      moveVDisabled: true,
      moveHDisabled: false
    }
  ]
  // ...
  dp.init();
</script>

API: events.list, resources.

The examples put moveVDisabled: true directly on the reservation data. Its dates can change while it remains assigned to Room A.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Fixed room", resource: "A", start: "2026-11-03", end: "2026-11-06", moveVDisabled: true}]
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Fixed room", resource: "A", start: "2026-11-03", end: "2026-11-06", moveVDisabled: true}]}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Fixed room", resource: "A", start: "2026-11-03", end: "2026-11-06", moveVDisabled: true}];

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>

protected void DayPilotScheduler1_BeforeEventRender(object sender, DayPilot.Web.Ui.Events.Scheduler.BeforeEventRenderEventArgs e)
{
  e.EventMoveVerticalEnabled = false;
}

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.EventMoveVerticalEnabled = false;
}