html5-event-calendar-event-customization.png

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

The following properties can be customized.

Appearance Properties

  • BackgroundColor - CSS color of the event background
  • BackgroundImage - event background image
  • BackgroundRepeat - event background repeat style
  • BorderColor
  • CssClass - event CSS class
  • DurationBarColor - CSS color of the duration bar
  • DurationBarImageUrl - image that will be used for the duration bar
  • FontColor
  • HeaderHtml - header HTML when the event header is visible (ShowEventHeader)
  • Html - event HTML

Behavior Properties

  • 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
  • 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.

Event Data Properties

You can read the following event properties:

  • Id
  • Text
  • Start
  • End
  • Resource
  • Tag
  • DataItem

JavaScript

The events can be customized using onBeforeEventRender event.

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

<script type="text/javascript">

  var dp = new DayPilot.Calendar("dp");
  dp.events.list = [
      {
          start: new DayPilot.Date("2013-03-25T12:00:00"),
          end: new DayPilot.Date("2013-03-25T12:00:00").addHours(3),
          id: DayPilot.guid(),
          text: "Event"
      },
      {
          start: new DayPilot.Date("2013-03-26T10:00:00"),
          end: new DayPilot.Date("2013-03-26T11:00:00"),
          id: DayPilot.guid(),
          text: "Special event",
          tags: { type: "important"}
      }
  ];

  dp.onBeforeEventRender = function(args) {
      if (args.data.tags && args.data.tags.type === "important"){
          args.data.rightClickDisabled = true;
          args.data.barColor = "red";
      }
  };

  // ...

  dp.init();

</div>

The customized event properties can be also added directly to the event data object (.events.list). See also DayPilot.Event.data property.

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

<script type="text/javascript">

  var dp = new DayPilot.Calendar("dp");
  dp.events.list = [
      {
          start: new DayPilot.Date("2013-03-25T12:00:00"),
          end: new DayPilot.Date("2013-03-25T12:00:00").addHours(3),
          id: DayPilot.guid(),
          text: "Event"
      },
      {
          start: new DayPilot.Date("2013-03-26T10:00:00"),
          end: new DayPilot.Date("2013-03-26T11:00:00"),
          id: DayPilot.guid(),
          text: "Special event",
          rightClickDisabled: true,
          barColor: "red"
      }
  ];

  // ...

  dp.init();

</div>

AngularJS

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>

ASP.NET WebForms

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

ASP.NET MVC

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

}