Custom event rendering

There is a special event (BeforeEventRender) that is executed before rendering an event. By handling this event you can modify the calendar event content and properties:

  • Custom color of the bar on the left side (now determined by EventLeftBarColor)
  • Custom background color
  • Custom event HTML (allows custom text formatting, images, etc.)
  • Custom event ToolTip (i.e. title="" XHTML attribute)
  • Disabling specific user actions (moving, clicking, context menu ...)

This will allow the following functionality, useful especially for scheduling and time-tracking applications:

  • Different vertical bar colors for different types of events (for time-tracking applications, e.g. work/break/lunch or $100/$200/$300 per hour)
  • Inserting icons into the events (by event type, for repeating events) 
  • More detailed information about the event (location, description)

Example

CustomEventFormatting.aspx:

<daypilot:daypilotcalendar id="DayPilotCalendar1" runat="server" DataSourceID="XmlDataSource1" 
	DataTextField="name" DataValueField="id" StartDate="2007-01-01" DataStartField="Start" 
	DataEndField="End" OnBeforeEventRender="DayPilotCalendar1_BeforeEventRender" >
</daypilot:daypilotcalendar>

CustomEventFormatting.aspx.cs:

    protected void DayPilotCalendar1_BeforeEventRender(object sender, 
	BeforeEventRenderEventArgs e)
    {
        if (e.Value == "2")
        {
            e.DurationBarColor = "red";
            e.BackgroundColor = "lightyellow";
            e.InnerHTML = "<i>WARNING: This is an unusual event.</i><br>" + e.InnerHTML;
        }
    }

In this example we use custom InnerHTML, DurationBarColor, and BackgroundColor when we detect an event with a specific Value (that comes from DataValueField).

Getting the additional data for custom content

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="eventtype, eventowner"

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

  • Tag["eventtype"]
  • Tag["eventowner"]

Server-side event arguments (BeforeEventRenderEventArgs)

It is possible to change the following properties:

Appearance properties:

Behavior properties:

You can also use the following properties when determining the action:

  • Start (event start DateTime)
  • End (event end DateTime)
  • ColumnId (ID of the resource in Resources mode)
  • IsAllDay (true for all-day events)
  • Value (event ID)
  • Tag (custom database fields)

 

DayPilot for ASP.NET, DayPilot for Java