Skip to content
A simple React Native scroll calender for Months
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components/ScrollMonthCalender
img
.DS_Store
.gitignore
CODE_OF_CONDUCT.md
LICENSE
contribution.md
index.js
package.json
readme.md

readme.md

react-native-scroll-month-calendar

image1

image2

The package allows you accept create a horizontal month calender and its content , quick easy and fast .

Compatibility

Our release cycle is independent of react-native. We follow semver and here is the compatibility table:

@react-native-scroll-month-calendar react-native
^0.0.8 ^0.59

Installation

Add react-native-scroll-month-calendar to your project by running;

npm install react-native-scroll-month-calendar

or

yarn add react-native-scroll-month-calendar

and that's it, you're all good to go!

Usage

import {ScrollMonthCalender} from 'react-native-scroll-month-calender'
import React, {Component} from 'react';
import {View} from 'react-native';

class MyApp extends Component {
   myHistory= [
          {month:"January", content: "jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"February", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"March", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"April", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"May", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"June", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"July", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"August", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"September", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"October", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"November", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"},
        {month:"December", content:"jdjjdjdjdjdjdjdjdjdjdjdjd"}
    ]
  render() {
    return (
      <View style={{flex: 1}}>
         <ScrollMonthCalender history={myHistory} monthTextStyle={}, contentTextStyle={} 
         style={{marginTop:100}} onMonthChange={()=>{}}/>
        />
      </View>
    );
  }
}

Note:

You can also make use of the new props enableDefaultStyles to use the default style.

Don't forget to star, like and share :)

You can’t perform that action at this time.