javascriptfullcalendar

Full Calendar resource timeline month header for custom view

I want to get the month header for custom resource timeline view.

This is my view option:

initialView: "customViewMinute",
views: {
    customViewMinute: {
        type: "resourceTimeline",
        buttonText: ':15 slots',
        slotDuration: '00:15',
        visibleRange: {
            start: startDate,
            end: endDate,
        },
    },

Here is now it look like - selected January 1 to January 31.

Here is the month header that I am looking to do, like timelineYear:

I read the documentation and searched if someone had implemented it before.

Solution

  • As per the slotLabelFormat documentation, for timeline views you can provide an array of settings to create a multi-level label.

    So in your case, you could write:

    slotLabelFormat: [
  { month: "long" }, // top level of text
  { weekday: "narrow", day: "numeric" } // lower level of text
]

    Live demo: https://codepen.io/ADyson82/pen/rNXowjr