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