React Range Range Picker Customization

The calendar view can be customized with a couple of different parameters:

  • Month or week calendar - switch between month and week through the calendarType option and set the number of months or weeks through the pages and calendarSize options
  • Set a month change direction - specify 'horizontal' or 'vertical' in the calendarScroll option
  • Show week numbers - set the showWeekNumbers to true and show a week counter starting from the first week of every year
  • Hide the outer days of a month - set the showOuterDays to false in case you don't want to see days from previous and next months
Get started with this example

Demo

Configure month or week view
Month view with
months
Week view with
weeks
Show annual week numbers
Week counter is visible
Set a scrolling direction
Show days of outer months
Outer days are visible
Javascript jQuery Angular React Vue 
<Datepicker
    select="range"
    calendarType="month"
    pages={1}
    calendarSize={1}
    showWeekNumbers={false}
    calendarScroll="horizontal"
    showOuterDays={true}
/>

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.