Snap to Grid

Turning off snap-to-grid behavior for moving/resizing

By default, events are snapped to the time grid cells during drag and drop in the JavaScript Scheduler component. By turning off the snap-to-grid feature, it is possible to move and resize events by free hand.

1. You can disable snap to grid using the snapToGrid property (boolean).

2. When snap-to-grid is disabled, the actual position is calculated on a pixel level (the number of pixels per cell can be set using cell width).

3. It's recommended to set useEventBoxes="Never" to prevent confusion (the moving/resizing shadow width always corresponds to the event box width). See also exact event duration.

Snap-to-grid is applied to the following drag-and-drop operations:

• event moving (disable snap-to-grid for moving only using snapToGridEventMoving)

• event resizing (disable snap-to-grid for resizing only using snapToGridEventResizing)

• time range selection (disable snap-to-grid for resizing only using snapToGridTimeRangeSelecting)

• rectangle selection (disable snap-to-grid for resizing only using snapToGridRectangleSelecting)

JavaScript

Example:

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp", {
    snapToGrid: false,
    // ...
  });
  dp.init();
</script>

Tutorial: Custom Snap-To-Grid Rules

• JavaScript Scheduler: Customized Snap-to-Grid

API: snapToGridEventMoving, useEventBoxes.

The examples disable snapping only for event moving and use exact event boxes. Users can place moved events between hourly boundaries; the other operations keep their snapping settings.

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-03",
    days: 1,
    scale: "Hour",
    timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}],
    snapToGridEventMoving: false,
    useEventBoxes: "Never"
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-03"}
      days={1}
      scale={"Hour"}
      timeHeaders={[{groupBy: "Day"}, {groupBy: "Hour"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}]}
      snapToGridEventMoving={false}
      useEventBoxes={"Never"}
    />
  </div>;
}

Vue

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

const startDate = "2026-11-03";
const days = 1;
const scale = "Hour";
const timeHeaders = [{groupBy: "Day"}, {groupBy: "Hour"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}];
const snapToGridEventMoving = false;
const useEventBoxes = "Never";

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  SnapToGrid = "false"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  SnapToGrid = false
})