Full Calendar customizable header

Question

I have used the following attribute in the code as shown below :-

columnHeaderFormat: {
                    weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true
                }

It shows somewhat like this

Now as i want to achieve header customization with Week 1, Week 2 and so on for the current month below it days like Mon to Sun here is a example below

As i want to retain my resources on left as shown also which should not be removed as well.

how can we change header date format to UK date format (day / month / year) ? — Kamlesh, Sep 13 '20 at 09:32

score 2 · Answer 1 · answered Jan 03 '20 at 13:41

You can achieve this fairly straightforwardly.

However it's important to realise that columnHeaderFormat is no use in a Timeline view, because what goes along the horizontal header bars are not columns (representing days, as they would in a TimeGrid view), but actually the timeslots (which are normally along the left-hand side vertically in a TimeGrid view).

Therefore you need to use the slotLabelFormat setting to adjust the appearance. To get two horizontal bars in the heading (as per your example screenshots), you can set two separate settings in the format option:

slotLabelFormat: [
  { week: "short" }, // top level of text
  { weekday: "short" } // lower level of text
],

Working demo: https://codepen.io/ADyson82/pen/ZEYaXmJ?&editable=true&editors=001

Relevant documentation:

how can we change header date format to UK date format (day / month / year) in full calendar 4 version ? Please suggest. Thanks. — Kamlesh, Sep 13 '20 at 09:32
@Kamlesh if you have a new question please use the Ask Question feature and tag it with fullCalendar. Your request is not closely related to this question here. But first, please read https://fullcalendar.io/docs/locale — ADyson, Sep 14 '20 at 08:09

score 1 · Answer 2 · answered Jan 03 '20 at 14:09

It turns out, resourceTimeline doesn't have the columnHeaderFormat option. Instead, it has slotLabelFormat, which is an array of two Date Formatters. One for the top label, another for the bottom label.

Add the following to the options. I made the week format "short". I also made a fiddle.

views: {
            resourceTimelineWeek: {
                type: "resourceTimelineWeek",
                slotDuration: {days: 1},
                slotLabelInterval: {days: 1},
                slotLabelFormat: [
                    {week: 'short', omitCommas: true}, // top level of text
                    {day: 'numeric'} // lower level of text
                ]
            }
        }

how can we change header date format to UK date format (day / month / year) in full calendar 4 version ? Please suggest. Thanks. — Kamlesh, Sep 13 '20 at 09:32

Full Calendar customizable header

2 Answers2