I am trying to display FullCalendar withing a certain date range. To do so I added the following visibleRange option to my code but it is not working. The calendar is simply not displaying.

this.$calendar.fullCalendar({
  //other settings
            
  defaultView: 'basic',
  visibleRange: {
    start: moment('2017-05-22'),
    end: moment('2017-05-29')
  },
  duration: { days: 7 },
            
  //other settings
});

I am trying to display FullCalendar withing a certain date range. To do so I added the following visibleRange option to my code but it is not working. The calendar is simply not displaying.

this.$calendar.fullCalendar({
  //other settings
            
  defaultView: 'basic',
  visibleRange: {
    start: moment('2017-05-22'),
    end: moment('2017-05-29')
  },
  duration: { days: 7 },
            
  //other settings
});

Any idea how I can achieve this?

Thanks

• javascript
• jquery
• fullcalendar
• momentjs

• 1 What version of jQuery/momentjs/fullcalendar are you using? Also, this.$calendar.fullCalendar syntax... are you using something else in the mix? Did you try invoking it as this.$calendar.fullCalendar(); and seeing if the calendar displays? Checked the console for any errors or warnings? – smcd Commented May 9, 2017 at 18:47
• I am using fullCalendar 3.0.1 backbone.js 1.2.3 moment.js 2.9.0 this.$calendar.fullCalendar(); is for calling full calendar in backbone. Console did not show any errors in particalurAR – lucasboko Commented May 9, 2017 at 19:57

1 Answer 1

Using momentjs 2.18.1, jquery 3.2.1, fullcalendar 3.4.0 this shows the view from 5/22 through 5/28:

  $('#calendar').fullCalendar({
    defaultView: 'basic',
    visibleRange: {
      start: moment('2017-05-22'),
      end: moment('2017-05-29')
    } // Don't use duration in bination with visibleRange? Appears to override
    /*,
    duration: {
      days: 7
    }*/
  });

Demo @ https://jsfiddle/ez33y8gv/