Created
March 19, 2019 17:02
-
-
Save varunon9/e204479219a55d86c4d8a985bae4e7f1 to your computer and use it in GitHub Desktop.
Sample Calendar Day and Header components for react-native-toggle-calendar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'; | |
import PropTypes from 'prop-types'; | |
const weekDaysNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; | |
class CalendarDayComponent extends React.PureComponent { | |
constructor(props) { | |
super(props); | |
this.onDayPress = this.onDayPress.bind(this); | |
} | |
getContentStyle() { | |
const { state, marking = {} } = this.props; | |
const style= { | |
content: {}, | |
text: { | |
color: '#181c26' | |
} | |
}; | |
if (state === 'disabled') { | |
style.text.color = '#c1c2c1'; | |
} else { | |
if (marking.partiallyBlocked) { | |
style.content.borderColor = '#c1c2c1'; | |
style.content.borderRadius = 50; | |
style.content.borderWidth = 1; | |
} else if (marking.partiallySoldOut) { | |
style.content.borderColor = '#e35052'; | |
style.content.borderRadius = 50; | |
style.content.borderWidth = 1; | |
} | |
if (marking.selected) { | |
style.text.color = '#fff'; | |
style.content.backgroundColor = '#216bc9'; | |
style.content.borderRadius = 50; | |
} else if (marking.fullyBlocked) { | |
style.text.color = '#fff'; | |
style.content.backgroundColor = '#c1c2c1'; | |
style.content.borderRadius = 50; | |
} else if (marking.fullySoldOut) { | |
style.text.color = '#fff'; | |
style.content.backgroundColor = '#e35052'; | |
style.content.borderRadius = 50; | |
} | |
} | |
return style; | |
} | |
getFooterTextStyle() { | |
const { marking = {}, state } = this.props; | |
const style = { | |
color: '#c1c2c1' | |
}; | |
if (marking.inventory > 0 && state !== 'disabled') { | |
style.color = '#4caf50'; | |
} | |
return style; | |
} | |
getInventoryCount() { | |
const { marking = {}, state } = this.props; | |
if (typeof marking === 'object' && state !== 'disabled') { | |
if (marking.inventory >= 0) { | |
return marking.inventory; | |
} | |
} | |
if (state === 'disabled') { | |
return ''; | |
} else { | |
return 'NA'; | |
} | |
} | |
onDayPress() { | |
this.props.onPress(this.props.date); | |
} | |
render() { | |
const contentStyle = this.getContentStyle(); | |
const highDemandImage = require('../../images/high-demand.png'); | |
return ( | |
<View style={styles.container}> | |
<View style={styles.header}> | |
{ | |
this.props.horizontal ? | |
<Text style={styles.weekName} numberOfLines={1}> | |
{ | |
weekDaysNames[this.props.date.weekDay].toUpperCase() | |
} | |
</Text> | |
: | |
null | |
} | |
</View> | |
<TouchableOpacity | |
style={[styles.content, contentStyle.content]} | |
onPress={this.onDayPress} | |
> | |
<Text style={[styles.contentText, contentStyle.text]}> | |
{String(this.props.children)} | |
</Text> | |
{ | |
(this.props.marking.highDemand && this.props.state !== 'disabled') ? | |
<Image source={highDemandImage} style={styles.smallIcon} /> | |
: null | |
} | |
</TouchableOpacity> | |
<View style={styles.footer}> | |
<Text style={this.getFooterTextStyle()}> | |
{this.getInventoryCount()} | |
</Text> | |
</View> | |
</View> | |
); | |
} | |
} | |
CalendarDayComponent.propTypes = { | |
children: PropTypes.any, | |
state: PropTypes.string, | |
marking: PropTypes.any, | |
horizontal: PropTypes.bool, | |
date: PropTypes.object, | |
onPress: PropTypes.func.isRequired, | |
current: PropTypes.string | |
}; | |
const styles = StyleSheet.create({ | |
container: { | |
justifyContent: 'center', | |
alignItems: 'center', | |
marginLeft: 7, | |
marginRight: 7 | |
}, | |
weekName: { | |
width: 32, | |
textAlign: 'center', | |
fontSize: 12, | |
fontWeight: 'bold', | |
color: '#7c7c7c' | |
}, | |
content: { | |
width: 36, | |
height: 36, | |
justifyContent: 'center', | |
alignItems: 'center' | |
}, | |
contentText: { | |
fontSize: 20 | |
}, | |
footer: { | |
flexDirection: 'row' | |
}, | |
smallIcon: { | |
width: 12, | |
height: 12, | |
position: 'absolute', | |
top: -1, | |
right: -1 | |
} | |
}); | |
export default CalendarDayComponent; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { | |
View, Text, StyleSheet, Image, TouchableOpacity | |
} from 'react-native'; | |
import PropTypes from 'prop-types'; | |
import moment from 'moment'; | |
const weekDaysNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; | |
const now = moment(); | |
class CalendarHeaderComponent extends React.PureComponent { | |
constructor(props) { | |
super(props); | |
this.onPressArrowLeft = this.onPressArrowLeft.bind(this); | |
this.onPressArrowRight = this.onPressArrowRight.bind(this); | |
this.shouldLeftArrowBeDisabled = this.shouldLeftArrowBeDisabled.bind(this); | |
} | |
onPressArrowLeft() { | |
this.props.onPressArrowLeft(this.props.month, this.props.addMonth); | |
} | |
onPressArrowRight() { | |
this.props.onPressArrowRight(this.props.month, this.props.addMonth); | |
} | |
shouldLeftArrowBeDisabled() { | |
const selectedDate = moment(this.props.month.getTime()); | |
return (selectedDate.isSame(now, 'month')); | |
} | |
render() { | |
return ( | |
<View> | |
<View style={styles.header}> | |
<Text style={styles.dateText}> | |
{moment(this.props.month.getTime()).format('MMM, YYYY')} | |
</Text> | |
<View | |
style={[ | |
styles.iconContainer, | |
this.shouldLeftArrowBeDisabled() ? styles.disabled : {} | |
]} | |
> | |
<TouchableOpacity | |
onPress={this.onPressArrowLeft} | |
disabled={this.shouldLeftArrowBeDisabled()} | |
> | |
<Image | |
style={[styles.icon, styles.leftIcon]} | |
source={require('../../images/arrow.png')} | |
/> | |
</TouchableOpacity> | |
</View> | |
<TouchableOpacity | |
style={styles.iconContainer} | |
onPress={this.onPressArrowRight} | |
> | |
<Image | |
style={styles.icon} | |
source={require('../../images/arrow.png')} | |
/> | |
</TouchableOpacity> | |
<View style={{ flex: 1 }} /> | |
{ | |
!this.props.horizontal ? | |
<TouchableOpacity | |
style={[ | |
styles.iconContainer, { | |
opacity: this.props.horizontal ? 0.2 : 1 | |
} | |
]} | |
onPress={this.props.onPressListView} | |
> | |
<Image | |
style={styles.icon} | |
source={require('../../images/list.png')} | |
/> | |
</TouchableOpacity> | |
: null | |
} | |
{ | |
this.props.horizontal ? | |
<TouchableOpacity | |
style={[ | |
styles.iconContainer, { | |
opacity: this.props.horizontal ? 1 : 0.2 | |
} | |
]} | |
onPress={this.props.onPressGridView} | |
> | |
<Image | |
style={styles.icon} | |
source={require('../../images/grid.png')} | |
/> | |
</TouchableOpacity> | |
: null | |
} | |
</View> | |
{ | |
// not showing week day in case of horizontal calendar, this will be handled by day component | |
this.props.horizontal ? | |
null | |
: | |
<View style={styles.week}> | |
{weekDaysNames.map((day, index) => ( | |
<Text key={index} style={styles.weekName} numberOfLines={1}> | |
{day.toUpperCase()} | |
</Text> | |
))} | |
</View> | |
} | |
</View> | |
); | |
} | |
} | |
CalendarHeaderComponent.propTypes = { | |
headerData: PropTypes.object, | |
horizontal: PropTypes.bool, | |
onPressArrowRight: PropTypes.func.isRequired, | |
onPressArrowLeft: PropTypes.func.isRequired, | |
onPressListView: PropTypes.func.isRequired, | |
onPressGridView: PropTypes.func.isRequired, | |
addMonth: PropTypes.func, | |
month: PropTypes.object | |
}; | |
const styles = StyleSheet.create({ | |
header: { | |
flexDirection: 'row', | |
padding: 12, | |
backgroundColor: '#eceef1' | |
}, | |
week: { | |
marginTop: 7, | |
flexDirection: 'row', | |
justifyContent: 'space-around' | |
}, | |
weekName: { | |
marginTop: 2, | |
marginBottom: 7, | |
width: 32, | |
textAlign: 'center', | |
fontSize: 12, | |
fontWeight: 'bold', | |
color: '#7c7c7c' | |
}, | |
dateText: { | |
fontSize: 18, | |
}, | |
iconContainer: { | |
justifyContent: 'center', | |
alignItems: 'center', | |
marginLeft: 8, | |
marginRight: 4, | |
marginTop: -2 | |
}, | |
leftIcon: { | |
transform: [{ rotate: '180deg' }] | |
}, | |
icon: { | |
width: 24, | |
height: 24 | |
}, | |
disabled: { | |
opacity: 0.4 | |
} | |
}); | |
export default CalendarHeaderComponent; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment