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

Customizing Event Appearance

Event HTML

html5-scheduler-event-customization-html.png

JavaScript

dp.onBeforeEventRender = function(args) {
  args.data.html = "Custom Event Text";
};

ASP.NET WebForms

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

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Html = "Custom Event Text";
}

Event Background Color

html5-scheduler-event-customization-background-color.png

JavaScript

dp.onBeforeEventRender = function(args) {
  args.data.backColor = "#ffc0c0";
};

ASP.NET WebForms

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.BackgroundColor = "#ffc0c0";
}

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.BackgroundColor = "#ffc0c0";
}

Event CSS

html5-scheduler-event-customization-css.png

<style type="text/css">
.myclass { font-weight: bold; }
</style>

JavaScript

dp.onBeforeEventRender = function(args) {
  args.data.cssClass = "myclass";
};

ASP.NET WebForms

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.CssClass = "myclass";
}

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.CssClass = "myclass";
}

Duration Bar Visibility

html5-scheduler-event-customization-bar-visible.png

JavaScript

dp.onBeforeEventRender = function(args) {
  args.data.barHidden = true;
};

ASP.NET WebForms

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.DurationBarVisible = false;
}

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.DurationBarVisible = false;
}

Duration Bar Color

html5-scheduler-event-customization-bar-color.png

JavaScript

dp.onBeforeEventRender = function(args) {
  args.data.barColor = "red";
};

ASP.NET WebForms

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.DurationBarColor = "red";
}

ASP.NET MVC

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.DurationBarColor = "red";
}

List of All Appearance Properties

ASP.NET (WebForms/MVC)

  • Html - event HTML
  • DurationBarColor - CSS color of the duration bar
  • DurationBarBackColor - CSS color of the duration bar background
  • DurationBarImageUrl - image that will be used for the duration bar
  • DurationBarVisible - whether the duration/progress bar should be visible
  • BackgroundColor - CSS color of the event background
  • CssClass - event CSS class
  • BackgroundImage - event background image
  • BackgroundRepeat - event background repeat style

JavaScript/AngularJS

  • html - event HTML
  • 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

List of All Behavior Properties

ASP.NET (WebForms/MVC)

  • 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)
  • ContextMenuClientName - event-specific context menu
  • EventClickEnabled - if set to false, disables event clicking
  • EventResizeEnabled - if set to false, disables event resizing
  • EventMoveEnabled - if set to false, disables event moving
  • EventMoveVerticalEnabled 
  • EventMoveHorizontalEnabled 
  • EventRightClickEnabled - if set to false, disables event right clicking
  • EventDoubleClickEnabled - if set to false, disables event double clicking

All Event*Enabled properties can only disable an option that is globally enabled.

JavaScript/AngularJS

  • 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
  • moveHDisabled
  • rightClickDisabled - if set to true, disables event right clicking
  • doubleClickDisabled - if set to true, disables event double clicking

Accessing Event Data

ASP.NET WebForms

You can access the data source item using e.DataItem property.

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)";
  }
}

Note that e.DataItem is only accessible if DayPilotScheduler.DataBind() has been called to reload the event data. If you have ViewState enabled the events will be accessible during PostBacks but e.DataItem will be null.

In the Pro version, you can store selected data fields with the events using DataTagFields instead - these custom fields will be serialized to ViewState. The fields specified using DataTagFields will be accessible in the server-side event handlers (using e.Tag[fieldName]) and on the client side (e.tag(fieldName)].

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


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

ASP.NET MVC

You can access the data source item using e.DataItem property.

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  object original = e.DataItem.Source;
  e.BubbleHtml = (string) e.DataItem["detail"];

  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"));

  if (e.Recurrent)
  {
      e.Html += " (R)";
  }

}

JavaScript

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.

dp.events.list = [
  {
    start: "2016-03-15T00:00:00",
    end: "2016-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.