Skip to main content

CalendarList

Calendar list component
(code example)

info

This component extends Calendar, FlatList props.

API​

pastScrollRange​

Max amount of months allowed to scroll to the past

number

futureScrollRange​

Max amount of months allowed to scroll to the future

number

calendarStyle​

Specify style for calendar container element

ViewStyle

calendarHeight​

Dynamic calendar height

number

calendarWidth​

Used when calendar scroll is horizontal, (when pagingEnabled = false)

number

staticHeader​

Whether to use a fixed header that doesn't scroll (when horizontal = true)

boolean

showScrollIndicator​

Whether to enable or disable vertical / horizontal scroll indicator

boolean

Calendar List Examples​


<CalendarList/> is scrollable semi-infinite calendar composed of <Calendar/> components. Currently it is possible to scroll 4 years back and 4 years to the future. All parameters that are available for <Calendar/> are also available for this component. There are also some additional params that can be used:

<CalendarList
  // Callback which gets executed when visible months change in scroll view. Default = undefined
  onVisibleMonthsChange={(months) => {console.log('now these months are visible', months);}}
  // Max amount of months allowed to scroll to the past. Default = 50
  pastScrollRange={50}
  // Max amount of months allowed to scroll to the future. Default = 50
  futureScrollRange={50}
  // Enable or disable scrolling of calendar list
  scrollEnabled={true}
  // Enable or disable vertical scroll indicator. Default = false
  showScrollIndicator={true}
  ...calendarParams
/>

Horizontal CalendarList​

You can also make the CalendarList scroll horizontally. To do that you need to pass specific props to the CalendarList:

<CalendarList
  // Enable horizontal scrolling, default = false
  horizontal={true}
  // Enable paging on horizontal, default = false
  pagingEnabled={true}
  // Set custom calendarWidth.
  calendarWidth={320}
  ...calendarListParams
  ...calendarParams
/>