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