Event Customization

The Monthly Calendar events can be customized using BeforeEventRender event handler.

It is possible to customize the following properties:

Appearance Properties

• BackgroundColor - CSS color of the event background
• CssClass - event CSS class
• Html - event HTML

Behavior Properties

• Areas - event 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 - custom data source fields mapped using DataTagFields property
• DataItem - data source item

JavaScript

For a list of supported properties (Lite/Pro versions) see the DayPilot.Event.data object structure.

Example

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

<script type="text/javascript">
    var dp = new DayPilot.Month("dp");

    // ...

    dp.events.list = [
        {
            "start": "2013-02-26T00:00:00",
            "end": "2013-02-26T12:00:00",
            "id": "43cefad6-8cea-d4b9-9b33-029fb1ff086d",
            "text": "Event 1",
            "tags": {
                "type": "note"
            }
        },
        {
            "start": "2013-03-06T00:00:00",
            "end": "2013-03-06T12:00:00",
            "id": "cb122202-5263-f467-73b3-643e4683bbc7",
            "text": "Event 2",
            "tags": {
                "type": "complete"
            }
        },
        {
            "start": "2013-03-03T00:00:00",
            "end": "2013-03-03T12:00:00",
            "id": "5a8376d2-8e3d-9739-d5d9-c1fba6ec02f9",
            "text": "Event 3"
        },
        {
            "start": "2013-02-25T00:00:00",
            "end": "2013-02-27T12:00:00",
            "id": "1fa34626-113a-ccb7-6a38-308e6cbe571e",
            "text": "Event 4",
            "tags": {
                "type": "important"
            }
        },
        {
            "start": "2013-03-02T00:00:00",
            "end": "2013-03-02T12:00:00",
            "id": "0ce20411-4344-1ac1-a777-c8e22fb5ff8a",
            "text": "Event 5"
        },
        {
            "start": "2013-03-04T00:00:00",
            "end": "2013-03-07T12:00:00",
            "id": "7c5d66f8-d00e-f289-31b0-10b256dd15c6",
            "text": "Event 6",
            "tags": {
                "type": "warning"
            }
        },
        {
            "start": "2013-03-03T00:00:00",
            "end": "2013-03-03T12:00:00",
            "id": "61631b1c-300c-a78c-4b83-ebda6e448ca4",
            "text": "Event 7"
        },
        {
            "start": "2013-03-02T00:00:00",
            "end": "2013-03-02T12:00:00",
            "id": "8757ccba-55af-03be-7405-57f1104b1750",
            "text": "Event 8"
        },
        {
            "start": "2013-03-02T00:00:00",
            "end": "2013-03-02T12:00:00",
            "id": "74641c6e-a2a2-15fe-f2f6-745318655745",
            "text": "Event 9"
        }
    ];

    dp.onBeforeEventRender = function(args) {
        var type = args.data.tags && args.data.tags.type;
        switch (type) {
            case "important":
                args.data.fontColor = "#fff";
                args.data.backColor = "#E06666";
                args.data.borderColor = "#E06666";
                break;
            case "note":
                args.data.fontColor = "#000";
                args.data.backColor = "#9FC5E8";
                args.data.borderColor = "#3D85C6";
                break;
            case "warning":
                args.data.fontColor = "#000";
                args.data.backColor = "#FFE599";
                args.data.borderColor = "#F1C232";
                break;
            case "complete":
                args.data.fontColor = "#000";
                args.data.backColor = "#B6D7A8";
                args.data.borderColor = "#6AA84F";
                break;
        }
    };

    dp.init();


</script>

<daypilot:daypilotmonth 
  id="DayPilotMonth1" 
  runat="server" 
  OnBeforeEventRender="DayPilotMonth1_BeforeEventRender" 
  ...
/>

protected void DayPilotMonth1_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;
  }
}

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

object source = e.DataItem.Source;

DataTagFields="type"

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

protected override void OnFinish()
{
  if (UpdateType == CallBackUpdateType.None)
  {
    return;
  }

  Events = new EventManager(Controller).Data.AsEnumerable();

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "name";
  DataValueField = "id";

}

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Html += " owner:" + e.DataItem["owner"];  // accessing the "owner" field from the data source
  e.BackgroundColor = (string) e.DataItem["color"];
}