@momo-kits/calendar 0.0.32-beta → 0.0.32

package/src/Util.js

@@ -1 +1,225 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _moment=_interopRequireDefault(require("moment"));var _core=require("@momo-kits/core");var _LunarDateConverter=_interopRequireDefault(require("./LunarDateConverter"));var _holidayData=_interopRequireDefault(require("./holidayData"));function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly){symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable;});}keys.push.apply(keys,symbols);}return keys;}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2.default)(target,key,source[key]);});}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source));}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}}return target;}var I18N_MAP={en:{w:['','Mon','Tues','Wed','Thur','Fri','Sat','Sun'],weekday:['','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],text:{start:'Start',end:'End',date:'Date',save:'Save',clear:'Reset'},date:'DD / MM'},vi:{w:['','T2','T3','T4','T5','T6','T7','CN'],weekday:['','Thứ hai','Thứ ba','Thứ tư','Thứ năm','Thứ sáu','Thứ bảy','Chủ nhật'],text:{start:'Start',end:'End',date:'Date',save:'Save',clear:'Reset'},date:'DD / MM'}};var Solar=function Solar(momentDate){return{solarDay:momentDate.date(),solarMonth:momentDate.month()+1,solarYear:momentDate.year()};};var formatYYYYMMDD=function formatYYYYMMDD(dd,mm,yyyy){return yyyy+"-"+(mm<10?"0"+mm:mm)+"-"+(dd<10?"0"+dd:dd);};var formatDDMM=function formatDDMM(dd,mm){return(dd<10?"0"+dd:dd)+"/"+(mm<10?"0"+mm:mm);};var groupHolidaysByDate=function groupHolidaysByDate(holidays){var groupedHolidays={};if(holidays&&holidays.length>0){holidays.forEach(function(item){var day=item.day,month=item.month,lunar=item.lunar,label=item.label;var key=formatDDMM(day,month);var holidaysObj=groupedHolidays[key]?_objectSpread({},groupedHolidays[key]):_objectSpread({},item);if(groupedHolidays[key]){if(holidaysObj.lunar&&!lunar){holidaysObj=_objectSpread(_objectSpread({},holidaysObj),{},{label:label,mixedLabel:label+", "+holidaysObj.label});}else if(!holidaysObj.lunar&&lunar){holidaysObj=_objectSpread(_objectSpread({},holidaysObj),{},{label:holidaysObj.lunar,mixedLabel:holidaysObj.lunar+", "+label});}}groupedHolidays[key]=holidaysObj;});}return groupedHolidays;};var sortByDate=function sortByDate(arr){if(arr&&arr.length>1){arr.sort(function(a,b){if(a.month>b.month||a.month===b.month&&a.day>b.day){return 1;}return-1;});}return groupHolidaysByDate(arr);};module.exports={WEEKDAYS:['T2','T3','T4','T5','T6','T7','CN'],WEEKDAYSFROMMOMENT:[_core.SwitchLanguage.sun,_core.SwitchLanguage.mon,_core.SwitchLanguage.tue,_core.SwitchLanguage.wed,_core.SwitchLanguage.thu,_core.SwitchLanguage.fri,_core.SwitchLanguage.sat],WEEKDAYSNAME:['Thứ 2','Thứ 3','Thứ 4','Thứ 5','Thứ 6','Thứ 7','Chủ nhật'],MONTHS:['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'],MAX_ROWS:7,MAX_COLUMNS:7,mapWeeKDate:function mapWeeKDate(i){var date=['',_core.SwitchLanguage.mon,_core.SwitchLanguage.tue,_core.SwitchLanguage.wed,_core.SwitchLanguage.thu,_core.SwitchLanguage.fri,_core.SwitchLanguage.sat,_core.SwitchLanguage.sun];return date[i];},mapMonth:function mapMonth(i){var month=new Map([[1,_core.SwitchLanguage.jan],[2,_core.SwitchLanguage.feb],[3,_core.SwitchLanguage.mar],[4,_core.SwitchLanguage.apr],[5,_core.SwitchLanguage.may],[6,_core.SwitchLanguage.jun],[7,_core.SwitchLanguage.jul],[8,_core.SwitchLanguage.aug],[9,_core.SwitchLanguage.sep],[10,_core.SwitchLanguage.oct],[11,_core.SwitchLanguage.nov],[12,_core.SwitchLanguage.dec]]);return month.get(i);},mapMonthShorten:function mapMonthShorten(i){var month=new Map([[1,'Jan'],[2,'Feb'],[3,'Mar'],[4,'Apr'],[5,'May'],[6,'Jun'],[7,'Jul'],[8,'Aug'],[9,'Sep'],[10,'Oct'],[11,'Nov'],[12,'Dec']]);return month.get(i);},getDaysInMonth:function getDaysInMonth(month,year){var lastDayOfMonth=new Date(year,month+1,0);return lastDayOfMonth.getDate();},getHolidaysInMonth:function getHolidaysInMonth(headerInfo){if(headerInfo){var today=(0,_moment.default)();var converter=new _LunarDateConverter.default();var startDate=(0,_moment.default)(headerInfo).startOf('month');var endDate=(0,_moment.default)(headerInfo).endOf('month');var minLunarDate=converter.SolarToLunar(Solar(startDate));var maxLunarDate=converter.SolarToLunar(Solar(endDate));var holidays=[];var currentYear=minLunarDate.lunarYear!==maxLunarDate.lunarYear?[minLunarDate.lunarYear,maxLunarDate.lunarYear]:minLunarDate.lunarYear;if(_holidayData.default.solar[headerInfo.month()+1]){_holidayData.default.solar[headerInfo.month()+1].forEach(function(date){var dateAsMoment=(0,_moment.default)({year:headerInfo.year(),month:date.month-1,date:date.day});if(dateAsMoment.isSameOrAfter(today,'date')){holidays.push(date);}});}_holidayData.default.lunar.forEach(function(item){if(currentYear instanceof Array){var solar1=converter.LunarToSolar({lunarDay:item.lunarDay,lunarMonth:item.lunarMonth,lunarYear:currentYear[0]});var solar2=converter.LunarToSolar({lunarDay:item.lunarDay,lunarMonth:item.lunarMonth,lunarYear:currentYear[1]});var solar1AsMoment=(0,_moment.default)(formatYYYYMMDD(solar1.solarDay,solar1.solarMonth,solar1.solarYear));var solar2AsMoment=(0,_moment.default)(formatYYYYMMDD(solar2.solarDay,solar2.solarMonth,solar2.solarYear));if(solar1AsMoment.isBetween(startDate,endDate)&&solar1AsMoment.isSameOrAfter(today,'date')){holidays.push(_objectSpread(_objectSpread({},item),{},{day:solar1.solarDay,month:solar1.solarMonth}));}else if(solar2AsMoment.isBetween(startDate,endDate)&&solar2AsMoment.isSameOrAfter(today,'date')){holidays.push(_objectSpread(_objectSpread({},item),{},{day:solar2.solarDay,month:solar2.solarMonth}));}}else{var solar=converter.LunarToSolar({lunarDay:item.lunarDay,lunarMonth:item.lunarMonth,lunarYear:currentYear});var solarAsMoment=(0,_moment.default)(formatYYYYMMDD(solar.solarDay,solar.solarMonth,solar.solarYear));if(solarAsMoment.isBetween(startDate,endDate)&&solarAsMoment.isSameOrAfter(today,'date')){holidays.push(_objectSpread(_objectSpread({},item),{},{day:solar.solarDay,month:solar.solarMonth}));}}});return sortByDate(holidays);}return[];},I18N_MAP:I18N_MAP};
+import moment from 'moment';
+
+import { SwitchLanguage } from '@momo-kits/core';
+import LunarDateConverter from './LunarDateConverter';
+import holiday from './holidayData';
+
+const I18N_MAP = {
+    en: {
+        w: ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
+        weekday: ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+        text: {
+            start: 'Start',
+            end: 'End',
+            date: 'Date',
+            save: 'Save',
+            clear: 'Reset'
+        },
+        date: 'DD / MM'
+    },
+    vi: {
+        w: ['', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'],
+        weekday: ['', 'Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật'],
+        text: {
+            start: 'Start',
+            end: 'End',
+            date: 'Date',
+            save: 'Save',
+            clear: 'Reset'
+        },
+        date: 'DD / MM'
+    }
+};
+
+const Solar = (momentDate) => ({
+    solarDay: momentDate.date(),
+    solarMonth: momentDate.month() + 1,
+    solarYear: momentDate.year()
+});
+
+const formatYYYYMMDD = (dd, mm, yyyy) => `${yyyy}-${mm < 10 ? `0${mm}` : mm}-${dd < 10 ? `0${dd}` : dd}`;
+
+const formatDDMM = (dd, mm) => `${dd < 10 ? `0${dd}` : dd}/${mm < 10 ? `0${mm}` : mm}`;
+
+const groupHolidaysByDate = (holidays) => {
+    const groupedHolidays = {};
+    if (holidays && holidays.length > 0) {
+        holidays.forEach((item) => {
+            const {
+                day, month, lunar, label
+            } = item;
+            const key = formatDDMM(day, month);
+            let holidaysObj = groupedHolidays[key] ? { ...groupedHolidays[key] } : { ...item };
+            if (groupedHolidays[key]) {
+                if (holidaysObj.lunar && !lunar) {
+                    holidaysObj = {
+                        ...holidaysObj,
+                        label,
+                        mixedLabel: `${label}, ${holidaysObj.label}`
+                    };
+                } else if (!holidaysObj.lunar && lunar) {
+                    holidaysObj = {
+                        ...holidaysObj,
+                        label: holidaysObj.lunar,
+                        mixedLabel: `${holidaysObj.lunar}, ${label}`
+                    };
+                }
+            }
+            groupedHolidays[key] = holidaysObj;
+        });
+    }
+
+    return groupedHolidays;
+};
+
+const sortByDate = (arr) => {
+    if (arr && arr.length > 1) {
+        arr.sort((a, b) => {
+            if (a.month > b.month || (a.month === b.month && a.day > b.day)) {
+                return 1;
+            }
+            return -1;
+        });
+    }
+
+    return groupHolidaysByDate(arr);
+};
+
+module.exports = {
+
+    WEEKDAYS: [
+        'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN',
+    ],
+
+    WEEKDAYSFROMMOMENT: [SwitchLanguage.sun, SwitchLanguage.mon, SwitchLanguage.tue, SwitchLanguage.wed, SwitchLanguage.thu, SwitchLanguage.fri, SwitchLanguage.sat],
+
+    WEEKDAYSNAME: [
+        'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7', 'Chủ nhật',
+    ],
+
+    MONTHS: [
+        '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'
+    ],
+
+    MAX_ROWS: 7,
+
+    MAX_COLUMNS: 7,
+
+    mapWeeKDate(i) {
+        const date = ['', SwitchLanguage.mon, SwitchLanguage.tue, SwitchLanguage.wed, SwitchLanguage.thu, SwitchLanguage.fri, SwitchLanguage.sat, SwitchLanguage.sun];
+        return date[i];
+    },
+
+    mapMonth(i) {
+        const month = new Map([
+            [1, SwitchLanguage.jan],
+            [2, SwitchLanguage.feb],
+            [3, SwitchLanguage.mar],
+            [4, SwitchLanguage.apr],
+            [5, SwitchLanguage.may],
+            [6, SwitchLanguage.jun],
+            [7, SwitchLanguage.jul],
+            [8, SwitchLanguage.aug],
+            [9, SwitchLanguage.sep],
+            [10, SwitchLanguage.oct],
+            [11, SwitchLanguage.nov],
+            [12, SwitchLanguage.dec],
+        ]);
+        return month.get(i);
+    },
+
+    mapMonthShorten(i) {
+        const month = new Map([
+            [1, 'Jan'],
+            [2, 'Feb'],
+            [3, 'Mar'],
+            [4, 'Apr'],
+            [5, 'May'],
+            [6, 'Jun'],
+            [7, 'Jul'],
+            [8, 'Aug'],
+            [9, 'Sep'],
+            [10, 'Oct'],
+            [11, 'Nov'],
+            [12, 'Dec'],
+        ]);
+        return month.get(i);
+    },
+
+    getDaysInMonth(month, year) {
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        return lastDayOfMonth.getDate();
+    },
+
+    getHolidaysInMonth(headerInfo) {
+        if (headerInfo) {
+            const today = moment();
+            const converter = new LunarDateConverter();
+            const startDate = moment(headerInfo).startOf('month');
+            const endDate = moment(headerInfo).endOf('month');
+            const minLunarDate = converter.SolarToLunar(Solar(startDate));
+            const maxLunarDate = converter.SolarToLunar(Solar(endDate));
+            const holidays = [];
+            const currentYear = minLunarDate.lunarYear !== maxLunarDate.lunarYear ? [minLunarDate.lunarYear, maxLunarDate.lunarYear] : minLunarDate.lunarYear;
+
+            // Handle Solar holidays
+            if (holiday.solar[headerInfo.month() + 1]) {
+                holiday.solar[headerInfo.month() + 1].forEach((date) => {
+                    const dateAsMoment = moment({ year: headerInfo.year(), month: date.month - 1, date: date.day });
+                    if (dateAsMoment.isSameOrAfter(today, 'date')) {
+                        holidays.push(date);
+                    }
+                });
+            }
+
+            holiday.lunar.forEach((item) => {
+                if (currentYear instanceof Array) {
+                    const solar1 = converter.LunarToSolar({
+                        lunarDay: item.lunarDay,
+                        lunarMonth: item.lunarMonth,
+                        lunarYear: currentYear[0]
+                    });
+                    const solar2 = converter.LunarToSolar({
+                        lunarDay: item.lunarDay,
+                        lunarMonth: item.lunarMonth,
+                        lunarYear: currentYear[1]
+                    });
+                    const solar1AsMoment = moment(formatYYYYMMDD(solar1.solarDay, solar1.solarMonth, solar1.solarYear));
+                    const solar2AsMoment = moment(formatYYYYMMDD(solar2.solarDay, solar2.solarMonth, solar2.solarYear));
+                    if (solar1AsMoment.isBetween(startDate, endDate) && solar1AsMoment.isSameOrAfter(today, 'date')) {
+                        holidays.push({
+                            ...item,
+                            day: solar1.solarDay,
+                            month: solar1.solarMonth
+                        });
+                    } else if (solar2AsMoment.isBetween(startDate, endDate) && solar2AsMoment.isSameOrAfter(today, 'date')) {
+                        holidays.push({
+                            ...item,
+                            day: solar2.solarDay,
+                            month: solar2.solarMonth
+                        });
+                    }
+                } else {
+                    const solar = converter.LunarToSolar({
+                        lunarDay: item.lunarDay,
+                        lunarMonth: item.lunarMonth,
+                        lunarYear: currentYear
+                    });
+                    const solarAsMoment = moment(formatYYYYMMDD(solar.solarDay, solar.solarMonth, solar.solarYear));
+                    if (solarAsMoment.isBetween(startDate, endDate) && solarAsMoment.isSameOrAfter(today, 'date')) {
+                        holidays.push({
+                            ...item,
+                            day: solar.solarDay,
+                            month: solar.solarMonth
+                        });
+                    }
+                }
+            });
+
+            return sortByDate(holidays);
+        }
+        return [];
+    },
+    I18N_MAP,
+};

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