1.0.1 • Public • Published

    Build Status npm version


    A cross platform optimized customizable CalendarList component for React Native.



    $ npm install react-native-calendar-list --save


    A light & dark styled version. exmple 1 exmple 2

    Also check example app with some calendar styling and behaviour here

    Why another calendar list?

    Short answer: The most famous react native calendar package out there did has many issues with performance. So this calendar list is optimized for fast renders, fast state update and scrolling experience. It uses Direct Manipulation to avoid reconciliation algorythm from react, this improving performance.


            headerHeight={40} />


    Prop Description Default
    startDate example '2017-10-01'. The day is not important. Calendar will start from this month and year. None
    monthsCount How many months to show from the startDate ahead. None
    mondayWeekStart This sets the week start on monday. false
    dayNames Array of names to override the day names in the week row. Example value: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi','Sa']. Note: Always first item of array is the Sunday name, ignore mondayWeekStart English names
    monthNames Array of names to override the month names in the header. Example value: ['Jan', 'Feb', 'Mar','Abr','May','Jun','Jul','Ago', 'Sep','Oct','Nov','Dic']. English names
    onDatePress Callback function invoked on a date press. Will call this func with a single parameter, the date in ISO format 'YYYY-MM-DD' None
    rowHeight Day Row height. Required to make optimizations. None
    headerHeight Month title height. Required to make optimizations. None
    Styling None
    marks An object with ISO dates as keys to style specific dates. Example: {"2017-02-20": markStyle, "2017-02-01": markStyle }. The expected object in each date is like this: {dayTextStyle: {color: 'white', fontSize: 14, fontWeight: 'bold'}, dayBackgroundColor: '#08a'}. Only the text style and the backgroundColor of the button can be styled. None
    showVerticalScrollIndicator VirtualizedList prop true
    enableAutoScrollOnMonthPress Makes the month header tappable and performs scroll to the month when tapped. false
    enableFixVisualLinesArtifacts Calendar will adjust it's width in order to be multiple of 7 an avoid RN line artifacts. Use it if you see some weird glitching lines in the calendar. None
    dayBackgroundColor Day box button background color. #fff
    headerBackgroundColor Month header background color grey
    weekHeaderBoxStyle week day names box style. None
    headerTextStyle Month header text style None
    weekHeaderTextStyle Month header background color None
    dayTextStyle Day button text style None
    initialNumToRender VirtualizedList prop. Tune for required performance. None


    The MIT License.



    npm i react-native-calendar-list

    DownloadsWeekly Downloads






    Last publish


    • hernancorigliano