Events

DayPilotCalendar can handle both single- and double-click events:

  • EventClick
  • EventDoubleClick
  • EventRightClick

Double Clicks

Double clicks are detected automatically: no EventClick event will be fired if the second click happens within 300 ms:

  • You can use both EventClick and EventDoubleClick event handlers at the same time.
  • Each of these events can perform a different action, e.g. inline editing on double click, opening event bubble on single click.

JavaScript

The JavaScript version uses api2 by default. This means the click event flow is like this:

  1. onEventClick
  2. Default action (eventClickHandling)
  3. onEventClicked

Default actions (eventClickHandling):

  • 'Enabled' (default)
  • 'Disabled'
  • 'Select'
  • 'ContextMenu'
  • 'Bubble'

API

Examples

Custom action for Ctrl+click (args.ctrl is supported since buidl 8.1.1943):

dp.onEventClick = function(args) {
  if (args.ctrl) {
    dp.multiselect.add(args.e);
    args.preventDefault();
  }
};

Simple alert box:

dp.onEventClicked = function(args) {
  alert("clicked: " + args.e.id());
};

Modal dialog:

dp.onEventClicked = function(args) {
  var modal = new DayPilot.Modal();
  model.onClosed = function(args) {
    console.log("The modal dialog closed with the following return value: " + args.result);
  };
  modal.showUrl("edit.php?id=" + args.id());
};

ASP.NET WebForms

You can assign an action to event click using EventClickHandling property.

  • 'Disabled' (default)
  • 'CallBack' (fires the server-side event handler using CallBack)
  • 'PostBack' (fires the server-side event handler using PostBack)
  • 'JavaScript' (custom JS code)
  • 'Select' (selects the event, fires EventSelect event depending on EventSelectHandling value)
  • 'ContextMenu' (shows a context menu for this event, see also event context menu)
  • 'Bubble' (shows a bubble for this event, see also event bubble)

.aspx

<DayPilot:DayPilotMonth 
  ID="DayPilotMonth1" 
  runat="server" 
  EventClickHandling="JavaScript"
  EventClickJavaScript="eventClick(e);"
  ...
  DataTagFields="status"
  ClientObjectName="dpm"
  ...
  />

<script type="text/javascript">
  function eventClick(e) {
    // only fire the server-side event if the ID is 5 or status field is set to tentative
    if (e.value() == "5" || e.tag("status") == "tentative") {
      dpm.eventClickCallBack(e);
    }
  }
</script>

.aspx.cs

function eventClick(e) {
  // only fire the server-side event if the ID is 5 or status field is set to tentative
  if (e.value() == "5" || e.tag("status") == "tentative") {
    dpm.eventClickCallBack(e);
  }
}

ASP.NET MVC

You can assign an action to event click using EventClickHandling property.

  • 'Disabled' (default)
  • 'CallBack' (fires the server-side event handler using CallBack)
  • 'JavaScript' (custom JS code)
  • 'Select' (selects the event, fires EventSelect event depending on EventSelectHandling value)
  • 'ContextMenu' (shows a context menu for this event, see also event context menu)
  • 'Bubble' (shows a bubble for this event, see also event bubble)
@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/Backend"),
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "editEvent(e.value());",
  ...
})