@momo-kits/calendar 0.0.1-beta → 0.0.1

package/index.js

@@ -1,3 +1,4 @@
 import Calendar from './src/Calendar';
+import CalendarPicker from './src/calendarPicker/index';
 
-export default Calendar;
+export { Calendar, CalendarPicker };

package/package.json

@@ -1,19 +1,18 @@
 {
-    "name": "@momo-kits/calendar",
-    "version": "0.0.1-beta",
-    "private": false,
-    "main": "index.js",
-    "dependencies": {
-      "prop-types": "^15.7.2",
-      "react": "16.9.0",
-      "moment": "^2.24.0",
-      "@momo-kits/core": "^0.0.1-beta"
-    },
-    "peerDependencies": {
-      "react": "16.9.0",
-      "react-native": ">=0.55"
-    },
-    "devDependencies": {},
-    "license": "MOMO"
-  }
-  
+  "name": "@momo-kits/calendar",
+  "version": "0.0.1",
+  "private": false,
+  "main": "index.js",
+  "dependencies": {
+    "@momo-kits/date-picker": "latest",
+    "moment": "^2.24.0"
+  },
+  "peerDependencies": {
+    "react": "16.9.0",
+    "react-native": ">=0.55",
+    "prop-types": "^15.7.2",
+    "@momo-kits/core": ">=0.0.5-beta"
+  },
+  "devDependencies": {},
+  "license": "MoMo"
+}

package/publish.sh

@@ -12,7 +12,7 @@ echo VERSION: $VERSION
 rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
 
 # #babel component to dist
-babel ./dist -d dist --copy-files
+#babel ./dist -d dist --copy-files
 
 #copy option
 #cp -r ./src/ dist
@@ -26,4 +26,4 @@ cd ..
 rm -rf dist
 
 
-curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calander new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calander"}'
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/calendar new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/calendar"}'

package/src/Calendar.js

@@ -281,23 +281,28 @@ class Calendar extends Component {
     };
 
     setDateRange = (dateRange, isScrollToStartDate) => {
-        const { mode } = this.props;
+        const { mode, doubleDate = {} } = this.props;
         if (mode === 'doubleDate') {
             this.cellHeader1.current.updateView(dateRange.startDate, this.tabSelected === 0);
             this.cellHeader2.current.updateView(dateRange.endDate, this.tabSelected === 1);
             this.calendarPicker?.current?.setDateRange(dateRange, isScrollToStartDate);
+            this.doubleDate = doubleDate ? {
+                first: dateRange.startDate ? moment(dateRange.startDate) : null,
+                second: dateRange.endDate ? moment(dateRange.endDate) : null
+            } : {};
         }
     }
 
     render() {
         const {
-            isOffLunar, isHideHoliday, isHiddenSwitch, isShowLunar, onCallbackCalendar, priceList, labelFrom, labelTo, isHideLabel, minDate, maxDate, doubleDate
+            isOffLunar, isHideHoliday, isHiddenSwitch, isShowLunar, onCallbackCalendar, priceList, labelFrom, labelTo, isHideLabel, minDate, maxDate, doubleDate,
+            isHideHeaderPanel
         } = this.props;
         const { isDoubleDateMode } = this.state;
         return (
             <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
                 {!isHiddenSwitch && this.renderSwitchReturnSelection()}
-                {this.renderHeaderPanel()}
+                {!isHideHeaderPanel && this.renderHeaderPanel()}
                 <CalendarPro
                     ref={this.calendarPicker}
                     startDate={doubleDate?.first}

package/src/CalendarPro.js

@@ -359,5 +359,5 @@ const styles = StyleSheet.create({
         paddingTop: 15,
         paddingBottom: 10,
     },
-    container: { flex: 1, backgroundColor: 'white' },
+    container: { flex: 1, backgroundColor: 'white', marginTop: 20, },
 });

package/src/Day/index.js

@@ -6,9 +6,8 @@ import {
     TouchableHighlight,
     Text
 } from 'react-native';
+import { Colors, SwitchLanguage } from '@momo-kits/core';
 import style from './style';
-import SwitchLanguage from '../../localizedStrings/SwitchLanguage';
-import Colors from '../../../colors';
 
 class Day extends Component {
     constructor(props) {

package/src/Day/style.js

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import Colors from '../../../colors';
+import { Colors } from '@momo-kits/core';
 
 const dayWidth = (Dimensions.get('window').width - 38) / 7;
 const SCREEN_WIDTH = Dimensions.get('window').width;

package/src/MonthList.js

@@ -11,6 +11,7 @@ import style from './Day/style';
 import { convertSolar2Lunar } from './LunarService';
 
 const ITEM_WIDTH = Dimensions.get('window').width - 24;
+const MAX_RENDER_PER_BATCH = Platform.OS === 'android' ? 1 : 12;
 export default class MonthList extends Component {
     constructor(props) {
         super(props);
@@ -238,7 +239,7 @@ export default class MonthList extends Component {
                 onScrollToIndexFailed={() => {}}
                 removeClippedSubviews
                 initialNumToRender={1}
-                maxToRenderPerBatch={1}
+                maxToRenderPerBatch={MAX_RENDER_PER_BATCH}
                 windowSize={3}
                 contentContainerStyle={{ paddingTop: 5 }}
                 initialScrollIndex={this.currentScrollIndex}

package/src/calendarPicker/Day.js

@@ -0,0 +1,154 @@
+import React, { Component, } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { Text } from '@momo-kits/core';
+import styles from './styles';
+
+export default class Day extends Component {
+    processMinDate() {
+        const { minDate } = this.props;
+        if (minDate) {
+            minDate.setHours(0, 0, 0, 0);
+            if (this.date < minDate) {
+                this.disableTouch = true;
+            }
+        }
+    }
+
+    processMaxDate() {
+        const { maxDate } = this.props;
+        if (maxDate) {
+            maxDate.setHours(0, 0, 0, 0);
+            if (this.date > maxDate) {
+                this.disableTouch = true;
+            }
+        }
+    }
+
+    processDoubleDate() {
+        const {
+            mode, otherMonth, firstDate, secondDate, tabSelected
+        } = this.props;
+        const { date } = this;
+        if (mode === 'doubleDate' && !otherMonth) {
+            if (firstDate && tabSelected === 1) {
+                firstDate.setHours(0, 0, 0, 0);
+                if (date < firstDate) {
+                    this.disableTouch = true;
+                    this.styleDouble = {};
+                } else if (date.getTime() === firstDate.getTime()) {
+                    this.colorCanTouch = '#2eb3e8';
+                    this.colorText = 'white';
+                    this.styleDouble = {};
+                }
+            }
+            if (secondDate && firstDate) {
+                secondDate.setHours(0, 0, 0, 0);
+                if (date > firstDate && date < secondDate) {
+                    this.colorCanTouch = '#90d6f3';
+
+                    this.styleDouble = styles.styleBetween;
+
+                    this.colorText = 'white';
+                }
+                if (secondDate.getTime() !== firstDate.getTime()) {
+                    if (date.getTime() === firstDate.getTime()) {
+                        this.colorCanTouch = '#2eb3e8';
+                        this.colorText = 'white';
+                        this.styleDouble = styles.styleFirstDate;
+                    }
+                    if (date.getTime() === secondDate.getTime()) {
+                        this.styleDouble = styles.styleSecondDate;
+                        this.colorCanTouch = '#2eb3e8';
+                        this.colorText = 'white';
+                    }
+                }
+            }
+        }
+    }
+
+    processSelected() {
+        const { selected } = this.props;
+        if (selected && !this.disableTouch) {
+            this.colorCanTouch = '#2eb3e8';
+            this.colorText = 'white';
+        }
+    }
+
+    processDateNow() {
+        const { selected } = this.props;
+        if (!selected && this.date.getTime() === this.dateNow.getTime()) {
+            this.colorCanTouch = '#8F8E94';
+            this.colorText = 'white';
+        }
+    }
+
+    processOtherMonth() {
+        const { otherMonth } = this.props;
+        if (otherMonth) {
+            this.colorTextDisable = 'white';
+        }
+    }
+
+    processRender() {
+        this.processMinDate();
+        this.processMaxDate();
+        // this.processDateNow()
+        this.processDoubleDate();
+        this.processSelected();
+        this.processOtherMonth();
+    }
+
+    render() {
+        const {
+            day, month, year, otherMonth, onDayChange
+        } = this.props;
+        this.colorCanTouch = 'white';
+        this.colorText = '#393939';
+        this.colorTextDisable = '#DADADA';
+        this.styleDouble = {};
+        this.disableTouch = false;
+        this.dateNow = new Date();
+        this.dateNow.setHours(0, 0, 0, 0);
+        this.date = new Date(year, month, day);
+        this.date.setHours(0, 0, 0, 0);
+        this.processRender();
+        return (
+
+            <View style={styles.dayWrapper}>
+                <View style={this.styleDouble} />
+                {
+                    this.disableTouch || otherMonth
+                        ? (
+                            <View style={styles.dayButton}>
+                                <Text.Title style={[styles.dayLabel, { color: this.colorTextDisable }]}>
+                                    {day}
+                                </Text.Title>
+                            </View>
+                        )
+                        : (
+                            <View style={[styles.dayButtonSelected, { backgroundColor: this.colorCanTouch }]}>
+                                <TouchableOpacity
+                                    style={styles.dayButton}
+                                    onPress={() => onDayChange(day, month, year)}
+                                >
+                                    <Text.Title style={[styles.dayLabel, { color: this.colorText }]}>
+                                        {day}
+                                    </Text.Title>
+                                </TouchableOpacity>
+
+                            </View>
+                        )
+
+                }
+            </View>
+        );
+    }
+}
+Day.propTypes = {
+    day: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    month: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    year: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    otherMonth: PropTypes.bool,
+    onDayChange: PropTypes.func,
+};

package/src/calendarPicker/Days.js

@@ -0,0 +1,203 @@
+import React, { Component, } from 'react';
+import { View, } from 'react-native';
+import styles from './styles';
+import { getDaysInMonth, MAX_COLUMNS, MAX_ROWS, } from './util';
+import Day from './Day';
+
+export default class Days extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedDay: 0,
+            selectedMonth: 0,
+            selectedYear: 0,
+        };
+        this.selectedDate = null;
+    }
+
+    componentDidMount() {
+        const { selectedDate } = this.props;
+        if (selectedDate) {
+            const temp = selectedDate;
+            if (typeof temp.getDate === 'function') {
+                this.selectedDate = temp;
+            } else {
+                this.selectedDate = new Date(temp);
+            }
+            this.updateSelectedStates(
+                this.selectedDate.getDate(),
+                this.selectedDate.getMonth(),
+                this.selectedDate.getFullYear(),
+            );
+        }
+    }
+
+    updateSelectedStates = (day, month, year) => {
+        const { onDayChange } = this.props;
+        // const monthTmp = month + 1;
+        this.setState({
+            selectedDay: day,
+            selectedMonth: month,
+            selectedYear: year,
+        });
+        if (onDayChange) {
+            onDayChange(day, month, year);
+        }
+    }
+
+    onPressDay = (day, month, year) => {
+        const { minDate, maxDate } = this.props;
+        const selectDate = new Date(year, month, day);
+        selectDate.setHours(0, 0, 0, 0);
+        if (minDate) {
+            minDate.setHours(0, 0, 0, 0);
+            if (selectDate < minDate) {
+                return;
+            }
+        }
+
+        if (maxDate) {
+            maxDate.setHours(0, 0, 0, 0);
+            if (selectDate > maxDate) {
+                return;
+            }
+        }
+        this.updateSelectedStates(day, month, year);
+    }
+
+    getCalendarDays = () => {
+        const {
+            month, year, mode, minDate, maxDate, firstDate, secondDate, tabSelected
+        } = this.props;
+        const { selectedMonth, selectedDay, selectedYear } = this.state;
+        let columns;
+        const matrix = [];
+        let i;
+        let j;
+        let currentDay = 0;
+        const thisMonthFirstDay = new Date(year, month, 1);
+        let slotsAccumulator = 1;
+
+        let goNextMonth = false;
+        for (i = 0; i < MAX_ROWS; i += 1) { // Week rows
+            columns = [];
+            if (goNextMonth) { break; }
+            for (j = 0; j < MAX_COLUMNS; j += 1) { // Day columns
+                // HungHC: getDay() Sunday is 0, Monday is 1, and so on.
+                let tmp = thisMonthFirstDay.getDay();
+                if (tmp === 0) { tmp = 7; }
+                if (slotsAccumulator >= tmp) {
+                    if (currentDay < getDaysInMonth(month, year)) {
+                        const day = currentDay + 1;
+                        const selected = (selectedDay === day
+                        && selectedMonth === month
+                        && selectedYear === year);
+                        const date = Date(year, month, day);
+
+                        columns.push(<Day
+                            mode={mode}
+                            key={j.toString()}
+                            column={j}
+                            day={day}
+                            month={month}
+                            year={year}
+                            selected={selected}
+                            date={date}
+                            minDate={minDate}
+                            maxDate={maxDate}
+                            firstDate={firstDate}
+                            secondDate={secondDate}
+                            tabSelected={tabSelected}
+
+                            otherMonth={false}
+                            onDayChange={this.onPressDay}
+                        />);
+                        currentDay += 1;
+                    } else {
+                        // HungHC: show next month
+                        goNextMonth = true;
+                        if (j === 0) {
+                            break;
+                        }
+
+                        let nextMonth = month + 1;
+                        const day = currentDay + 1 - getDaysInMonth(month, year);
+                        let yearTmp = year;
+                        if (nextMonth > 11) {
+                            nextMonth = 0;
+                            yearTmp = year + 1;
+                        }
+                        const date = Date(yearTmp, nextMonth, day);
+                        const selected = (selectedDay === day
+                        && selectedMonth === nextMonth
+                        && selectedYear === yearTmp);
+                        columns.push(<Day
+                            mode={mode}
+                            key={j.toString()}
+                            column={j}
+                            day={day}
+                            month={nextMonth}
+                            year={yearTmp}
+                            selected={selected}
+                            date={date}
+                            minDate={minDate}
+                            maxDate={maxDate}
+                            firstDate={firstDate}
+                            secondDate={secondDate}
+                            tabSelected={tabSelected}
+                            otherMonth
+                            onDayChange={this.onPressDay}
+                        />);
+                        currentDay += 1;
+                    }
+                } else {
+                    // HungHC: show prev month
+                    let prevMonth = month - 1;
+                    let yearTmp = year;
+                    if (prevMonth < 0) {
+                        prevMonth = 11;
+                        yearTmp = year - 1;
+                    }
+                    const daysPrev = getDaysInMonth(prevMonth, yearTmp);
+                    let tmpDay = thisMonthFirstDay.getDay();
+                    if (tmpDay === 0) { tmpDay = 7; }
+                    const delta = (slotsAccumulator - tmpDay + 1);
+                    const day = daysPrev + delta;
+
+                    const selected = (selectedDay === day
+                    && selectedMonth === prevMonth
+                    && selectedYear === yearTmp);
+
+                    const date = Date(yearTmp, prevMonth, day);
+                    columns.push(<Day
+                        mode={mode}
+                        key={j.toString()}
+                        column={j}
+                        day={day}
+                        month={prevMonth}
+                        year={yearTmp}
+                        selected={selected}
+                        date={date}
+                        minDate={minDate}
+                        maxDate={maxDate}
+                        firstDate={firstDate}
+                        secondDate={secondDate}
+                        tabSelected={tabSelected}
+                        otherMonth
+                        onDayChange={this.onPressDay}
+                    />);
+                }
+
+                slotsAccumulator += 1;
+            }
+            matrix[i] = [];
+            matrix[i].push(<View key={i.toString()} style={styles.weekRow}>{columns}</View>);
+        }
+
+        return matrix;
+    }
+
+    render() {
+        return <View style={styles.daysWrapper}>{ this.getCalendarDays()}</View>;
+    }
+}

package/src/calendarPicker/HeaderControls.js

@@ -0,0 +1,158 @@
+/* eslint-disable no-param-reassign */
+import React, { Component, } from 'react';
+import {
+    Text, TouchableOpacity, View
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { IconSource, Image } from '@momo-kits/core';
+import { DatePicker } from '@momo-kits/date-picker';
+import styles from './styles';
+import { MONTHS } from './util';
+
+const padding = (input) => `${input > 9 ? input : `0${input}`}`;
+
+const formatDate = (date) => {
+    if (date && typeof date.getDate === 'function') {
+        return `${padding(date.getMonth() + 1)}/${(date.getFullYear()).toString()}`;
+    }
+    return null;
+};
+
+const makeRange = (min = 0, max = 9999, step = 1) => {
+    const range = [];
+    let entry = `${0}`;
+
+    for (min; min <= max; min += step) {
+        entry = `${min}`;
+        range.push(entry);
+    }
+
+    return range;
+};
+export default class HeaderControls extends Component {
+    constructor(props) {
+        super(props);
+        const { month } = this.props;
+        this.state = {
+            selectedMonth: month
+        };
+
+        const minYear = 1900 + (new Date()).getYear();
+        const maxYear = minYear + 5;
+        this.months = makeRange(1, 12);
+        this.years = makeRange(minYear, maxYear);
+        this.momoDatePicker = React.createRef();
+    }
+
+    setMonth = (month) => {
+        this.setState({
+            selectedMonth: month,
+        });
+    }
+
+    getNext = () => {
+        const { selectedMonth } = this.state;
+        const { getNextYear, onMonthChange } = this.props;
+        let next = selectedMonth + 1;
+        if (next > 11) {
+            next = 0;
+            this.setState({ selectedMonth: next });
+            getNextYear();
+        } else {
+            this.setState({ selectedMonth: next });
+        }
+
+        onMonthChange(next);
+    }
+
+    getPrevious = () => {
+        const { selectedMonth } = this.state;
+        const {
+            onMonthChange, year, minDate, getPrevYear
+        } = this.props;
+
+        let prev = selectedMonth - 1;
+        if (prev < 0) {
+            prev = 11;
+            this.setState({ selectedMonth: prev });
+            getPrevYear();
+            onMonthChange(prev);
+        } else if (year <= minDate.getFullYear() && prev < minDate.getMonth()) {
+            return null;
+        } else {
+            this.setState({ selectedMonth: prev });
+            onMonthChange(prev);
+        }
+    }
+
+    pickMonthYear = () => {
+        const { navigator, minDate, maxDate } = this.props;
+        navigator.showBottom({
+            screen: DatePicker,
+            params: {
+                dragDisabled: true,
+                onSelected: this.onMonthYearChange,
+                onClose: () => { },
+                selectedDate: formatDate(minDate),
+                minDate: formatDate(minDate),
+                maxDate: formatDate(maxDate),
+                format: 'MM/YYYY',
+            }
+        });
+    };
+
+    onMonthYearChange = (date) => {
+        const { onMonthYearChange } = this.props;
+        const splitDate = date.split('/');
+        const idM = +splitDate[0];
+        const idY = +splitDate[1];
+        this.setState({
+            selectedMonth: idM - 1
+        });
+        if (onMonthYearChange) {
+            onMonthYearChange(idM - 1, idY);
+        }
+    }
+
+    render() {
+        const { selectedMonth } = this.state;
+        const { year, minDate } = this.props;
+        const previous = selectedMonth - 1 < 0 ? 11 : selectedMonth - 1;
+        const opacity = (previous < minDate.getMonth() && minDate.getFullYear() === year) ? 0.2 : 1;
+        // const monthNow = (new Date()).getMonth() + 1;
+        // const yearNow = (new Date()).getYear() + 1900;
+        return (
+            <View style={styles.headerWrapper}>
+
+                <TouchableOpacity onPress={() => this.getPrevious()} style={{ paddingHorizontal: 20, }}>
+                    <Image style={{ width: 20, height: 20, opacity }} source={IconSource.ic_back_arrow} />
+                </TouchableOpacity>
+
+                <TouchableOpacity onPress={this.pickMonthYear}>
+                    <Text style={styles.monthLabel}>
+                        { MONTHS[selectedMonth] }
+                        /
+                        { year }
+                    </Text>
+                </TouchableOpacity>
+
+                <TouchableOpacity onPress={() => this.getNext()} style={{ paddingHorizontal: 20, }}>
+                    <Image style={{ width: 20, height: 20, }} source={IconSource.ic_arrow_next} />
+                </TouchableOpacity>
+            </View>
+        );
+    }
+}
+
+HeaderControls.propTypes = {
+    getNextYear: PropTypes.func,
+    onMonthChange: PropTypes.func,
+    onMonthYearChange: PropTypes.func,
+    getPrevYear: PropTypes.func,
+    year: PropTypes.number,
+    minDate: PropTypes.any,
+};
+
+HeaderControls.defaultProps = {
+
+};

package/src/calendarPicker/WeekDaysLabels.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@momo-kits/core';
+import styles from './styles';
+import { WEEKDAYS, } from './util';
+
+const colorDay = '#9199a2';
+const WeekDaysLabels = () => (
+    <View style={styles.dayLabelsWrapper}>
+        { WEEKDAYS.map((day, key) => (
+            <Text.Title
+                key={key.toString()}
+                style={[styles.dayLabels, { color: colorDay, fontSize: 16 }]}
+            >
+                {day}
+            </Text.Title>
+        )) }
+    </View>
+);
+
+export default WeekDaysLabels;

package/src/calendarPicker/index.js

@@ -0,0 +1,125 @@
+/* eslint-disable react/no-typos */
+import React, { Component, } from 'react';
+import { View, } from 'react-native';
+import PropTypes from 'prop-types';
+import styles from './styles';
+import HeaderControls from './HeaderControls';
+import Days from './Days';
+import WeekDaysLabels from './WeekDaysLabels';
+
+class CalendarPicker extends Component {
+    constructor(props) {
+        super(props);
+
+        this.selectedDate = null;
+        const temp = props.selectedDate;
+        try {
+            if (typeof temp.getDate === 'function') {
+                this.selectedDate = temp;
+            } else {
+                this.selectedDate = new Date(temp);
+            }
+        } catch (e) {
+            this.selectedDate = new Date();
+        }
+        this.state = {
+            // date: this.selectedDate,
+            month: this.selectedDate.getMonth(),
+            day: this.selectedDate.getDate(),
+            year: this.selectedDate.getFullYear(),
+            // selectedDay: [],
+            tabSelected: 0,
+        };
+    }
+
+    onDayChange = (day, month, year) => {
+        const { onDateChange } = this.props;
+        const date = new Date(year, month, day);
+        if (onDateChange) { onDateChange(date); }
+        if (this.refs.header) { this.refs.header.setMonth(month); }
+        this.setState({
+            year,
+            month,
+            day,
+        });
+    }
+
+    onMonthYearChange = (month, year) => {
+        this.setState({
+            month,
+            year
+        });
+    }
+
+    onMonthChange = (month) => {
+        this.setState({ month, });
+    }
+
+
+    getNextYear = () => {
+        const { year } = this.state;
+        this.setState({ year: parseInt(year) + 1, });
+    }
+
+    getPrevYear =() => {
+        const { year } = this.state;
+        this.setState({ year: parseInt(year) - 1, });
+    }
+
+    setDoubleDateAndTabIndex = (first, second, tabSelected) => {
+        this.setState({
+            firstDate: first,
+            secondDate: second,
+            tabSelected
+        });
+    }
+
+    render() {
+        const {
+            day, year, month, firstDate, secondDate, tabSelected
+        } = this.state;
+        const {
+            minDate, maxDate, mode, navigator
+        } = this.props;
+        return (
+            <View style={styles.calendar}>
+                <HeaderControls
+                    ref="header"
+                    year={year}
+                    month={month}
+                    navigator={navigator}
+                    onMonthYearChange={this.onMonthYearChange}
+                    onMonthChange={this.onMonthChange}
+                    getNextYear={this.getNextYear}
+                    getPrevYear={this.getPrevYear}
+                    minDate={minDate || null}
+                />
+                <WeekDaysLabels />
+
+                <Days
+                    mode={mode}
+                    firstDate={firstDate}
+                    secondDate={secondDate}
+                    tabSelected={tabSelected}
+                    month={month}
+                    year={year}
+                    day={day}
+                    minDate={minDate || new Date()}
+                    maxDate={maxDate}
+                    selectedDate={this.selectedDate}
+                    onDayChange={this.onDayChange}
+                />
+            </View>
+        );
+    }
+}
+export default CalendarPicker;
+
+CalendarPicker.propTypes = {
+    navigator: PropTypes.object.isRequired,
+    minDate: PropTypes.any,
+    maxDate: PropTypes.any,
+    mode: PropTypes.oneOf(['doubleDate', 'signleDate']),
+    selectedDate: PropTypes.any,
+    onDateChange: PropTypes.func,
+};

package/src/calendarPicker/styles.js

@@ -0,0 +1,184 @@
+import { Dimensions, StyleSheet } from 'react-native';
+
+const widthScreen = Dimensions.get('window').width;
+
+const styles = StyleSheet.create({
+    calendar: {
+    // height:widthScreen - 20,
+        backgroundColor: 'white',
+        borderColor: '#DADADA',
+        borderBottomWidth: 1,
+        borderTopWidth: 1,
+    },
+    dayWrapper: {
+        width: widthScreen / 7,
+        height: 40,
+        backgroundColor: 'rgba(0,0,0,0.0)'
+
+    },
+
+    dayButton: {
+        width: 50,
+        height: 50,
+        alignSelf: 'center'
+    },
+
+    styleFirstDate: {
+        position: 'absolute',
+        // width:45,
+        height: 40,
+        top: 0,
+        left: widthScreen / 14,
+        right: -1,
+        backgroundColor: '#90d6f3',
+        borderRadius: 0
+    },
+    styleSecondDate: {
+        position: 'absolute',
+        // width:45,
+        height: 40,
+        top: 0,
+        right: widthScreen / 14,
+        left: 0,
+        backgroundColor: '#90d6f3',
+        borderRadius: 0
+    },
+    styleBetween: {
+        height: 40,
+        // width:60,
+        top: 0,
+        left: 0,
+        right: -1,
+        position: 'absolute',
+        backgroundColor: '#90d6f3',
+        borderRadius: 0
+    },
+    dayButtonSelected: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#2eb3e8',
+        alignSelf: 'center'
+    },
+
+    dayButtonNow: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: '#8F8E94',
+        alignSelf: 'center'
+    },
+
+    dayLabel: {
+        fontSize: 16,
+        color: '#393939',
+        marginTop: 10,
+        alignSelf: 'center'
+    },
+
+    dayLabelsWrapper: {
+        width: widthScreen,
+        flexDirection: 'row',
+        marginBottom: 10,
+        paddingTop: 5,
+        paddingBottom: 5,
+        borderColor: '#DADADA',
+        borderBottomWidth: 1,
+        borderTopWidth: 1,
+    },
+
+    daysWrapper: {
+        alignSelf: 'center',
+    },
+
+    dayLabels: {
+        width: widthScreen / 7,
+        fontSize: 12,
+        color: '#000',
+        textAlign: 'center',
+    },
+
+    selectedDay: {
+        width: 60,
+        height: 60,
+        backgroundColor: '#5ce600',
+        borderRadius: 30,
+        alignSelf: 'center'
+    },
+
+    monthLabel: {
+        fontSize: widthScreen > 320 ? 20 : 17,
+        fontWeight: '300',
+        color: '#000',
+        width: 180,
+        textAlign: 'center'
+    },
+
+    headerWrapper: {
+        width: widthScreen,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+        marginVertical: 10,
+        backgroundColor: 'rgba(0,0,0,0.0)'
+    },
+
+    monthSelector: {
+        width: 80,
+    },
+
+    prev: {
+        textAlign: 'left',
+        fontSize: 16,
+        color: '#dadada',
+    },
+
+    next: {
+        textAlign: 'right',
+        fontSize: 16,
+        color: '#dadada',
+    },
+
+    yearLabel: {
+        fontSize: 14,
+        fontWeight: 'bold',
+        color: '#000',
+        textAlign: 'center'
+    },
+
+    weeks: {
+        flexDirection: 'column'
+    },
+
+    weekRow: {
+        flexDirection: 'row'
+    },
+    btnCellHeader: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#DADADA',
+        backgroundColor: 'white'
+    },
+    center: {
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    txtDate: {
+        color: '#4D4D4D',
+        fontSize: 18,
+        fontWeight: 'bold',
+        paddingVertical: 10
+    },
+    lineActiveTab: {
+        height: 3,
+        width: '100%',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        backgroundColor: '#49A3BC'
+    }
+});
+
+export default styles;

package/src/calendarPicker/util.js

@@ -0,0 +1,50 @@
+import { SwitchLanguage } from '@momo-kits/core';
+
+module.exports = {
+    WEEKDAYS: SwitchLanguage.getLocalize({
+        vi: [
+            'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN',
+        ],
+        en: ['Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
+    }),
+
+    WEEKDAYSNAME: [
+        'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7', 'Chủ nhật',
+    ],
+
+    MONTHS: SwitchLanguage.getLocalize({
+        vi: [
+            'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7',
+            'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'
+        ],
+        en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    }),
+
+    MAX_ROWS: 7,
+
+    MAX_COLUMNS: 7,
+
+    getDaysInMonth(month, year) {
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        return lastDayOfMonth.getDate();
+    },
+
+    getDayofDate(date) {
+        const WEEKDAYSNAME = ['Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật'];
+        let day = date.getDay();
+        if (date.getDay() === 0) {
+            day = 7;
+        }
+        return WEEKDAYSNAME[day - 1];
+    },
+    formatDate(date) {
+        const padding = (input) => `${input > 9 ? input : `0${input}`}`;
+        if (date && typeof date.getDate === 'function') {
+            return `${padding(date.getDate())}/${
+                padding(date.getMonth() + 1)}/${
+                (date.getFullYear()).toString()}`;
+        }
+        return null;
+    },
+
+};