Restricting Group Combinations in DevExtreme Scheduler for React

28 Views Asked by At

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: enter image description here

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?

0

There are 0 best solutions below