CODEWITHSUNDEEP
javascriptfullcalendarfullcalendar-schedulerfullcalendar-4
namco
namco

Reputation: 155

Full Calendar customizable header

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 Done using attribute

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

Image example

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

Upvotes: 2

Views: 4833

Answers (2)

Hurried-Helpful
Hurried-Helpful

Reputation: 2000

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
                ]
            }
        }

Upvotes: 1

ADyson
ADyson

Reputation: 61819

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:

Upvotes: 2

Related Questions