html5 monthly event calendar 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>

ASP.NET WebForms

Example

.aspx

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

.aspx.cs

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

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

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