importReactfrom'react';import{render}from'react-dom';importInfiniteCalendarfrom'react-infinite-calendar';import'react-infinite-calendar/styles.css';// only needs to be imported once// Render the Calendarvartoday=newDate();varlastWeek=newDate(today.getFullYear(),today.getMonth(),today.getDate()-7);render(<InfiniteCalendarwidth={400}height={600}selected={today}disabledDays={[0,6]}minDate={lastWeek}/>,document.getElementById('root'));
By default, React Infinite Calendar comes with the English locale. You can use this to change the language, or change the first day of the week. See date-fns documentation for more details
Optional CSS class name to append to the root InfiniteCalendar element.
onSelect
Function
Callback invoked after beforeSelect() returns true, but before the state of the calendar updates
onScroll
Function
Callback invoked when the scroll offset changes. function (scrollTop: number) {}
onScrollEnd
Function
Callback invoked 150ms after the last onScroll event is triggered. function (scrollTop: number) {}
rowHeight
Number
56
Height of each row in the calendar (each week is considered a row)
autoFocus
Boolean
true
Whether the Calendar root should be auto-focused when it mounts. This is useful when keyboardSupport is enabled (the calendar must be focused to listen for keyboard events)
tabIndex
Number
1
Tab-index of the calendar
Display Options
Property
Type
Default
Description
layout
String
'portrait'
Layout of the calendar. Should be one of 'portrait' or 'landscape'
showHeader
Boolean
true
Show/hide the header
shouldHeaderAnimate
Boolean
true
Enable/Disable the header animation
showOverlay
Boolean
true
Show/hide the month overlay when scrolling
showTodayHelper
Boolean
true
Show/hide the floating back to Today helper
showWeekdays
Boolean
true
Show/hide the weekdays in the header
hideYearsOnSelect
Boolean
true
Whether to automatically hide the years view on select.
overscanMonthCount
Number
4
Number of months to render above/below the visible months. Tweaking this can help reduce flickering during scrolling on certain browers/devices.
todayHelperRowOffset
Number
4
This controls the number of rows to scroll past before the Today helper appears
React Infinite Calendar has very few dependencies. It relies on react-tiny-virtual-list for virtualization and date-fns for handling date manipulation. It also uses recompose for extending the default functionality. It also has the following peerDependencies: react, and react-transition-group.
Reporting Issues
If you find an issue, please report it along with any relevant details to reproduce it. The easiest way to do so is to fork this sandbox on CodeSandbox.
请发表评论