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