html5 event calendar time range selecting

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:

JavaScript

Time range selecting is enabled by default. You can disable it by setting timeRangeSelectedHandling property to "Disabled".

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.Calendar("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(),
        text: name
    });
    dp.events.add(e);
    dp.message("Created");
  };
  // ...
  dp.init();
</script>

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.

See Also

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.