I am using the React Scheduler for Material-UI by DevExtreme to facilitate sports hall bookings for multiple venues.
Following the grouping example from the documentation this is possible by using Resources and GroupingState. Code example:
const halls = [
{ id: 'Halle 1', text: 'Halle 1' },
{ id: 'Halle 2', text: 'Halle 2' },
{ id: 'Halle 3', text: 'Halle 3' },
]
const section = [
{ text: 'Teil 1', id: 1 },
{ text: 'Teil 2', id: 2 },
{ text: 'Teil 3', id: 3 },
];
const grouping = [{
resourceName: 'halls',
}, {
resourceName: 'section',
}];
return (
<Paper>
<Scheduler
data={[]}
>
<ViewState
defaultCurrentDate={new Date()}
/>
<EditingState
onCommitChanges={() => { }}
/>
<GroupingState grouping={grouping} />
<DayView
startDayHour={8}
endDayHour={22}
intervalCount={1}
/>
<Appointments />
<Resources
data={[{
fieldName: 'halls',
title: 'Hallen',
instances: halls,
}, {
fieldName: 'section',
title: 'Teil',
instances: section,
allowMultiple: true,
},
{
fieldName: 'team',
title: 'Team',
instances: [
{ id: 1, text: 'Team 1' },
{ id: 2, text: 'Team 2' },
{ id: 3, text: 'Team 3' },
],
}
]
}
/>
<IntegratedGrouping />
<IntegratedEditing />
<GroupingPanel />
<AppointmentForm />
</Scheduler>
</Paper>
)
This is creating a scheduler like this:

I have a group representing the halls and another group representing the sections or parts of each hall. However, there are restrictions in group combinations. For example, Hall 2 does not have 3 sections but only two. So I don't want to display the whole group for Hall 2. Is it possible to restrict which parts of the group are visible depending on the value of the other group?
I have already experimented with and customized DayView components like TimeTableLayout. I manually removed children and manipulated cellsData. However, this is a lot of work and not feasible for me. Is there a simple solution to achieve this?