Skip to content
A calendar component supporting dragging.
Branch: master
Clone or download
Latest commit c840b9e Jun 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Delete yarn.lock Jun 6, 2019
picture add demo May 12, 2018
src fix renderDay not works Sep 27, 2018
.gitattributes initial May 6, 2018
.gitignore initial May 6, 2018
.npmignore initial May 6, 2018
README.md for npm publish and modify the dependency May 12, 2018
index.js adjust indents May 12, 2018
package.json fix renderDay not works Sep 27, 2018

README.md

DraggableCalendar

A calendar component supporting dragging operation.

1. Examples

Download the repository, cd the examples directory, and run it on simulator.

git clone git@github.com:SmallStoneSK/react-native-draggable-calendar.git
cd examples
react-native run-ios      # for ios
react-native run-android  # for android

2. Usage

At first, you should install react-native-draggable-calendar. Like this:

npm install react-native-draggable-calendar --save
  1. For basic usage, you can use it as following:
export class BasicUsageDemo extends Component {

  constructor(props) {
    super(props);
  }

  onGetTime = () => {
    // you can get the selected time.
    console.log('onGetTime: ', this._calendar.getSelection());
  };

  onSelectionChange = (newSelection) => {
    // when selected time changes, this func will be called.
    console.log('onSelectionChange', newSelection);
  };

  render() {
    return (
      <View style={{flex: 1}}>
        <DraggableCalendar
          ref={_ => this._calendar = _}
          onSelectionChange={this.onSelectionChange}
        />
        <TouchableOpacity onPress={this.onGetTime} style={{
          justifyContent: 'center', alignItems: 'center',
          left: 0, right: 0, bottom: 0, paddingVertical: 15,
          position: 'absolute', backgroundColor: '#4291EF'
        }}>
          <Text style={{color: '#FFF'}}>Get Time</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
  1. As it has provided a default style, you can use it as following for in-depth customization.
export class CustomizationDemo extends Component {
  _genStyles() {
    return {
      style: styles.draggableContainer,
      headerTextStyle: styles.dayText,
      monthHeaderTextStyle: styles.dayText,
      dayTextStyle: styles.dayText,
      selectedDayTextStyle: styles.selectedDayText,
      singleDayContainerStyle: styles.selectedDayContainer,
      beginDayContainerStyle: styles.selectedDayContainer,
      middleDayContainerStyle: styles.selectedDayContainer,
      endDayContainerStyle: styles.selectedDayContainer
    };
  }
  render() {
    return (
      <DraggableCalendar {...this._genStyles()}/>
    );
  }
}

const styles = StyleSheet.create({
  draggableContainer: {
    backgroundColor: '#303E4D'
  },
  dayText: {
    color: '#EAC351'
  },
  selectedDayText: {
    color: '#303E4D'
  },
  selectedDayContainer: {
    backgroundColor: '#EAC351'
  }
});

For detailed xxxStyle meaning, you can see the following picture:

3. Others

1. Decide how many month to render.

You have two ways to deside this.

  1. pass fullDateRange and availableDateRange. Like this:
<DraggableCalendar
  fullDateRange={[new Date(2018, 4, 1, 0, 0, 0), new Date(2018, 6, 31, 0, 0, 0)]}
  availableDateRange={[new Date(2018, 4, 21, 0, 0, 0), new Date(2018, 6, 31, 0, 0, 0)]}
  />

So, the date between 5.1~5.20 will not be selected. You'd better specify the first day of a month and the last day of a month to fullDateRange.

  1. pass maxDays. Like this:
<DraggableCalendar maxDays={180}/>

In this way, the availableDateRange will be [today, today + 180]. And the fullDateRange will be [first day of this month, last day of the month containing (today + 180)].

2. Customize your render content.

If you are not satisfied with the customization above, you can even pass renderMonthHeader/renderDay function to DraggableCalendar. Like this:

<DraggableCalendar
  renderDay={data => this.yourRenderDay(data)}
  renderMonthHeader={identifier => this.yourRenderMonthHeader(identifier)}
  />

Note

The data passed to yourRenderDay is an object:

{
  date        // a date obj
  status      // indicating its selected status. (enum value: see DAY_STATUS in Helper.js)
  available   // indicating whether this day is touchable
}

the identifier passed to yourRenderMonthHeader is a string:

'2018-05'   // you can use identifier.split('-') to get the year and month
You can’t perform that action at this time.