Event Creation

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

JavaScript Calendar

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.Calendar.onTimeRangeSelect
• DayPilot.Calendar.onTimeRangeSelected
• DayPilot.Calendar.events.add()

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

• ASP.NET MVC 5 Event Calendar Tutorial