Event Creation

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

JavaScript

Simple Prompt

    // event creation
    dp.onTimeRangeSelected = function (args) {
        var name = prompt("New event name:", "Event");
        if (!name) return;
        var e = new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: name
        });
        dp.events.add(e);
        dp.clearSelection();
        dp.message("Created");
    };

See also:

• DayPilot.Month.onTimeRangeSelect
• DayPilot.Month.onTimeRangeSelected

ASP.NET. MVC

Modal Dialog

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/Backend"),
  ...
  TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
  TimeRangeSelectedJavaScript = "timeRangeSelected(start, end)"
})

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") { 
          dpm.commandCallBack('refresh'); 
      }
      dpm.clearSelection();
  };
  modal.showUrl("New?start=" + start.toStringSortable() + "&end=" + end.toStringSortable());
}
</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(VisibleStart, VisibleEnd).AsEnumerable();  // your data-loading method

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

<DayPilot:DayPilotMonth 
  ID="DayPilotMonth1" 
  runat="server" 
  ...
  ClientObjectName="dpm"
  TimeRangeSelectedHandling="JavaScript"
  TimeRangeSelectedJavaScript="timeRangeSelected(start, end)"
  OnCommand="DayPilotMonth1_Command"
/>

<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") { 
          dpm.commandCallBack('refresh'); 
      }
      dpm.clearSelection();
  };
  modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable());
}
</script>

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