Sample Calendar Day and Header components for react-native-toggle-calendar

CalendarDayComponent.js

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;

CalendarHeaderComponent.js

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;