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)

Angular Scheduler

Tutorial

• Angular Scheduler: Modal Dialog for Event Creation and Editing

ASP.NET WebForms

Modal Dialog using DayPilot.Modal

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

The timeRangeSelected() function will open a modal dialog using DayPilot.Modal.

<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>

After creating the new event in the database (in New.aspx which is a standalone page) the .closed event handler is called and the events in Scheduler are refreshed using .commandCallBack().

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;
  }
}

Modal Dialog using ModalPopupExtender

See the Scheduler and ModalPopupExtender tutorial for more details on how to use the scheduler with ModalPopupExtender from Ajax Control Toolkit.

ASP.NET. MVC

Modal Dialog

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

The timeRangeSelected() function will open a modal dialog using DayPilot.Modal.

<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>

After creating the new event in the database (in New which is a standalone page/view) the .closed event handler is called and the events in Scheduler are refreshed using .commandCallBack().

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";
}