JavaScript

How to copy events using Ctrl + drag

Ctrl and Shift key status is saved in args.ctrl and args.shift properties of the args object in onEventMove and onEventMoved events.

To implement the copy feature, you need to use onEventMove because it is fired before the default action ("Update"). To make a copy of the event, it is necessary to cancel the default action using args.preventDefault().

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Calendar("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(),
        resource: args.newResource,
        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>

How to copy events using a context menu (Copy and Paste commands)

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.Calendar("dp");
  dp.contextMenu = new DayPilot.Menu(
    {
      items: [
        {text: "Copy", onClick: function(args) {copied = args.source;} }
      ],
    }
  );
  // ...
  dp.init();
</script>

This menu item will store the selected event in the copied global 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.Calendar("dp");
  dp.contextMenuSelection = new DayPilot.Menu({
    items: [
      { text: "Paste", 
        onClick: function() {
          if (!copied) { alert('You need to copy an event first.'); return; } 
          var selection = args.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(),
            resource: selection.resource,
            id: DayPilot.guid()  // generate random id
          });
          dp.events.add(newEvent);

          // notify the server about the action here
        }
      }
    ],
  });
  // ...
  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="dpc"
EventMoveJavaScript="dpc.eventMoveCallBack(e, newStart, newEnd, newResource, {ctrl: ctrl, shift: shift} )"

.aspx.cs

protected void DayPilotCalendar1_EventMove(object sender, DayPilot.Web.Ui.Events.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()
  DayPilotCalendar1.Update("Event moved");
}

Copy and Paste (Context Menu)

This sample shows how to implement a copy & paste functionality using context menu in the 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; } dpc.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 DayPilotCalendar1_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

      DayPilotCalendar1.DataSource = loadEvents(); // your method, load events from database
      DayPilotCalendar1.DataBind();
      DayPilotCalendar1.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 = "dpc.eventMoveCallBack(e, newStart, newEnd, newResource, {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.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/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; } dpc.commandCallBack('paste', {id:copied, start: e.start});"}
  }
})

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