Event Customization

Example 1: Custom HTML, CSS class and background color

.aspx

<daypilot:daypilotcalendar 
  id="DayPilotCalendar1" 
  runat="server" 
  OnBeforeEventRender="DayPilotCalendar1_BeforeEventRender" 
  ...
/>

.aspx.cs

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  if ((string)e.DataItem["type"] == "special")  // "type" field must be available in the DataSource
  {
      e.CssClass = "special";
      e.BackgroundColor = "lightyellow";
      e.Html = "<i>WARNING: This is an unusual event.</i><br>" + e.Html;
  }
}

Example 2: Rendering images in events

You can render images in events using BeforeEventRender event:

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  if (e.Value == "2")
  {
    e.InnerHTML = "<img src="yourimage.png" width='15' height='15' /> " + e.InnerHTML;
   }
}

You can also use Tag fields or DataItem to load event type from a database:

protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  switch (e.Tag["type"]) {
     case "meeting":
       e.InnerHTML = String.Format("<img src="meeting.png" width='15' height='15' /> {0}", e.InnerHTML);
       break;
     case "break":
       e.InnerHTML = String.Format("<img src="break.png" width='15' height='15' /> {0}", e.InnerHTML);
       break;
  }
}

Data source item

The original data source item is available through e.DataItem property.

You can access its fields/properties directly using an indexer:

string type = (string) e.DataItem["type"];

You can also access the original object using e.DataItem.Source:

object source = e.DataItem.Source;

Tags

The Tag property can keep additional event-specific data. You can specify multiple columns of your data source to be stored with the event (DataTagFields):

DataTagFields="type"

These fields are available through the whole object lifecycle (in the server-side and client-side event handlers).

The values are converted to a string.

In the BeforeEventRender event handler you will access these fields using the Tag property:

string type = e.Tag["type"];

Use OnBeforeEventRender method to override event properties.

Read-only properties:

• Id

• Start

• End

• Text

• DataItem

• Resource (Pro edition only)

• Tag (Pro edition only)

Properties that can be customized in the Pro edition:

• Areas

• BackgroundColor

• BorderColor

• BubbleHtml

• ContextMenuClientName

• CssClass

• DurationBarColor

• EventClickEnabled

• EventDeleteEnabled

• EventDoubleClickEnabled

• EventResizeEnabled

• EventMoveEnabled

• EventRightClickEnabled

• FontColor

• Html

• ToolTip

Properties that can be customized in the Lite edition (open-source):

• BackgroundColor

• BorderColor

• CssClass

• DurationBarColor

• FontColor

• Html

• ToolTip

Example

public class Dpc: DayPilotCalendar {

  // ...

  protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
  {
    if ((string)e.DataItem["type"] == "special")  // "type" field must be available in the DataSource
    {
      e.CssClass = "special";
      e.BackgroundColor = "lightyellow";
      e.Html = "<i>WARNING: This is an unusual event.</i><br>" + e.Html;
    }
  }

}

When using the AngularJS event calendar plugin you can define the onBeforeEventRender event using the config object:

<div ng-app="main" ng-controller="DemoCtrl" >
        <daypilot-calendar id="calendar" daypilot-config="calendarConfig" daypilot-events="events" ></daypilot-calendar>
    </div>
</div>

<script>
    var app = angular.module('main', ['daypilot']).controller('DemoCtrl', function($scope, $timeout, $http) {
        $scope.events = [];

        $scope.calendarConfig = {
          onBeforeEventRender: function(args) {
              if (args.data.tags && args.data.tags.type === "important"){
                  args.data.rightClickDisabled = true;
                  args.data.barColor = "red";
              }
          };
        };
        
        // using $timeout to make sure all changes are applied before reading visibleStart() and visibleEnd()
        $timeout(function() {
          loadEvents();
        });

        function loadEvents() {
          var params = {
              start: $scope.calendar.visibleStart().toString(),
              end: $scope.calendar.visibleEnd().toString()
          }
          $http.post("backend_events.php", params).success(function(data) {
              $scope.events = data;
          });              
        }
        
    });
</script>