How to set fullcalendar view to start 1 week before the current date?

Question

I'm using Vue version of fullcalendar.io (v5) Resource Timeline View with a custom view object passed via settings and I can't figure out how to set it up so that the calendar start 1 week before the current date. I've tried initialDate, activeStart, visibleRange options with no luck. It just starts at the beginning of the current month no matter what. Relevant settings code:

    views: {
        resourceTimelineThreeMonths: {
            type: 'resourceTimeline',
            duration: { months: 3 },
            activeStart: '2021-03-06',
            initialDate: '2021-03-06',
            // dayCount: 40,
            visibleRange: {
              start: '2021-3-6',
              end: '2021-5-13'
            },
        }
    },
    expandRows: true, 
    plugins: [
      resourceCommonPlugin,
      resourceTimelinePlugin,
      interactionPlugin,
    ],

    schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
    initialView: "resourceTimelineThreeMonths"

score 3 · Accepted Answer · answered Mar 13 '21 at 23:21

It seems that if you set the duration value using months as the denominator, fullCalendar takes this as a sign that you want a month to be the core block of time by which the calendar is set, and that the initialDate is simply a date which falls into that period.

If you use a smaller time denomination, then it's more flexible - e.g. using weeks will allow it to start at the beginning of the nearest week instead of the beginning of the nearest month. If you use days as the denominator then you have even more flexibility.

If you set a duration value then visibleRange has no effect. duration takes precedence over it.

Also, initialDate isn't a view-specific option, it must be specified as a global option, rather than within the settings for a particular view, otherwise it has no effect.

So you would end up with settings something like this:

views: {
  resourceTimelineThreeMonths: {
    type: "resourceTimeline",
    duration: { weeks: 12 },
  }
},
initialDate: "2021-03-06",
//...etc

Demo using weeks: https://codepen.io/ADyson82/pen/OJbqJxZ

Demo using days: https://codepen.io/ADyson82/pen/wvoOvpx

Demo using a static visibleRange: https://codepen.io/ADyson82/pen/rNWRNJa

P.S. There's no such option as activeStart, not sure where you got that one from?

Thanks a lot !! I will give it a try asap! I'm sooo confused with all the options. The activeStart is here fullcalendar.io/docs/view-object but I now realize that's just readonly fields of the View object as it's passed into handlers — ihor.eth, Mar 14 '21 at 02:12
Setting duration to days worked! Did you open an issue with fullcalendar github repo by any chance ? I wonder if it;s a bug or by design — ihor.eth, Mar 14 '21 at 02:35
I didn't open an issue for it no. I would guess maybe it's by design because it seems like there's a pattern, but I don't know for sure. You could open an issue to ask if you wanted. Glad it helped anyway. — ADyson, Mar 14 '21 at 07:46

How to set fullcalendar view to start 1 week before the current date?

1 Answers1