html5-event-calendar-drag-and-drop-creating.png

New events can be created by selecting the time cells using drag and drop. This will fire TimeRangeSelected event.

ASP.NET WebForms

Modal Dialog using DayPilot.Modal

<DayPilot:DayPilotCalendar 
  ID="DayPilotCalendar1" 
  runat="server" 
  ...
  ClientObjectName="dpc1"
  TimeRangeSelectedHandling="JavaScript"
  TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)"
  OnCommand="DayPilotCalendar1_Command"
/>

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") { dpc1.commandCallBack('refresh'); } dpc1.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 DayPilotCalendar1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      DayPilotCalendar1.DataSource = loadData(); // your method
      DayPilotCalendar1.DataBind();
      DayPilotCalendar1.Update();
      break;
  }
}

Modal Dialog using ModalPopupExtender

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

ASP.NET. MVC

Modal Dialog

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/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") { dpc.commandCallBack('refresh'); } dpc.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";
}

Tutorial

JavaScript

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: