The react-Native tripartite library is also introduced

Today recommend a weekly calendar component library, briefly said the basic requirements, need to know the current week, and can switch last week/next week, operation range only in the current month switch.

Github address: React-native calendar-strip

Basic usage:

<CalendarStrip
    style={{height:150}}
/>
Copy the code



The project is generally domestic oriented, and the time text needs to be in Chinese, which can be introduced heremomentFormat it locally.

import 'moment/locale/zh-cn'
Copy the code



Built-in left and right buttons can freely switch from one week to the next, very convenient.

However, this is not enough to meet our needs, we need to customize the methods of the previous week and the next week, know the week of the current month, and adjust the header style.

This is how to get the week of the current month and the total number of weeks of the current month.

componentDidMount() { let date = new Date(); let monthDate = this.getMonthWeek(date); This.setstate ({titleDate: monthDate, // Set the top-styled data source}); } getMonthWeek = (date) => {let w = date.getDay(); let d = date.getDate(); if (w === 0) { w = 7; } // let lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0); let config = { year: date.getFullYear(), month: date.getMonth() + 1, week: Math.ceil((d + 6 - w) / 7), allWeek: Math.ceil((lastDay.getDate() + 6 - (lastDay.getDay() === 0 ? 7 : lastDay.getDay())) / 7), }; return config; };Copy the code

When it is the first week of the month, the previous week button on the left is not displayed. When it is the last week of the month, the next week button on the right is not displayed.

<View style={{ height: 38, backgroundColor: '#EFF5FF', flexDirection: 'row', alignItems: 'center', justifyContent: 'space - between'}} > {/ * button on the left part * /} {this. State. TitleDate. Week > 1? <TouchableOpacity onPress={this.lastWeek} style={{flexDirection: 'row', alignItems: 'center', marginLeft: 8, width: 80}}> <Image style={{width: 21, height: 10, marginRight: Source = 2}} {the require (". / img/dealt_ic_last. PNG ')} / > < Text > first {this. State. TitleDate. Week 1} weeks < / Text > < / TouchableOpacity > : <View style={{width: 80, marginLeft: 8}} / >} < Text > {this. State. TitleDate. Year}, {this. State. TitleDate. The month} in the {this. State. TitleDate. Week} weeks < / Text > {/ * button on the right side part * /} {this. State. TitleDate. Week < this. State. TitleDate. AllWeek? <TouchableOpacity onPress={this.nextWeek} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex - end, marginRight: 8, width: 80,}} > < Text > first {this. State. TitleDate. Week + 1} weeks < / Text > < Image style = {{width: 21, height: 10, marginLeft: 2}} source={require('./img/dealt_ic_next.png')}/> </TouchableOpacity> : <View style={{width: 80, marginRight: 8}}/> } </View>Copy the code



Modify theCalendarStripSome of the properties, its own left and right toggle buttons and its own header style down.

<CalendarStrip
    ref={'calender'}
    style={{height: 60}}
    showMonth={false}
    iconLeft={null}
    iconRight={null}
/>
Copy the code

Custom last week/next week methods that call component-provided methods through the component’s ref property.

/ * * * * / lastWeek = () a week on = > {this. Refs. Calender. GetPreviousWeek (); this.state.titleDate.week -= 1; this.setState({ titleDate: this.state.titleDate, }); }; / * * * * / nextWeek next week () = = > {this. Refs. Calender. GetNextWeek (); this.state.titleDate.week += 1; this.setState({ titleDate: this.state.titleDate, }); };Copy the code

A basic weekly calendar needs to be met, and there may be changes to other styles in the project, as well as in the official API documentation. In daily projects, we often use a variety of tripartite libraries to avoid repeating the wheel and save time. It can be said that we are standing on the shoulders of giants to code.