Sort resource items in fullCalendar with Room

Published

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.

Source: Angular Questions

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq