multiple resource column in fullcalendar

Question

How can I add multiple resource column in full calendar scheduler

resources: [
    { id: 'a', title: 'Room A' },
    { id: 'b', title: 'Room B' },
    { id: 'c', title: 'Room C' },
    { id: 'd', title: 'Room D' }
],
resources: [
    { id: 'a', title: 'Room A Info' },
    { id: 'b', title: 'Room B Info' },
    { id: 'c', title: 'Room C Info' },
    { id: 'd', title: 'Room D Info' }
]

Something like this with 2 or more resource column.

Answer 1

You haven't said exactly what you want the output to be , but to get the effect I think you want, you can use resource groups. Specify the following in your calendar options:

resourceGroupField: 'groupId',
resources: [
    {
        id: 1,
        groupId: 'a',
        title: 'Room A'
    },
    {
        id: 2,
        groupId: 'b',
        title: 'Room B'
    },
    {
        id: 3,
        groupId: 'c',
        title: 'Room C'
    },
    {
        id: 4,
        groupId: 'd',
        title: 'Room D'
    },
    {
        id: 5,
        groupId: 'a',
        title: 'Room A Info'
    },
    {
        id: 6,
        groupId: 'b',
        title: 'Room B Info'
    },
    {
        id: 7,
        groupId: 'c',
        title: 'Room C Info'
    },
    {
        id: 8,
        groupId: 'd',
        title: 'Room D Info'
    }
]

See https://fullcalendar.io/docs/resource_rendering/resourceGroupField/ for more info.

Answer 2

 resourceAreaColumns: [
  {
    field: 'field-one',
    headerContent: 'heading-one'
  },
  {
    field: 'field-two',
    headerContent: 'heading-two'
  }
],