A simple material-themed calendar for react native android
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.



A simple material-themed calendar for react native android

Demo Screen Capture

Installation Android

  1. npm install --save react-native-calendar-android

Note: Since react-native-calendar-android@0.0.3, you should use react-native@0.19.0 and above

  1. In android/settings.gradle

    include ':ReactNativeCalendarAndroid', ':app'
    project(':ReactNativeCalendarAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-android/android')
  2. In android/app/build.gradle

    dependencies {
        compile project(':ReactNativeCalendarAndroid')
  3. Register module (in MainActivity.java)

    4.1. With RN < 0.19.0

     import com.chymtt.reactnativecalendar.CalendarPackage; // <----- import
     public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
       protected void onCreate(Bundle savedInstanceState) {
         mReactRootView = new ReactRootView(this);
         mReactInstanceManager = ReactInstanceManager.builder()
           .addPackage(new MainReactPackage())
           .addPackage(new CalendarPackage())              // <------ add here
         mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    4.2. With RN >= 0.19.0

     import com.chymtt.reactnativecalendar.CalendarPackage; // <----- import
     public class MainActivity extends ReactActivity {
         protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(
             new MainReactPackage(),
             new CalendarPackage() // <------ add here


var Calendar = require('react-native-calendar-android');

  render() {
    return (
          currentDate={[ "2016/12/01" ]}
          selectedDates={[ "2015/11/20", "2015/11/30", 1448745712382 ]}
          onDateChange={(data) => {
          }} />


The view is a grid with 7 tiles wide and 8 tiles high (with topbarVisible=true), or 7 tiles high (with topbarVisible=false)

The size of each tile is automatically calculated based on the provided width.


int width (required)

Provide the width of the calendar. The height will be calculated based on width and topbarVisible.

boolean topbarVisible (default = true)

Show/hide the top bar which contains the month's title and arrows to go to previous or next months.

string arrowColor

A string color in the format #RRGGBB or #AARRGGBB. It changes color of the top bar's arrows accordingly.

enum firstDayOfWeek (default = 'sunday')

enum [ 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday' ]

Set the first day of the week.

enum showDate (default = 'current')

enum [ 'all', 'current' ]

If set to current, only show dates within current month. If set to all, show dates from previous and current months too.

array currentDate

Set the focus of the calendar. Due to some limitations, you must provide an array with only one element, which is the currentDate. currentDate can be a string in the format yyyy/mm/dd or a timestamp.

enum selectionMode (default = 'single')

enum [ 'none', 'single', 'multiple' ]

Set the selection mode.

  • none: you cannot select date
  • single: you can only select one date at a time
  • multiple: you can select multiple dates

string selectionColor

Set the color of the selection circle. Should be a color in the format #RRGGBB or #AARRGGBB.

array selectedDates

An array of dates in the format yyyy/mm/dd or timestamp. Set the selected dates on the calendar.



Called when user select/deselect a date. The returned data is { date: 'yyyy/mm/dd', selected: boolean }

Questions or suggestions?

Feel free to open an issue Pull requests are also welcome


Big thanks to @prolificinteractive for their awesome Material Calendar View