DayResourceCalendarRow

This is normally used as the "All day events" section of a DayResourceView. It is not designed to be used standalone as a regular Widget.

A Widget which displays date and resource headers, and all day events at the top of a DayResourceView.

Cell rendering can be customized using the dayCellRenderer method.

Event rendering can be customized using the eventRenderer method.

Day resource view

//<code-header>
fiddle.title = 'Day resource view';
//</code-header>
const dayView = new DayResourceView({
    appendTo         : targetElement,
    height           : 500,
    startDate        : new Date(2020, 8, 2),
    endDate          : new Date(2020, 8, 5),
    dayStartTime     : 6,
    dayEndTime       : 19,
    visibleStartTime : 6,
    resources        : [
        {
            id         : 1,
            name       : 'John',
            eventColor : 'blue'
        },
        {
            id         : 2,
            name       : 'Mike',
            eventColor : 'orange'
        },
        {
            id         : 3,
            name       : 'Lisa',
            eventColor : 'red'
        }
    ],
    events : [
        { startDate : '2020-09-02T00:00', duration : 5, durationUnit : 'd', name : 'Boss vacation', eventColor : 'red', resourceId : 1 },
        { startDate : '2020-09-02T07:00', duration : 5, durationUnit : 'h', name : 'Walk the dog', eventColor : 'yellow', resourceId : 2 },
        { startDate : '2020-09-03T09:00', duration : 2, durationUnit : 'h', name : 'Buy masks', eventColor : 'orange', resourceId : 2 },
        { startDate : '2020-09-04T07:00', duration : 1, durationUnit : 'h', name : 'Zoom meeting', eventColor : 'deep-orange', resourceId : 3 },
        { startDate : '2020-09-05T09:00', duration : 1, durationUnit : 'h', name : 'Get a haircut', eventColor : 'gray', resourceId : 3 }
    ]
});

Configs

145

Common

listenersEvents

Other

hideEmptyResources: Boolean= falseAlso a property

Configure this as true to hide resource columns which contain no events.

Use with care. This may result in no resource columns being rendered for completely empty dates.

resourceDateFilter: function | StringAlso a property

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

Parameter	Type	Description
`context`	DayCell	Information about the day column to be created.

Returns: Boolean -

Return false to not display a column for the passed resource at the passed date.

resourceHeaderExtraRenderer: function | String

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>
                   `;
                },
            }
        }
    }
});

Parameter	Type	Description
`resourceRecord`	ResourceModel	The resource record
`eventRecords`	EventModel[]	The events for the passed resource for the date column.
`cellData`	DayCell	An object that contains data about the cell

Returns: String

resourceHeaderRenderer: function | String

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

Parameter	Type	Description
`resourceRecord`	ResourceModel	The resource record
`cellData`	DayCell	A `DayCell` object that contains data about the cell

Returns: String

showHeaderAvatars: Boolean | last= true

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

activationKeyCalendarMixin

allowDragCreateCalendarMixin

allowDragMoveCalendarMixin

allowDragResizeCalendarMixin

animateCalendarRow

animateTimeShiftCalendarMixin

autoCreateCalendarMixin

autoHeightCalendarRow

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

compactHeaderCalendarRow