Event Customization

The Scheduler events can be customized using onBeforeEventRender event handler. This event handler is called once for each event in the data set.

You can customize the following properties:

• text (HTML-encoded)

• raw HTML

• CSS class

• background color

• text color

• duration bar visibility

• color of the duration bar

• icons

You can also customize the behavior:

• disable drag and drop (resizing, moving in specific direction)

• disable click event

• event-specific context menu

• static bubble content

• event-specific bubble object (with different bubble behavior and/or appearance)

Customizing Event Appearance

Event HTML

JavaScript

onBeforeEventRender: (args) => {
  args.data.html = "Custom Event Text";
};

Event Background Color

JavaScript

onBeforeEventRender: (args) => {
  args.data.backColor = "#ffc0c0";
};

Event CSS

<style type="text/css">

  .myclass {
    font-weight: bold;
  }

</style>

JavaScript

onBeforeEventRender: (args) => {
  args.data.cssClass = "myclass";
};

Duration Bar Visibility

JavaScript

onBeforeEventRender: (args) => {
  args.data.barHidden = true;
};

Duration Bar Color

JavaScript

onBeforeEventRender: (args) => {
  args.data.barColor = "red";
};

Tutorials

• JavaScript Scheduler: Events as Drag and Drop Target

• JavaScript Scheduler: Event Types

• ASP.NET Core Shift Planning (Entity Framework, SQL Server)

List of Common Appearance Properties

For a list of all event properties, please see DayPilot.Event.data in the API documentation.

• text - event text (will be HTML-encoded automatically, see XSS protection)

• html - event HTML (if specified, it is used instead of the text)

• barColor - CSS color of the duration bar

• barBackColor - CSS color of the duration bar background

• barImageUrl - image that will be used for the duration bar

• barHidden - visibility of the duration/progress bar

• backColor - CSS color of the event background

• cssClass - event CSS class

• backImage - event background image

• backRepeat - event background repeat style

• fontColor - event font color

List of Common Behavior Properties

For a list of all event properties, please see DayPilot.Event.data in the API documentation.

• areas - active areas

• toolTip - event tool tip

• bubbleHtml - event bubble HTML (the bubble content will not be loaded from the server if the BubbleHtml is set)

• contextMenu - event-specific context menu

• clickDisabled - if set to true, disables event clicking

• resizeDisabled - if set to true, disables event resizing

• moveDisabled - if set to true, disables event moving

• moveVDisabled - disables moving in vertical direction (changing a resource)

• moveHDisabled - disables moving in horizontal direction (changing date/time)

• rightClickDisabled - if set to true, disables event right clicking

• doubleClickDisabled - if set to true, disables event double clicking

Accessing Event Data

The args.data object holds a shallow copy of the data object from events.list. You should store custom event properties in tags field of the data object (to prevent name collisions).

dp.events.list = [
  {
    start: "2025-03-15T00:00:00",
    end: "2025-03-17T00:00:00",
    id: "1",
    text: "Event 1",
    tags: { detail: "Detailed event description", type: "important" }  
  }
];

dp.onBeforeEventRender = function(args) {
  args.data.cssClass = "test";
  args.data.html = args.data.text + "<br/>" + args.data.tags.detail;
  if (args.data.tags.type === "important") {
    args.data.barColor = "red";
  }
};

See also DayPilot.Scheduler.onBeforeEventRender.

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  // accessing the original object passed in DataSource collection
  object original = e.DataItem.Source;

  // accessing custom original object field to set BubbleHtml and BackgroundColor
  e.BubbleHtml = (string) e.DataItem["detail"];
  e.BackgroundColor = (string) e.DataItem["color"];

  // adding active areas for "delete" and "context menu" actions
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps_areas.commandCallBack('delete', {id:e.value() });"));
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_menu").ContextMenu("menu"));

  // modifying the event HTML (recurring events)
  if (e.Recurrent)
  {
      e.Html += " (R)";
  }
}

<DayPilot:DayPilotScheduler
  ...
  DataTagFields="detail, color"
/>


protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.BubbleHtml = e.Tag["detail"];
  e.BackgroundColor = e.Tag["color"];
}

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.Html = "Custom Event Text";
}