EventRenderer

A function, or the name of a function in the ownership hierarchy which you can specify to customize event DOM content.

This function is called each time an event is rendered to produce the header DOM structure which precedes the body content (Event name).

In DayView (WeekView is a DayView), the default event header is the event's start, and/or end, and/or duration depending on the showTime setting. Times are formatted according to the timeFormat

Other views produce horizontal event bars, and do not have a seperate event header element.

Default behaviour can be overridden by specifiying this property.

The defaultEventHeaderRenderer returns a DomConfig object in the following form:

{
    className : 'b-event-header',
    children  : [{
        className : 'b-event-time',
        text      : '11:00'
    }]
}

An application could augment this to add a UTC time string like this:

eventHeaderRenderer({ view, eventRecord }) {
    const
        utcString = TimeZoneHelper.fromTimeZone(eventRecord.startDate, view.project.timeZone).toISOString().substring(11, 16),
        result    = this.defaultEventHeaderRenderer(...arguments);

    result.children.push({
        className : 'b-event-utc',
        text      : `UTC: ${utcString}`,
    });
    return result;
}

Or it could produce completely custom content, such as a flexible start time:

 eventHeaderRenderer({ eventRecord }) {
     return [{
         class : 'flexible-start',
         text  : DateHelper.format(eventRecord.startDate, '{Around} hh:mm')
     }, {
         class : 'status-indicator fa',
         text  : eventRecord.completed ? '\xf00c' : '\xf00d'
     }];
 }

It is passed all the same data as the eventRenderer function, so it can also affect the renderData object to change the style, classes, and other properties of the main event bar element.

A function, or the name of a function in the ownership hierarchy which you can specify to customize event DOM content.

This function is called each time an event is rendered to allow developers to mutate the cell metadata, or the CSS classes to be applied to the event element.

It's called with the event record, and a eventData object which allows you to mutate event metadata such as cls, style.

The cls property is an object whose property names will be added to the event element if the property value is truthy.

The style property is an object containing style properties for the event element.

A non-null return value from the renderer is used as the event body content. A nullish return value causes the default renderer to be used which just uses the event name.

If a string is returned, it is used as the HTML content of the event body element.

If an object is returned, it is used as a DomConfig object to create complex content in the event body element.

 eventRenderer({ eventRecord, renderData }) {
     if (eventRecord.name === 'Doctors appointment') {
         renderData.style.fontWeight = 'bold';
         renderData.cls['custom-cls'] = 1;

         return 'Special doctors appointment';
     }
 }

IMPORTANT: When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.

For example:

 eventRenderer({ eventRecord }) {
     return StringHelper.xss`Event: ${eventRecord.name}`;
 }

Event background and text colors

The background bar of the event may be customized by setting the eventBackground property and the text color by setting the textColor property in the renderData object:

modes : {
    month : {
        eventRenderer({ renderData }) {
            // Set the background to a gradient based on the event color
            renderData.eventBackground = 'linear-gradient(to right, var(--cal-event-color), color-mix(in srgb, var(--cal-event-color), #ffffff 60%))';

            // Set the text color to a contrasting CSS color
            renderData.textColor = 'darkolivegreen';
        }
    }
}

If this is set to true, then when determining which assigned resource of a multi assigned event to use to create the event UI, the first resource which is still selected in the resourceFilter is used.

The default is to use the first resource in the assigned list.

The resource's eventColor is used as the color for the event unless the event has its own eventColor.

The resource's eventStyle is used as the base of the style for the event, and the event's style is applied to it.

A Function (or name of a function in the ownership hierarchy) which returns the resource record to use to create the UI for an event.

The resource's eventColor is used as the color for the event unless the event has its own eventColor.

The resource's eventStyle is used as the base of the style for the event, and the event's style is applied to it.

For views which are linked to a single resource such as ResourceView and DayResourceView, the default implementation always returns the view's resource.

If multi assignment is used, the default is to pick the first resource in the assigned resource list.

If this view's filterEventResources is true, then the first assigned event which is still filtered in is chosen.

An implementation of this function may be configured in to your modes to customize how the resource is chosen from a multi assigned event.

Returns a CSS style value value for the passed color name.

If the name is a bryntum-defined color in the current theme, the value of that variable is returned, for example --cal-color-red.

If the name is not a bryntum-defined color, the name is returned unchanged.

This is the standard way to create a DomConfig element definition object for creating event bars in all view types.

This may be used by application code which needs to create DOM structure for event bars, such as in custom cell renderers in an AgendaView.

The default event header renderer which is used if no eventHeaderRenderer is specified.

This is used in the DayView (WeekView is a DayView), and produces a header with the event's start time, and optionally the end time, or duration if the view's showTime is set.