-1

I have two resourcearea-columns in my fullcalender (version 5) set like this:

resourceAreaColumns: [
      {
        group: true,
        field: 'depot',
        headerContent: 'HL',
      },
      {
        field: 'title',
        headerContent: 'LKW'
      }
    ],
resourceAreaWidth: '10%',

Also, as you can see, I want the whole resource area to be 10%. Is it possible to also set the individual width of the two columns? I would need depots to be 30% and title 70%. So intuitively something like:

resourceAreaColumns: [
      {
        group: true,
        field: 'depot',
        headerContent: 'HL',
        width: '30%'
      },
      {
        field: 'title',
        headerContent: 'LKW',
        width: '70%'
      }
    ],
resourceAreaWidth: '10%',
Alex
  • 81
  • 6

1 Answers1

0

Yes you can. This is already described in the documentation at https://fullcalendar.io/docs/resourceAreaColumns:

width: the width of the column, either in a number of pixels or a string percentage like "50%"

So all you need to specify is

resourceAreaColumns: [
  {
    group: true,
    field: "depot",
    headerContent: "HL",
    width: "30%"
  },
  {
    field: "title",
    headerContent: "LKW",
    width: "70%"
  }
],
resourceAreaWidth: "10%",

exactly as you showed in your question. It was unclear whether you've tested this already and/or found any kind of issue in your environment.

Working demo: https://codepen.io/ADyson82/pen/abGrOXP

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • Thanks to your comment I tried again. However it wont work with a string. I needed to put it as number and without the percentage sign (width: 30 and width: 70). Thank you. – Alex Oct 18 '22 at 14:23
  • @Alex is this because you're using Angular, maybe? Or an earlier version of fullCalendar or something? As you can see, my demo works as documented. If you want help with that, we'd need a [mre] of the issue. – ADyson Oct 18 '22 at 14:26