html5 event calendar event customization

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

The following properties can be customized.

Event Appearance Properties

  • backColor - CSS color of the event background
  • backImage - event background image
  • backRepeat - event background repeat style
  • borderColor
  • cssClass - event CSS class
  • barColor - CSS color of the duration bar
  • barBackColor - CSS color of the duration bar background
  • barHidden - hiden the duration bar
  • fontColor - foreground color
  • html - raw event HTML
  • text - event text (will be HTML-encoded)

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

All *Disabled 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
  • tags

These properties can't be changed in onBeforeEventRender.

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("2021-03-25T12:00:00"),
          end: new DayPilot.Date("2021-03-25T12:00:00").addHours(3),
          id: DayPilot.guid(),
          text: "Event"
      },
      {
          start: new DayPilot.Date("2021-03-26T10:00:00"),
          end: new DayPilot.Date("2021-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("2021-03-25T12:00:00"),
          end: new DayPilot.Date("2021-03-25T12:00:00").addHours(3),
          id: DayPilot.guid(),
          text: "Event"
      },
      {
          start: new DayPilot.Date("2021-03-26T10:00:00"),
          end: new DayPilot.Date("2021-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;
    }
  }

}