Hi Alex,
Thanks a lot for your reply. So following your information - I am still trying to bring the code from your Customized Resource Filter Demo, over to the Resources Grouped demo, to make sure I understand everything I need to do. I added some code thanks to your follow up comment, but so far I am still not successful.
in my code below (used here: https://bryntum.com/products/calendar/examples/date-resource/)
I observe using my console warn that the ID of the resources grouped by date is numbered.
I try to grab the first one, as a test. in place of grabbing by id hotel.
This still gives me no resource results. What else am I missing?
import { Calendar } from '../../build/calendar.module.js?473100';
import shared from '../_shared/shared.module.js?473100';
const calendar = new Calendar({
appendTo : 'container',
date : new Date(2023, 3, 2),
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
crudManager : {
autoLoad : true,
loadUrl : 'data/data.json',
listeners : {
load() {
const { resourceFilter, showUnassigned } = calendar.widgetMap;
console.warn(calendar.resourceStore.getAt(0))
// Populate our resourceFilter with the resources available
resourceFilter.store = calendar.resourceStore;
resourceFilter.value = [resourceFilter.store.getById('1')];
// Our custom resource filter.
// We consult the resourceFilter and the showUnassigned switch.
calendar.resourceFilter = calendar.eventStore.addFilter({
id : 'custom-filter',
filterBy : event => event.resourceId ? resourceFilter.valueCollection.includes(event.resourceId) : showUnassigned.checked
});
},
prio : 1000,
once : true
}
},
resourceImagePath : '../_shared/images/users/',
modes : {
day : null,
week : null,
month : null,
year : null,
agenda : null,
dayresource : {
// Save a little space by hiding weekends.
hideNonWorkingDays : true,
// Configure a nice min-width for the resource columns
minResourceWidth : '10em',
// Demo uses more padding than default, switch to the short event duration "earlier" to fit contents
shortEventDuration : '1 hour'
}
},
sidebar : {
// Existing sidebar widgets can be customized and extra UI Widgets can be easily added too
items : {
datePicker : {
tbar : {
// Hide the next/prev year buttons for a bit cleaner UI
items : {
prevYear : false,
nextYear : false
}
}
},
// Override the default one.
resourceFilter : {
type : 'combo',
multiSelect : true,
listCls : 'custom-resource-filter',
// The value is the records selected
valueField : null,
// What narrowing by typing works on
displayField : 'name',
// Show the list fixed below
inlinePicker : true,
listItemTpl : resource => StringHelper.xss`
<div class="resource-list-text">
<div class="resource-name">${resource.name}</div>
<div class="resource-type">${resource.type}</div>
</div>
`,
listeners : {
// "up." means resolve in ownership chain. Will call on the Calendar
change : 'up.onFilterCriteriaChange',
// We have to filter after the Calendar has processed the change
prio : -1000
},
// We want the ChipView to scroll horizontally with no wrapping.
chipView : {
itemTpl : resource => StringHelper.xss`${resource.name}`,
scrollable : {
overflowX : 'hidden-scroll',
overflowY : false
},
style : {
flexWrap : 'nowrap'
}
}
}
}
},
tbar : {
items : {
hideEmptyresources : {
type : 'checkbox',
text : 'Hide unscheduled resources',
weight : 600,
checked : false,
style : 'margin : 0 1em',
// "up." means resolve in owner will call on the Calendar
onChange : 'up.onHideEmptyResourcesChanged'
},
showAvatars : {
type : 'checkbox',
text : 'Show avatar',
weight : 600,
checked : true,
style : 'margin : 0 1em',
// "up." means resolve in owner will call on the Calendar
onChange : 'up.onShowAvatarsChanged'
},
hideWeekends : {
type : 'checkbox',
text : 'Hide weekends',
weight : 600,
checked : true,
style : 'margin : 0 1em',
// "up." means resolve in owner will call on the Calendar
onChange : 'up.onHideWeekendsChanged'
},
viewWidth : {
type : 'slider',
text : 'Resource width',
weight : 640,
min : 4,
max : 35,
value : 10,
width : 150,
unit : 'em',
showValue : false,
showTooltip : true,
onInput : 'up.onResourceWidthChanged'
}
}
},
onHideEmptyResourcesChanged({ value }) {
this.activeView.hideEmptyResources = value;
},
onShowAvatarsChanged({ value }) {
this.activeView.showHeaderAvatars = value;
},
onHideWeekendsChanged({ value }) {
this.activeView.hideNonWorkingDays = value;
},
onResourceWidthChanged({ source : { unit }, value }) {
this.activeView.minResourceWidth = `${value}${unit}`;
}
});