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". (see also JavaScript Calendar in Read-Only Mode).
The time range is not cleared automatically when the event handler is fired. You can clear it using the clearSelection() method.
<div id="calendar"></div>
<script>
const calendar = new DayPilot.Calendar("calendar", {
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("New event name:", "Event");
calendar.clearSelection();
if (modal.canceled) return;
calendar.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result
});
console.log("A new event was created in the calendar.");
},
// ...
});
calendar.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.