Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/chymtt/ReactNativeCalendarAndroid

A simple material-themed calendar for react native android
https://github.com/chymtt/ReactNativeCalendarAndroid

Last synced: 5 days ago
JSON representation

A simple material-themed calendar for react native android

Awesome Lists containing this project

README 

        
# react-native-calendar-android



A simple material-themed calendar for react native android



Demo Screen Capture



## Installation Android

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



_Note_: Since [email protected], you should use [email protected] and above



2. In `android/settings.gradle`



    ```gradle

    ...

    include ':ReactNativeCalendarAndroid', ':app'

    project(':ReactNativeCalendarAndroid').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-android/android')

    ```



3. In `android/app/build.gradle`



    ```gradle

    ...

    dependencies {

        ...

        compile project(':ReactNativeCalendarAndroid')

    }

    ```



4. Register module (in MainActivity.java)



    4.1. With RN < 0.19.0



        ```java

        import com.chymtt.reactnativecalendar.CalendarPackage; // <----- import



        public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

          ......



          @Override

          protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            mReactRootView = new ReactRootView(this);



            mReactInstanceManager = ReactInstanceManager.builder()

              .setApplication(getApplication())

              .setBundleAssetName("index.android.bundle")

              .setJSMainModuleName("index.android")

              .addPackage(new MainReactPackage())

              .addPackage(new CalendarPackage())              // <------ add here

              .setUseDeveloperSupport(BuildConfig.DEBUG)

              .setInitialLifecycleState(LifecycleState.RESUMED)

              .build();



            mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);



            setContentView(mReactRootView);

          }

          ......

        }

        ```



    4.2. With RN >= 0.19.0



        ```java

        import com.chymtt.reactnativecalendar.CalendarPackage; // <----- import



        public class MainActivity extends ReactActivity {

            ...



            @Override

            protected List getPackages() {

              return Arrays.asList(

                new MainReactPackage(),

                new CalendarPackage() // <------ add here

              );

            }

        }

        ```



## Usage



```js



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

...



  render() {

    return (

       {

            console.log(data);

          }} />

    );

  }

```



## Notes



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.



## Props



### 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.



## Event



### onDateChange(data)



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](https://github.com/chymtt/ReactNativeCalendarAndroid/issues)

[Pull requests](https://github.com/chymtt/ReactNativeCalendarAndroid/pulls) are also welcome



## Credit



Big thanks to @prolificinteractive for their awesome [Material Calendar View](https://github.com/prolificinteractive/material-calendarview)