Features

  • Global read-only mode (all drag and drop operations disabled)
  • Per-event read-only mode (drag and drop disabled for individual events)
  • JavaScript/HTML5 project generated using Scheduler UI Builder

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Scheduler in Read-Only Mode

By default, the JavaScript Scheduler component is configured to allow drag and drop operations:

In order to make the Scheduler read-only, you need to disable the operations using the following properties:

<div id="dp"></div>

<script>
  var dp = new DayPilot.Scheduler("dp", {

    // ...
  
    timeRangeSelectedHandling: "Disabled",
    eventMoveHandling: "Disabled",
    eventResizeHandling: "Disabled",
    eventDeleteHandling: "Disabled",
    eventClickHandling: "Disabled",
    eventRightClickHandling: "Disabled",

    // ...
    
  });
  dp.init();
</script>

The values are resolved in real time (no update() is needed). You can change the behavior back by modifying the properties again:

dp.timeRangeSelectedHandling ="Enabled";
dp.eventMoveHandling = "Update";
dp.eventResizeHandling = "Update";
dp.eventDeleteHandling = "Update";
dp.eventClickHandling = "Enabled";
dp.eventRightClickHandling = "ContextMenu";

Disabling Drag and Drop for Individual Scheduler Events

You can also disable the operations for individual events using the event data object or onBeforeEventRender event handler:

dp.events.list = [
  {
    id: "1",
    start: DayPilot.Date.today().firstDayOfMonth().addDays(1),
    end: DayPilot.Date.today().firstDayOfMonth().addDays(5),
    resource: "R2",
    text: "Event 1 (always read-only)",
    moveDisabled: true,
    resizeDisabled: true,
    clickDisabled: true,
    rightClickDisabled: true,
    deleteDisabled: true
  },
  {
    id: "2",
    start: DayPilot.Date.today().firstDayOfMonth().addDays(3),
    end: DayPilot.Date.today().firstDayOfMonth().addDays(8),
    resource: "R3",
    text: "Event 2"
  },
];