Event Double Click

Event double click is disabled by default. You can enable it using the eventDoubleClickHandling property.

If you enable event double click your users will experience a slight delay before the event click event is fired. The Scheduler needs the delay to tell a difference between a single and a double click. You can configure the timeout using doubleClickTimeout value.

JavaScript

Example

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.eventDoubleClickHandling = "Enabled";
  dp.onEventDoubleClick = function(args) {
    DayPilot.Modal.alert("Event with id " + DayPilot.Util.escapeHtml(String(args.e.id())) + " was double-clicked");
  };
  dp.init();
</script>

See also

• eventDoubleClickHandling property

• onEventDoubleClick

• onEventDoubleClicked

API: eventClickHandling, eventDoubleClickHandling, onEventDoubleClick.

The examples enable a details dialog on double-click and disable single-click handling. The handler reads the event name from args.e and escapes it for the dialog.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    eventClickHandling: "Disabled",
    eventDoubleClickHandling: "Enabled",
    onEventDoubleClick: args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.e.text())); }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      eventClickHandling={"Disabled"}
      eventDoubleClickHandling={"Enabled"}
      onEventDoubleClick={args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.e.text())); }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const eventClickHandling = "Disabled";
const eventDoubleClickHandling = "Enabled";
const onEventDoubleClick = args => { DayPilot.Modal.alert(DayPilot.Util.escapeHtml(args.e.text())); };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :eventClickHandling="eventClickHandling"
      :eventDoubleClickHandling="eventDoubleClickHandling"
      :onEventDoubleClick="onEventDoubleClick"
    />
  </div>
</template>

ASP.NET WebForms

Supported handling types (EventDoubleClickHandling property):

• Disabled (default)

• CallBack

• PostBack

• Edit

• JavaScript

If you choose CallBack or PostBack handling, the server-side EventDoubleClick event will be fired.

See also event click.