javascriptfullcalendarfullcalendar-premium

How to create 2 row titles? First for year and second for quarters


I'm implementing a 5 year view in resourceTimeline type.

resource5YearsSlide: {
    type: 'resourceTimeline',
    buttonText: '5 Years',
    dateIncrement: {
      year: 1
    },
    slotDuration: {
      month: 3
    },
    slotLabelInterval: {
      month: 3
    },

    slotLabelFormat: function(arg) {
      const date = new Date(arg.date.marker);
      const month = date.getMonth();
      const year = date.getFullYear();
      const quarter = Math.floor(month / 3) + 1;
      return 'T' + quarter + ' ' + year;
    },
    visibleRange: function(currentDate) {
      const start = new Date(currentDate);
      start.setMonth(0);
      start.setDate(1);
      const end = new Date(currentDate);
      end.setFullYear(start.getFullYear() + 4);
      end.setMonth(11); // Décembre
      end.setDate(31);
      return {
        start: start.toISOString(),
        end: end.toISOString()
      };
    }
  },

This works great, but I would find a way to have a 2 row titles, first for year, and second for quarters.

I've tried :

  slotLabelFormat: [{
      year: 'numeric',
    },
    {
      custom: function(arg) {
        // Conversion explicite en objet Date natif
        const date = new Date(arg.date.marker);
        const month = date.getMonth();
        const quarter = Math.floor(month / 3) + 1;
        return 'T' + quarter;
      }
    }
  ],

and other key instead of 'custom', but the function is not called at all, but the year row well printed.

Is there any way to circumvent that?


Solution

  • As you've noticed, the Timeline view supports an array of values for the slotLabelFormat setting (as per https://fullcalendar.io/docs/slotLabelFormat).

    Each item in that array must be something which is compatible with fullCalendar's Date formatter specification.

    Therefore, if you want complete control of the second row you can provide a callback function which returns a string instead of a hard-coded config object, as mentioned in the date formatting documentation.

    You had attempted this but the syntax was wrong - the function definition should entirely replace the object, not be in a property within that object (because fullCalendar has no expectation of that, and won't know to look for it there).

    This version will work:

    slotLabelFormat: 
    [
        { year: "numeric" },
        function(arg) {
            // Conversion explicite en objet Date natif
            const date = new Date(arg.date.marker);
            const month = date.getMonth();
            const quarter = Math.floor(month / 3) + 1;
            return 'T' + quarter;
        }
    ],
    

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