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.

Live Demo

Scheduler in Read-Only Mode

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

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

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

<script>
  const 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() method call 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"
  },
];