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.

Possible handling types (eventClickHandling):

  • 'Enabled' (default)
  • 'Disabled'
  • 'Edit'
  • 'Select'
  • 'ContextMenu'
  • 'Bubble'
dp.onEventClicked = function(args) {
  alert("clicked: " + args.e.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)
  • 'Edit' (enters inline editing mode)
  • '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:DayPilotCalendar 
  ID="DayPilotCalendar1" 
  runat="server" 
  EventClickHandling="JavaScript"
  EventClickJavaScript="eventClick(e);"
  ...
  DataTagFields="status"
  ...
  />

<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") {
      dpc.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") {
    dpc.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)
  • 'Edit' (enters inline editing mode)
  • '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.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "editEvent(e.value());",
  ...
})