DayResourceView
A calendar view showing resources grouped by date, it is normally used as a mode of a Calendar but may be used standalone as a regular Widget.
By default, it shows a one-week range encapsulating the Calendar's current date. This can be configured using the range config property.
//<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
196
Configs
196Other
Configure this as true to hide resource columns which contain no events.
By default, when a resource leaf column drops to below 100 pixels wide, the resource avatar hides.
Configure this as true to hide resource name when the resource leaf column width
drops below 100 pixels wide.
The minimum width of a resource column. This must be a non-zero value to ensure that space is allocated even when there are many resources and a narrow viewport.
The default value is 4em
If the day columns columns overflow the horizontal space available, the columns will be scrollable horizontally in the normal way.
There is a horizontalScroller property which handles scrolling in this dimension.
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. |
Return false to not display a column for the passed resource at the passed date.
By default, resource avatars are shown in the resource header if there is horizontal space.
Configure this as false to inhibit this.
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,
}
}
});
Content
CSS
DOM
Float & align
Layout
misc
Misc
Scrolling
Properties
167
Properties
167Common
Class hierarchy
Other
Configure this as true to hide resource columns which contain no events.
By default, when a resource leaf column drops to below 100 pixels wide, the resource avatar hides.
Configure this as true to hide resource name when the resource leaf column width
drops below 100 pixels wide.
The minimum width of a resource column. This must be a non-zero value to ensure that space is allocated even when there are many resources and a narrow viewport.
The default value is 4em
If the day columns columns overflow the horizontal space available, the columns will be scrollable horizontally in the normal way.
There is a horizontalScroller property which handles scrolling in this dimension.
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. |
Return false to not display a column for the passed resource at the passed date.
By default, resource avatars are shown in the resource header if there is horizontal space.
Configure this as false to inhibit this.