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

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

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