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:



<div id="dp"></div>
  const dp = new DayPilot.Scheduler("dp", {
    snapToGrid: false,
    // ...

Tutorial: Custom Snap-To-Grid Rules

ASP.NET WebForms


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



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