Custom Date Range View

The scheduler has three types: day, week and month. Use the size property of the configuration object to set the length of the range.

Multiples of days, weeks and months are supported. The reference date, controlled through the refDate option, is today by default, but it can be set to any date, like the first day of the month, or the first day of the year. The refDate serves as the start of the reference range. From that point on you can navigate forward and backward.

A couple of examples:

  • Rolling two weeks - use type: 'day' and size: 14
  • Rolling ten days - use type: 'day' and size: 10
  • Two weeks (starting with Sun/Mon) - use type: 'week' and size: 2
  • Quarter view, starting from January - use type: 'month' and size: 3 with refDate: '2021-01-01'
  • Rolling three months - use type: 'month' and size: 3
  • Year view - use type: 'month' and size: 12 with refDate: '2021-01-01'
Download and try example

Demo

Configure the page size
Display
Display
Display
If unset, the initial view date is today
If unset, the reference date is today
If unset, the reference date is today
Javascript jQuery Angular React Vue 
mobiscroll.eventcalendar('#calendar', {
  view: {
    scheduler: { 
      type: 'day',
      size: 15
    }
  },
  refDate: '',
  selectedDate: ''
});
Preview in fullscreen
Configure the Scheduler with a custom range size — set a reference date to control rolling or fixed multi-period paging.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.