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

javascript scheduler snap to grid

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:

JavaScript

Example:

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

Tutorial: Custom Snap-To-Grid Rules

ASP.NET WebForms

Example:

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

ASP.NET MVC

Example:

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