Event Creation

New events can be created by selecting time cells using drag and drop. This user action fires the onTimeRangeSelected event that you can use to display a modal dialog for entering event details and saving the data to a database.

You can also disable time range selecting and make the calendar read-only.

JavaScript Calendar

Simple Prompt

Calendar config:

{
  // event creation
  onTimeRangeSelected: async (args) => {
    const modal = await DayPilot.Modal.prompt("New event name:", "Event");
    calendar.clearSelection();
    if (modal.canceled) { return; }
    const name = modal.result;
    calendar.events.add({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: name
    });
    console.log("Created");
  }
}

See also:

• DayPilot.Calendar.onTimeRangeSelect

• DayPilot.Calendar.onTimeRangeSelected

• DayPilot.Calendar.events.add()

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

<DayPilot:DayPilotCalendar 
  ID="DayPilotCalendar1" 
  runat="server" 
  ...
  ClientObjectName="dpc1"
  TimeRangeSelectedHandling="JavaScript"
  TimeRangeSelectedJavaScript="timeRangeSelected(start, end, resource)"
  OnCommand="DayPilotCalendar1_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") { 
          dpc1.commandCallBack('refresh'); 
      }
      dpc1.clearSelection();
  };
  modal.showUrl("New.aspx?start=" + start.toStringSortable() + "&end=" + end.toStringSortable() + "&r=" + resource);
}
</script>

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