DayResourceCalendarRow

Widget

A callback function which an application may provide to filter out resource columns for particular dates.

Has a corresponding runtime resourceDateFilter property.

A function, or name of a function which renders extra content below the resource avatar/name.

const calendar = new Calendar({
    appendTo : 'container',
    date     : new Date(2025, 3, 1),

    mode  : 'dayresource',
    modes : {
        dayresource : {
            allDayEvents : {
                // Render some extra summary content in the area below each resource header.
                resourceHeaderExtraRenderer(resource, { resourceDayEvents }) {
                    const
                        [dayValue, dayTravelTime] = resourceDayEvents.reduce((v, eventRecord) => {
                            v[0] += eventRecord.value || 0;
                            v[1] += eventRecord.travelTime || 0;
                            return v;
                        }, [0, 0]);

                    return `
                        <div class="header">Appointments</div>
                        <div class="value appointments">${resourceDayEvents.length}</div>
                        <div class="header">Route Value</div>
                        <div class="value dayValue">${dayValue}</div>
                        <div class="header">Travel Time</div>
                        <div class="value travelTime">${DateHelper.format(new Date(2024, 0, 1, 0, dayTravelTime), 'H:mm') || ''}</div>
                   `;
                },
            }
        }
    }
});

A function, or name of a function which lets you fully replace the HTML shown in the resource header. By default, a resource avatar and the resource name is shown.

const calendar = new Calendar({
    appendTo : 'container',
    date     : new Date(2025, 3, 1),

    mode  : 'dayresource',
    modes : {
        dayresource : {
            allDayEvents : {
                // Render custom HTML into the resource header.
                resourceHeaderRenderer(resource, { view : { owner }, key }) {
                    return `<strong>${resource.name}</strong>`;
                }
            }
        }
    }
});

Configure as true to show avatars of the resources (calendars) alongside resource names in resource column headers.

Configure as 'last' to show avatars of the assigned resources (calendars) after the name.

Note that you must set resourceImagePath in order that the system knows where to access the resource's image file from.

If no image is set, or the image is not found, the resource's initials are shown instead.

By default, it is inherited from the owning Calendar:

new Calendar({
    resourceImagePath   : 'images/resources/'
    modes : {
        dayresource : {
            showHeaderAvatars : true,
        }
    }
});