Event Click

JavaScript Scheduler

The JavaScript Scheduler supports the following handling types (eventClickHandling):

• 'Enabled' (default)

• 'Disabled'

• 'ContextMenu'

• 'Edit' (Pro only)

• 'Select' (Pro only)

• 'Bubble' (Pro only)

API

• onEventClick

• onEventClicked

• eventClickHandling

JavaScript Examples

This example shows how to define a custom action for Ctrl+click. Calling args.preventDefault() in onEventClick will cancel the default action specified using eventClickHandling property.

dp.onEventClick = function(args) {
  if (args.ctrl) {
    dp.multiselect.add(args.e);   // add to selection 
    args.preventDefault();        // cancel the default action
  }
};

How to display a simple alert box:

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

API: onEventClick.

The examples show a dialog with the clicked reservation's name. The callback reads the event from args.e and escapes its text before passing it to 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"}],
    onEventClick: 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"}]}
      onEventClick={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 onEventClick = 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"
      :onEventClick="onEventClick"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  EventClickHandling="JavaScript"
  EventClickJavaScript="eventClick(e);"
  ...
  />

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "editEvent(e.value());",
  ...
})