JavaScript

Ctrl during Drag and Drop

Ctrl and Shift key status is saved in "ctrl" and "shift" variables available to onEventMove and onEventMoved events.

We need to use onEventMove because it is fired before the default action ("Update") so we can cancel it.

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.onEventMove = function(args) {
    if (args.ctrl) {
      var newEvent = new DayPilot.Event({
        start: args.newStart,
        end: args.newEnd,
        text: "Copy of " + args.e.text(),
        id: DayPilot.guid()  // generate random id
      });
      dp.events.add(newEvent);

      // notify the server about the action here

      args.preventDefault(); // prevent the default action - moving event to the new location
    }
  };
  // ...
  dp.init();
</script>

Copy and Paste (Context Menu)

1. Add a global variable that will hold the the copied event (DayPilot.Event object).

<script type="text/javascript">
var copied = null;
</script> 

2. Add a "Copy" command to the event context menu (contextMenu).

calendar menu copy

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.contextMenu = new DayPilot.Menu({items: [
    {text:"Copy", onclick: function() {copied = this.source;} }
  ],
  cssClassPrefix: "menu_default"});
  // ...
  dp.init();
</script>

This menu item will store the selected event in the "copied" variable.

3. Add a "Paste" command to the cell context menu (contextMenuSelection):

calendar menu paste

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.contextMenuSelection = new DayPilot.Menu({items: [
    {text:"Copy", onclick: function() {
      if (!copied) { alert('You need to copy an event first.'); return; } 
      var selection = this.source;
      var duration = copied.end().getTime() - copied.start().getTime(); // milliseconds
      var newEvent = new DayPilot.Event({
        start: selection.start,
        end: selection.start.addMilliseconds(duration),
        text: "Copy of " + copied.text(),
        id: DayPilot.guid()  // generate random id
      });
      dp.events.add(newEvent);

      // notify the server about the action here
    } }
    ],
    cssClassPrefix: "menu_default"});
  // ...
  dp.init();
</script>

You can also clear the copied variable:

copied = null;

ASP.NET WebForms

Ctrl during Drag and Drop

Ctrl and Shift key status is saved in "ctrl" and "shift" variables available to the JavaScript EventMove handler (EventMoveJavaScript).

.aspx

ClientObjectName="dpm"
EventMoveJavaScript="dpm.eventMoveCallBack(e, newStart, newEnd, {ctrl: ctrl, shift: shift} )"

.aspx.cs

protected void DayPilotMonth1_EventMove(object sender, EventMoveEventArgs e)
{
  bool shift = (bool) e.Data["shift"];
  bool ctrl = (bool) e.Data["ctrl"];

  if (ctrl) {
    // copy the event in the DB (INSERT)
  }
  else if (shift) {
    // move the event in the DB (UPDATE)
  }

  setDataSourceAndBind(); // custom method that loads the data from a DB, assigns DataSource and calls DataBind()
  DayPilotMonth1.Update("Event moved");
}

Copy and Paste (Context Menu)

This sample shows how to implement a copy & paste functionality using context menu in the Monthly Calendar control.

1. Add a global variable that will hold the id of the copied event.

<script type="text/javascript">
var copied = null;
</script> 

2. Add a "Copy" command to the event context menu (ContextMenuID).

calendar menu copy

<daypilot:daypilotmenu id="DayPilotMenu1" runat="server" CssClassPrefix="menu_default" ShowMenuTitle="true">
        <DayPilot:MenuItem Text="Copy" Action="JavaScript" JavaScript="copied = e.value();" ></DayPilot:MenuItem>
</daypilot:daypilotmenu>

This menu item will store the ID of the selected event in the "copied" variable.

3. Add a "Paste" command to the cell context menu (ContextMenuSelectionID):

calendar menu paste

<DayPilot:DayPilotMenu ID="DayPilotMenuSelection" runat="server" CssClassPrefix="menu_default">
        <DayPilot:MenuItem Action="JavaScript" JavaScript="if (!copied) { alert('You need to copy an event first.'); return; } dpm.commandCallBack('paste', {id:copied, start: e.start});" Text="Paste" />
</DayPilot:DayPilotMenu>

This menu item will execute Command event on the server side, using "paste" as the command, and sending the ID of the copied event under the "id" key and the selected time start under the "start" key.

You can also clear the copied variable:

copied = null;

4. Handle the Command event on the server side. Create a new event from the copied one.

protected void DayPilotMonth1_Command(object sender, CommandEventArgs e)
{
  switch (e.Command)
  {
    case "paste":
      DateTime pasteHere = (DateTime) e.Data["start"];
      string id = (string) e.Data["id"];

      // find the event using id
      // create a new database record using the original event properties

      DayPilotMonth1.DataSource = loadEvents(); // your method, load events from database
      DayPilotMonth1.DataBind();
      DayPilotMonth1.UpdateWithMessage("Event copied.");
      break;
  }
}

ASP.NET MVC

Ctrl during Drag and Drop

Ctrl and Shift key status is saved in "ctrl" and "shift" variables available to the JavaScript EventMove handler (EventMoveJavaScript).

MVC View

EventMoveJavaScript = "dpm.eventMoveCallBack(e, newStart, newEnd, {ctrl: ctrl, shift: shift} )"

MVC Controller

protected override void OnEventMove(EventMoveArgs e)
{
  bool shift = (bool) e.Data["shift"];
  bool ctrl = (bool) e.Data["ctrl"];

  if (ctrl) {
    // copy the event in the DB (INSERT)
  }
  else if (shift) {
    // move the event in the DB (UPDATE)
  }

  UpdateWithMessage("Event moved");
}

Copy and Paste (Context Menu)

1. Add a global variable that will hold the id of the copied event.

<script type="text/javascript">
var copied = null;
</script> 

2. Add a "Copy" command to the event context menu (ContextMenu).

calendar menu copy

@Html.DayPilotMenu("menu_event", new DayPilotMenuConfig {
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Copy", Action = MenuItemAction.JavaScript, JavaScript = "copied = e.value();"}
  }
})

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/Backend"),
  ...
  ContextMenu = "menu_event"
})

This menu item will store the ID of the selected event in the "copied" variable.

3. Add a "Paste" command to the cell context menu (ContextMenuSelection):

calendar menu paste

@Html.DayPilotMenu("menu_selection", new DayPilotMenuConfig {
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Paste", Action = MenuItemAction.JavaScript, JavaScript = "if (!copied) { alert('You need to copy an event first.'); return; } dpm.commandCallBack('paste', {id:copied, start: e.start});"}
  }
})

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/Backend"),
  ...
  ContextMenuSelection = "menu_selection"
})

This menu item will execute Command event on the server side, using "paste" as the command, and sending the ID of the copied event under the "id" key and the selected time start under the "start" key.

You can also clear the copied variable:

copied = null;

4. Handle the OnCommand event on the server side. Create a new event from the copied one.

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "paste":
      DateTime pasteHere = (DateTime) e.Data["start"];
      string id = (string) e.Data["id"];

      // 1. find the event using id
      // 2. create a new database record using the original event properties
      // 3. reload events to Events

      UpdateWithMessage("Event copied.");
      break;
  }
}