DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » How to make the modal dialog draggable

How to make the modal dialog draggable

Last revision: Jan 24, 2013

The modal dialog (see How to show event details in a modal dialog (modal.js) and How to show a modal dialog in ASP.NET MVC 3 Razor) can be dragged using its border:


On pressing the mouse button, the dialog box content will be disabled and you can move it to a new location by dragging:


The modal dialog window can be made draggable using dragDrop property:

modal.dragDrop = true;

By default, it is turned on.


function dialog() {
  var modal = new DayPilot.Modal();
  modal.dragDrop = true; = 60;
  modal.width = 300;
  modal.opacity = 70;
  modal.border = "10px solid #d0d0d0";
  modal.height = 250;
  modal.zIndex = 100;
  modal.closed = function() { 
    if(this.result == "OK") { 
  return modal;

function eventClick(e) {
  var modal = dialog();
  modal.showUrl("Edit.aspx?id=" + e.value());


How to force the modal dialog to load its content from the server (instead of the cached version)
How to show event details in a modal dialog (modal.js)
How to open an event edit dialog from a context menu (Calendar)
How to open a new event dialog using TimeRangeSelected event (modal.js)