@momo-kits/calendar 0.0.41-beta → 0.0.41-beta.10

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,14 +1,16 @@
 {
   "name": "@momo-kits/calendar",
-  "version": "0.0.41-beta",
+  "version": "0.0.41-beta.10",
   "private": false,
   "main": "index.js",
-  "dependencies": {},
+  "dependencies": {
+    "@momo-kits/date-picker": "latest",
+    "moment": "^2.24.0"
+  },
   "peerDependencies": {
     "react": "16.9.0",
     "react-native": ">=0.55",
     "prop-types": "^15.7.2",
-    "moment": "^2.24.0",
     "@momo-kits/core": ">=0.0.5-beta"
   },
   "devDependencies": {},

package/src/Day/index.js

@@ -1,193 +1,210 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-import {
-    View,
-    TouchableHighlight,
-    Text
-} from 'react-native';
-import { Colors, SwitchLanguage } from '@momo-kits/core';
+import {View, TouchableHighlight, Text} from 'react-native';
+import {Colors, SwitchLanguage} from '@momo-kits/core';
 import style from './style';
 
 class Day extends Component {
-    constructor(props) {
-        super(props);
-        this.statusCheck();
-    }
+  constructor(props) {
+    super(props);
+    this.statusCheck();
+  }
 
-    chooseDay = () => {
-        const { onChoose, date } = this.props;
-        onChoose && onChoose(date);
-    };
+  chooseDay = () => {
+    const {onChoose, date} = this.props;
+    onChoose && onChoose(date);
+  };
 
-    findHoliday = (date, holidays) => {
-        if (date && holidays && holidays.length > 0) {
-            const day = date.date();
-            const month = date.month() + 1;
-            return holidays.find((item) => item.day === day && item.month === month);
-        }
-        return null;
-    };
+  findHoliday = (date, holidays) => {
+    if (date && holidays && holidays.length > 0) {
+      const day = date.date();
+      const month = date.month() + 1;
+      return holidays.find(item => item.day === day && item.month === month);
+    }
+    return null;
+  };
 
-    checkHoliday = (date, holidays) => {
-        const holiday = this.findHoliday(date, holidays);
-        return {
-            solarHoliday: !!(holiday && !holiday.lunar),
-            lunarHoliday: !!(holiday && holiday.lunar)
-        };
+  checkHoliday = (date, holidays) => {
+    const holiday = this.findHoliday(date, holidays);
+    return {
+      solarHoliday: !!(holiday && !holiday.lunar),
+      lunarHoliday: !!(holiday && holiday.lunar),
     };
+  };
 
-    statusCheck = (props) => {
-        const {
-            startDate,
-            endDate,
-            date = null,
-            minDate,
-            maxDate,
-            empty,
-            index,
-            isShowLunar,
-            tabSelected,
-            isDoubleDateMode,
-            lunarDate,
-            isSolarHoliday,
-            isLunarHoliday,
-            price
-        } = props || this.props;
-        this.isValid = date && (date >= minDate || date.isSame(minDate, 'day')) && (date <= maxDate || date.isSame(maxDate, 'day'));
-        this.isMid = isDoubleDateMode && date > startDate && date < endDate
-            || (!date && empty >= startDate && empty <= endDate);
-        this.isStart = date && date.isSame(startDate, 'd');
-        this.isStartPart = this.isStart && endDate;
-        this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
-        this.isFocus = this.isMid || this.isStart || this.isEnd;
-        this.isWeekEnd = index === 6 || index === 5;
-        this.showLunar = isShowLunar;
-        this.lunarDate = lunarDate;
-        this.isDoubleDateMode = isDoubleDateMode;
-        this.isLunarHoliday = isLunarHoliday;
-        this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
-        this.isSolarHoliday = isSolarHoliday;
-        this.isInScope = isDoubleDateMode ? (tabSelected === 0 || (tabSelected === 1 && startDate && date && date.isSameOrAfter(startDate, 'day'))) : true;
-        return this.isFocus || this.diffPrice;
-    };
+  statusCheck = props => {
+    const {
+      startDate,
+      endDate,
+      date = null,
+      minDate,
+      maxDate,
+      empty,
+      index,
+      isShowLunar,
+      tabSelected,
+      isDoubleDateMode,
+      lunarDate,
+      isSolarHoliday,
+      isLunarHoliday,
+      price,
+    } = props || this.props;
+    this.isValid =
+      date &&
+      (date >= minDate || date.isSame(minDate, 'day')) &&
+      (date <= maxDate || date.isSame(maxDate, 'day'));
+    this.isMid =
+      (isDoubleDateMode && date > startDate && date < endDate) ||
+      (!date && empty >= startDate && empty <= endDate);
+    this.isStart = date && date.isSame(startDate, 'd');
+    this.isStartPart = this.isStart && endDate;
+    this.isEnd = isDoubleDateMode && date && date.isSame(endDate, 'day');
+    this.isFocus = this.isMid || this.isStart || this.isEnd;
+    this.isWeekEnd = index === 6 || index === 5;
+    this.showLunar = isShowLunar;
+    this.lunarDate = lunarDate;
+    this.isDoubleDateMode = isDoubleDateMode;
+    this.isLunarHoliday = isLunarHoliday;
+    this.isLunarDayStart = this.lunarDate && this.lunarDate.lunarDay === 1;
+    this.isSolarHoliday = isSolarHoliday;
+    this.isInScope = isDoubleDateMode
+      ? tabSelected === 0 ||
+        (tabSelected === 1 &&
+          startDate &&
+          date &&
+          date.isSameOrAfter(startDate, 'day'))
+      : true;
+    return this.isFocus || this.diffPrice;
+  };
 
-    shouldComponentUpdate(nextProps) {
-        const {
-            isDoubleDateMode, isShowLunar, tabSelected, isSolarHoliday,
-            isLunarHoliday,
-            price,
-            isBestPrice,
-            startDate,
-            endDate
-        } = this.props;
-        const prevStatus = this.isFocus;
-        const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
-        const lunarChange = isShowLunar !== nextProps.isShowLunar;
-        const nextStatus = this.statusCheck(nextProps);
-        const tabChange = tabSelected !== nextProps.tabSelected;
-        const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
-        const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
-        const diffPrice = price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
-        const startDateChange = startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
-        const endDateChange = endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
-        return !!(prevStatus !== nextStatus || selectionModeChange || lunarChange || tabChange || solarHoliday || lunarHoliday || diffPrice || startDateChange || endDateChange);
-    }
+  shouldComponentUpdate(nextProps) {
+    const {
+      isDoubleDateMode,
+      isShowLunar,
+      tabSelected,
+      isSolarHoliday,
+      isLunarHoliday,
+      price,
+      isBestPrice,
+      startDate,
+      endDate,
+    } = this.props;
+    const prevStatus = this.isFocus;
+    const selectionModeChange = isDoubleDateMode !== nextProps.isDoubleDateMode;
+    const lunarChange = isShowLunar !== nextProps.isShowLunar;
+    const nextStatus = this.statusCheck(nextProps);
+    const tabChange = tabSelected !== nextProps.tabSelected;
+    const solarHoliday = isSolarHoliday !== nextProps.isSolarHoliday;
+    const lunarHoliday = isLunarHoliday !== nextProps.isLunarHoliday;
+    const diffPrice =
+      price !== nextProps.price && isBestPrice !== nextProps.isBestPrice;
+    const startDateChange =
+      startDate && !startDate?.isSame?.(nextProps.startDate, 'day');
+    const endDateChange =
+      endDate && !endDate?.isSame?.(nextProps.endDate, 'day');
+    return !!(
+      prevStatus !== nextStatus ||
+      selectionModeChange ||
+      lunarChange ||
+      tabChange ||
+      solarHoliday ||
+      lunarHoliday ||
+      diffPrice ||
+      startDateChange ||
+      endDateChange
+    );
+  }
 
-    render() {
-        const {
-            date, empty, isDoubleDateMode, price, isBestPrice, isShowPrice, labelFrom, labelTo, isHideLabel
-        } = this.props;
-        const text = date ? date.date() : '';
-        return (
-            <View style={style.dayContainer}>
-                <View style={[
-                    this.isMid && !empty && style.mid,
-                    this.isStartPart && style.dayStartContainer,
-                    this.isEnd && style.dayEndContainer
-
-                ]}
-                >
-                    {this.isValid && this.isInScope
-                        ? (
-                            <TouchableHighlight
-                                style={[
-                                    style.day,
-                                    (this.isStart || this.isEnd) && style.focused
-                                ]}
-                                underlayColor="rgba(255, 255, 255, 0.35)"
-                                onPress={this.chooseDay}
-                            >
-                                <>
-                                    <Text style={[
-                                        style.dayText,
-                                        this.isWeekEnd && style.weekendDay,
-                                        this.isSolarHoliday && style.weekendDay,
-                                        (this.isStart || this.isEnd) && style.focusedText,
-                                    ]}
-                                    >
-                                        {text}
-                                    </Text>
-                                    {
-                                        this.lunarDate && this.showLunar && (
-                                            <Text style={[
-                                                style.lunarDayText,
-                                                (this.isLunarHoliday || this.isLunarDayStart) && style.weekendDay,
-                                                (this.isStart || this.isEnd) && style.focusedText,
-                                            ]}
-                                            >
-                                                {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
-                                            </Text>
-                                        )
-                                    }
-                                </>
-                            </TouchableHighlight>
-                        )
-                        : (
-                            <View style={[style.day]}>
-                                <Text style={[
-                                    style.dayText,
-                                    style.dayTextDisabled,
-                                ]}
-                                >
-                                    {text}
-                                </Text>
-                                {
-                                    this.lunarDate && this.showLunar && text ? (
-                                        <Text style={[
-                                            style.lunarDayText,
-                                            style.dayTextDisabled,
-                                        ]}
-                                        >
-                                            {this.lunarDate.lunarDay === 1 ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}` : this.lunarDate.lunarDay}
-                                        </Text>
-                                    ) : <View />
-                                }
-                            </View>
-                        )}
-                </View>
-
-                {(isDoubleDateMode && this.isStart && !isHideLabel) && (
-                    <View style={style.txtGo}>
-                        <Text style={{ fontSize: 8, color: 'white' }}>
-                            {labelFrom || SwitchLanguage.departing}
-                        </Text>
-                    </View>
-                )}
-                {(isDoubleDateMode && this.isEnd && !isHideLabel) && (
-                    <View style={style.txtBack}>
-                        <Text style={{ fontSize: 8, color: 'white' }}>
-                            {labelTo || SwitchLanguage.returning}
-                        </Text>
-                    </View>
+  render() {
+    const {
+      date,
+      empty,
+      isDoubleDateMode,
+      price,
+      isBestPrice,
+      isShowPrice,
+      labelFrom,
+      labelTo,
+      isHideLabel,
+    } = this.props;
+    const text = date ? date.date() : '';
+    return (
+      <View style={style.dayContainer}>
+        <View
+          style={[
+            this.isMid && !empty && style.mid,
+            this.isStartPart && style.dayStartContainer,
+            this.isEnd && style.dayEndContainer,
+          ]}>
+          {this.isValid && this.isInScope ? (
+            <TouchableHighlight
+              style={[style.day, (this.isStart || this.isEnd) && style.focused]}
+              underlayColor="rgba(255, 255, 255, 0.35)"
+              onPress={this.chooseDay}>
+              <>
+                <Text
+                  style={[
+                    style.dayText,
+                    this.isWeekEnd && style.weekendDay,
+                    this.isSolarHoliday && style.weekendDay,
+                    (this.isStart || this.isEnd) && style.focusedText,
+                  ]}>
+                  {text}
+                </Text>
+                {this.lunarDate && this.showLunar && (
+                  <Text
+                    style={[
+                      style.lunarDayText,
+                      (this.isLunarHoliday || this.isLunarDayStart) &&
+                        style.weekendDay,
+                      (this.isStart || this.isEnd) && style.focusedText,
+                    ]}>
+                    {this.lunarDate.lunarDay === 1
+                      ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                      : this.lunarDate.lunarDay}
+                  </Text>
                 )}
-                {this.isValid
-                && this.isInScope
-                && !!(price)
-                && <Text style={[style.price, isBestPrice && { color: Colors.pink_05_b }]}>{price}</Text>}
+              </>
+            </TouchableHighlight>
+          ) : (
+            <View style={[style.day]}>
+              <Text style={[style.dayText, style.dayTextDisabled]}>{text}</Text>
+              {this.lunarDate && this.showLunar && text ? (
+                <Text style={[style.lunarDayText, style.dayTextDisabled]}>
+                  {this.lunarDate.lunarDay === 1
+                    ? `${this.lunarDate.lunarDay}/${this.lunarDate.lunarMonth}`
+                    : this.lunarDate.lunarDay}
+                </Text>
+              ) : (
+                <View />
+              )}
             </View>
-        );
-    }
+          )}
+        </View>
+
+        {isDoubleDateMode && this.isStart && !isHideLabel && (
+          <View style={style.txtGo}>
+            <Text style={{fontSize: 8, color: 'white'}}>
+              {labelFrom || SwitchLanguage.departing}
+            </Text>
+          </View>
+        )}
+        {isDoubleDateMode && this.isEnd && !isHideLabel && (
+          <View style={style.txtBack}>
+            <Text style={{fontSize: 8, color: 'white'}}>
+              {labelTo || SwitchLanguage.returning}
+            </Text>
+          </View>
+        )}
+        {this.isValid && this.isInScope && !!price && (
+          <Text style={[style.price, isBestPrice && {color: Colors.pink_05_b}]}>
+            {price}
+          </Text>
+        )}
+      </View>
+    );
+  }
 }
 
 export default Day;

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;
+    },
+
+};