ResourceView
Widget

A Calendar view which encapsulates a series of child Calendar views, one for each resource (often referred to as "calendar") in the project.

This view is a Panel which contains calendar views such as WeekView as child views. To configure the child views, use the view config.

The type of view displayed defaults to 'week', but this can be changed using the type property in the view config object.

Usage :

new Calendar({
    appendTo : domElement,

    // Resource avatar images are loaded from this path
    resourceImagePath : '../_shared/images/users/',

    modes : {
        // Let's not show the default views
        day    : null,
        week   : null,
        month  : null,
        year   : null,
        agenda : null,

        // Mode name can be anything if it contains a "type" property.
        monthResourceview : {
            // Type has the final say over which view type is created
            type : 'resource',

            // This is a config object for the subviews; one for each resource
            view : {
                // We show a month view for each resource in the project
                type : 'month'
            }
        }
    }
});

Useful configs

Config	Description
view	Config for child views (type, range, etc.)
resourceWidth	Width of each resource panel
showAvatars	Show resource avatar images in headers
meta	Field or function for subheader text
hideEmptyResources	Hide resource panels with no events

Configs

Configs are options you supply in a configuration object when creating an instance of this class

eventRenderer : Function/String
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.

You should never modify any records inside this method.
```
 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}`;
 }
```
Parameters
- context : Object
  
  An object that contains context about the event being rendered
- view : CalendarView
  
  The view rendering the event
- eventRecord : EventModel
  
  The event record
- resourceRecord : ResourceModel
  
  The Resource record
- renderData : Object
  
  A data object containing properties that will be used to create the event element
- style : Object
  
  The style property is an object containing style properties for the event element
- cls : Object
  
  The cls property is an object whose property names will be added to the event element if the property value is truthy
- iconStyle : Object
  
  The iconStyle property is an object containing style properties for the icon element if an icon element is to be used
- iconCls : Object
  
  The iconCls property is an object whose property names will be added to the icon element. Initially set from the event record's iconCls. Can be mutated by the renderer. If null, or no properties are set, no icon will be rendered
- eventColor : String
  
  Color to be applied to the event
- dataset : Object
  
  An object which produces the dataset of the resulting event bar
- solidBar : Boolean
  
  This is valid for views which create event bars This is set to true by default for all day and interday events so that these appear as a solid block of background color An eventRenderer may mutate this flag to change in what manner the event bar is colored, as a solid bar of color, or using the foreground colour (text and icons) such as the MonthView, the CalendarRow (all day events in a DayView), and OverflowPopups
- bodyColor : String
  
  When used in a DayView, this color is applied to the body of the event element. Note that this must be light enough that the text colour (From the SASS variable $dayview-event-color) is visible
- showBullet : Boolean
  
  If there is no iconCls, and the event is not recurring, then by default a "bullet" circular icon is shown if the view's showBullet if set. Setting this property in an event renderer overrides this behaviour
Returns

DomConfig/DomConfig[]/String/null
hideEmptyResources : Booleanfalse

Configure this as true to hide child views which have no events.

Has a corresponding runtime hideEmptyResources property.
hideNonWorkingDays : Boolean

Set to true to hide non-working days

Has a corresponding runtime hideNonWorkingDays property.
includeTimeRanges : Booleanfalse

When ResourceTimeRangeModels are included in the data, they are only rendered in subviews of ResourceViews and normal TimeRangeModels are not rendered in subviews of ResourceViews.

Set this to true to render normal TimeRangeModels in subviews of this view.

meta : String/Function

A field name or a function returning a string to be displayed below resource name in the resource view headers.

const calendar = new Calendar({
    modes : {
        // Mode name can be anything if it contains a "type" property.
        weekResources : {
            type  : 'resource',
            // Get meta string to display
            meta : resource => resource.title
        }
    }
});

Parameters

resource : ResourceModel

Displayed resource

Returns

String

Text to be displayed below resource name

range : String/DurationConfig

If the displayed view is a DateRangeOwner, this may be used to set the range of all child views.

Has a corresponding runtime range property.
resourceWidth : Number/String

The width of a resource calendar panel (view always stretches to fill window)

Has a corresponding runtime resourceWidth property.
showAvatars : Booleantrue

Display an avatar in the resource view headers, either as an image or using resource initials.

Looks for an image name in the imageUrl and image fields on the resource. Set resourceImagePath on Calendar to specify where to load images from. If no image is found, resource initials are displayed.
stableResourceOrder : Booleantrue

By default, the resource views are displayed in the order that the resources appear in the project's resourceStore, so they will appear in a stable position, meaning when a view is filtered out, then filtering it in will replace it in the same position.

If this config is false, re-adding a view will place it at the end.
view : WidgetConfig/Object

A config object used to configure the sub views. The default type used is 'weekview'

After instantiation, while in use, changes to the view property, will be propagated to all child views.

This property may be used to adjust properties of every child view of the resource view in one statement.

Has a corresponding runtime view property.
viewGap : String/Number0.5em

The space to leave between each subview.

Has a corresponding runtime viewGap property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isResourceView : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of ResourceView class, or subclass thereof.

dayViewScroller : Object

private

READONLY

This creates a specially styled DayView which matches the view config (so that dayStartTime, hourHeight etc. is synced) which shows nothing but its scrollbar. This acts as the single visible scrollbar on the right of the ResourceView. We cannot have the last DayViewoverflowY : true because then its flexed width being equal to the others, its content area would be scrollBarWidth narrower than the others.
dayViewTimeAxis : Number

private

READONLY

This creates a specially styled DayView which matches the view config (so that dayStartTime, hourHeight etc. is synced) which shows nothing but its time axis. This acts as the single visible time axis on the left.
fixedDuration : Boolean

READONLY

Returns the value of the child view's fixedDuration property.
hideEmptyResources : Booleanfalse

Configure this as true to hide child views which have no events.

Has a corresponding hideEmptyResources config.
hideNonWorkingDays : Boolean

Set to true to hide non-working days

Has a corresponding hideNonWorkingDays config.
range : String/DurationConfig

If the displayed view is a DateRangeOwner, this may be used to set the range of all child views.

Has a corresponding range config.
resourceWidth : Number/String

The width of a resource calendar panel (view always stretches to fill window)

Has a corresponding resourceWidth config.
view : WidgetConfig/Object

A config object used to configure the sub views. The default type used is 'weekview'

After instantiation, while in use, changes to the view property, will be propagated to all child views.

This property may be used to adjust properties of every child view of the resource view in one statement.

Has a corresponding view config.
viewGap : String/Number0.5em

The space to leave between each subview.

Has a corresponding viewGap config.
views : CalendarMixin[]

READONLY

Yields the views which this ResourceView owns.
isResourceView : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of ResourceView class, or subclass thereof.

Functions

Functions are methods available for calling on the class

eachView( fn, args, thisObj )

Executes the passed function for each child view corresponding to each resource in the resourceStore.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

refresh

Fires when this ResourceView refreshes.
viewCreate

Fires when a new sub view is created.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onRefresh

Called when this ResourceView refreshes.
onViewCreate

Called when a new sub view is created.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-resource-view-header-height	Resource header height

type: resourceview

Source path

Calendar/widget/ResourceView.js

Demo

examples/resourceview

ResourceView
Widget

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree5

Mixins9

Contents

ResourceView Widget

Useful configs

See also

Configs

Parameters

Returns

Parameters

Returns

Properties

Functions

Events

Event handlers

CSS variables

Source path

Demo

Inheritance tree5

Mixins9

Contents

ResourceView
Widget