This is my resource and event items:

const resourceItems = [
  { "id": "c", "title": "Resource 1", sort1: 10, sort2: 7},
  { "id": "d", "title": "Resource 2", sort1: 14, sort2: 5},
  { "id": "e", "title": "Resource 3", sort1: 18, sort2: 3}
]

const eventItems = [
  { "resourceId": "c", "title": "event 1", "start": "2022-01-12T10:20", "end": "2022-01-12T12:20" },
  { "resourceId": "d", "title": "event 2", "start": "2022-01-12T14:20", "end": "2022-01-12T16:20" },
  { "resourceId": "d1", "title": "inner event 1", "start": "2022-01-12T08:00", "end": "2022-01-12T16:00" },
  { "resourceId": "d2", "title": "inner event 2", "start": "2022-01-12T01:00", "end": "2022-01-12T10:00" },
  { "resourceId": "e", "title": "event 3", "start": "2022-01-12T10:50", "end": "2022-01-12T15:35" },
]

If I want to sort resource items (without Rooms), I can do that, with the following commands:

  public calendarOptions: CalendarOptions=options


  ngOnInit() {
    this.calendarOptions.events = eventItems;
    this.calendarOptions.resources = resourceItems;
  }

  public sortHandler = (prop: "sort1" | "sort2") => this.calendarOptions["resourceOrder"] = prop

Finally, my html:

<div class="col-md-12">
    <button type="button" (click)="sortHandler('sort1')">Sorting-1</button>
    &nbsp;
    <button type="button" (click)="sortHandler('sort2')">Sorting-2</button>
</div>


<div class="col-md-12">
    <full-calendar #clientCalendar [options]="this.calendarOptions" timezone='"local"' locale='en-gb'>
    </full-calendar>
</div>

My Problem is: If I add children(Rooms) to resource items, I can not do sort.

const resourceItems = [
  {
    "id": "c", "title": "Resource 1", sort1: 10, sort2: 7,
    "children": [
      { "id": "c1", "title": "Room RS-11" },
      { "id": "c2", "title": "Room RS-12" }
    ]
  },
  {
    "id": "d", "title": "Resource 2", sort1: 14, sort2: 5,
    "children": [
      { "id": "d1", "title": "Room RS-21", },
      { "id": "d2", "title": "Room RS-22", }
    ]
  },
  {
    "id": "e", "title": "Resource 3", sort1: 18, sort2: 3,
    "children": [
      { "id": "e1", "title": "Room RS-31" },
      { "id": "e2", "title": "Room RS-32" }
    ]
  }
]

The following handler does not work:

  public sortHandler = (prop: "sort1" | "sort2") => this.calendarOptions["resourceOrder"] = prop

How can I achieve that?

Any help will be appreciated.