html5 scheduler time range selecting javascript

The users can select a time range using drag and drop. This feature can be used to create new events or copy existing events.

An activated time range selection can be used for further actions:

Reference

JavaScript

Time range selecting is enabled by default.

The time range is not cleared automatically when the event handler is fired. You can clear it using clearSelection() method.

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onTimeRangeSelected = function (args) {
    var name = prompt("New event name:", "Event");
    dp.clearSelection();
    if (!name) return;
    var e = new DayPilot.Event({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: name
    });
    dp.events.add(e);
    dp.message("Created");
  };
  // ...
  dp.init();
</script>

Tutorials

ASP.NET WebForms

Time range selecting is disabled by default. You can enable it using TimeRangeSelectedHandling.

Possible TimeRangeSelectedHandling values:

  • CallBack (server-side TimeRangeSelected will be fired immediately using AJAX CallBack)
  • PostBack (server-side TimeRangeSelected will be fired immediately using PostBack) 
  • JavaScript (client-side onTimeRangeSelected event will be fired)
  • Hold (does nothing, keeps the selection active)
  • HoldForever (does nothing, keeps the selection active; survives a PostBack and CallBack)

Persistent time range selection (selection that doesn't fire TimeRangeSelected right after the dragging is finished - TimeRangeSelectedHandling is set to Hold or HoldForever) can be used to display a context menu or double clicked.

See also:

Invoking the callback:

ASP.NET MVC

Time range selecting is disabled by default. You can enable it using TimeRangeSelectedHandling.

Possible TimeRangeSelectedHandling values:

  • CallBack (server-side TimeRangeSelected will be fired immediately using AJAX CallBack)
  • JavaScript (client-side onTimeRangeSelected event will be fired)

Persistent time range selection (selection that doesn't fire TimeRangeSelected right after the dragging is finished - TimeRangeSelectedHandling is set to Hold or HoldForever) can be used to display a context menu or double clicked.