Event Creation

New events can be created by selecting time cells by dragging (or clicking a single cell). This will fire the onTimeRangeSelected event.

JavaScript Scheduler

Simple Prompt

    // event creating
    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");
    };

See also:

• DayPilot.Scheduler.onTimeRangeSelect

• DayPilot.Scheduler.onTimeRangeSelected

Tutorial

• HTML5 Scheduler and Modal Dialog (jQuery)

API: onTimeRangeSelected.

Drag over empty cells to enter a reservation name. The handler clears the selection after the dialog, ignores cancellation or an empty name, and adds accepted reservations to the local event collection. Add backend persistence for application use.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Define the asynchronous onTimeRangeSelected handler in the typed config. The callback's args.control provides the selection and event APIs.

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    onTimeRangeSelected: async args => {
      const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
      args.control.clearSelection();
      if (modal.canceled || !modal.result) { return; }
      args.control.events.add({id: DayPilot.guid(), text: modal.result,
        start: args.start, end: args.end, resource: args.resource});
    }
  };

}

Tutorial

• Angular Scheduler: Modal Dialog for Event Creation and Editing

React

Pass onTimeRangeSelected directly as a function prop; the selected dates and resource arrive in its DayPilot arguments object.

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      onTimeRangeSelected={async args => {
        const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
        args.control.clearSelection();
        if (modal.canceled || !modal.result) { return; }
        args.control.events.add({id: DayPilot.guid(), text: modal.result,
          start: args.start, end: args.end, resource: args.resource});
      }}
    />
  </div>;
}

Vue

Use :onTimeRangeSelected to pass the asynchronous script function to the Scheduler.

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const onTimeRangeSelected = async args => {
  const modal = await DayPilot.Modal.prompt("Reservation name:", "New reservation");
  args.control.clearSelection();
  if (modal.canceled || !modal.result) { return; }
  args.control.events.add({id: DayPilot.guid(), text: modal.result,
    start: args.start, end: args.end, resource: args.resource});
};

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onTimeRangeSelected="onTimeRangeSelected"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  ClientObjectName="dps1"
  TimeRangeSelectedHandling="JavaScript"
  TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)"
/>

<script type="text/javascript">
function timeRangeSelected(start, end, resource) {
  var modal = new DayPilot.Modal();
  modal.top = 60;
  modal.width = 300;
  modal.opacity = 70;
  modal.border = "10px solid #d0d0d0";
  modal.closed = function() { 
      if(this.result == "OK") { 
          dps1.commandCallBack('refresh'); 
      }
      dps1.clearSelection();
  };
  modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);
}
</script>

protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      DayPilotScheduler1.DataSource = loadData(); // your method
      DayPilotScheduler1.DataBind();
      DayPilotScheduler1.Update();
      break;
  }
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "timeRangeSelected(start, end, resource)"
})

<script type="text/javascript">
function timeRangeSelected(start, end, resource) {
  var modal = new DayPilot.Modal();
  modal.top = 60;
  modal.width = 300;
  modal.opacity = 70;
  modal.border = "10px solid #d0d0d0";
  modal.closed = function() { 
      if(this.result == "OK") { 
          dps.commandCallBack('refresh'); 
      }
      dps.clearSelection();
  };
  modal.showUrl("New?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);
}
</script>

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      UpdateWithMessage("Refreshed");
      break;
  }
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
      return;
  }

  Events = new EventManager(Controller).FilteredData(StartDate, EndDate).AsEnumerable();  // your data-loading method

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
  DataResourceField = "resource";
}