react-nativeでカレンダーが使いたいなって思ったらreact-native-calenderなるものが
いい感じだったのでカレンダーを出してみることにした。
import {Calendar, CalendarList, Agenda} from 'react-native-calendars';
<Calendar
current={'2012-03-01'}
minDate={'2012-05-10'}
maxDate={'2012-05-30'}
onDayPress={(day) => {console.log('selected day', day)}}
onDayLongPress={(day) => {console.log('selected day', day)}}
monthFormat={'yyyy MM'}
onMonthChange={(month) => {console.log('month changed', month)}}
disableMonthChange={false}
firstDay={1}
hideDayNames={false}
showWeekNumbers={false}
onPressArrowLeft={subtractMonth => subtractMonth()}
onPressArrowRight={addMonth => addMonth()}
renderHeader={(date) => {/*Return JSX*/}}
enableSwipeMonths={true}
theme={{
calendarBackground: '#333248',
textSectionTitleColor: 'white',
textSectionTitleDisabledColor: 'gray',
dayTextColor: 'red',
todayTextColor: 'white',
selectedDayTextColor: 'white',
monthTextColor: 'white',
indicatorColor: 'white',
selectedDayBackgroundColor: '#333248',
arrowColor: 'white',
'stylesheet.calendar.header': {
week: {
marginTop: 30,
marginHorizontal: 12,
flexDirection: 'row',
justifyContent: 'space-between'
}
}
}}
/>
設定がここまでするかというくらい豊富ですが、それだけカスタマイズが利くということ。
あと公式が若干見にくい(使わなそうな機能も一緒に付けてる)ためこちらで一部カットしました。
これと後は公式の制約とかソースコードを見ながらかちゃかちゃ組み立てていけば
もっとクオリティの高いカレンダーが作れそう。
(古いandroidだと月移動の時に少しカクつくかもしれません)
