react-native-ethiopian-calendar/lib/module/calendar/components/GregorianCalender.js

A react native calendar component which is mainly intended for applications which require Ethiopian calendar.

import React, { useCallback, useMemo, useState } from 'react';
import { View } from 'react-native';
import { iterator } from '../../utils/generics/array';
import { Day } from './day';
import { Header } from './header';
import { makeStyle } from './styles';
import { toEthiopic } from '../../utils/Calendar';
export const GregorianCalendar = props => {
  const {
    date = {
      day: new Date().getDate(),
      month: new Date().getMonth() + 1,
      year: new Date().getFullYear()
    },
    onDatePress,
    theme,
    onModeChange,
    hideHeaderButtons,
    selectedDate,
    setSelectedDate
  } = props;
  const [day, _setDate] = useState(1);
  const [month, setMonth] = useState(selectedDate ? selectedDate.gregorian.month : date.month);
  const [year, setYear] = useState(selectedDate ? selectedDate.gregorian.year : date.year);
  const styles = makeStyle(theme);
  const lastDayOfTheCurrentMonth = useMemo(() => {
    return new Date(year, month, 0).getDate();
  }, [month, year]);
  const lastDayOfPreviousMonth = useMemo(() => {
    return new Date(year, month - 1, 0).getDate();
  }, [month, year]);
  const firstDayOfTheMonthIndex = useMemo(() => {
    return new Date(year, month - 1, day).getDay();
  }, [day, month, year]);
  const lastDayOfTheMonthIndex = useMemo(() => {
    return new Date(year, month, 0).getDay();
  }, [month, year]);
  const nextDays = useMemo(() => {
    return 7 - lastDayOfTheMonthIndex - 1;
  }, [lastDayOfTheMonthIndex]);
  const currentYear = useMemo(() => {
    return new Date().getFullYear();
  }, []);
  const currentMonthIndex = useMemo(() => {
    return new Date().getMonth() + 1;
  }, []);
  const gotoToday = useCallback(() => {
    setMonth(currentMonthIndex);
    setYear(currentYear);
  }, [currentMonthIndex, currentYear]);
  const next = useCallback(() => {
    const newMonth = month + 1;
    if (newMonth > 12) {
      setMonth(1);
      setYear(previous => previous + 1);
    } else {
      setMonth(newMonth);
    }
  }, [month]);
  const prev = useCallback(() => {
    const newMonth = month - 1;
    if (newMonth < 1) {
      setMonth(12);
      setYear(previous => previous - 1);
    } else {
      setMonth(newMonth);
    }
  }, [month]);
  const currentDay = useMemo(() => {
    return new Date().getDate();
  }, []);
  const today = iDate => {
    return iDate === currentDay && month === currentMonthIndex && year === currentYear;
  };
  const selected = iDate => {
    if (selectedDate) {
      return selectedDate.gregorian.date === iDate && selectedDate.gregorian.month === month && selectedDate.gregorian.year === year;
    }
    return false;
  };
  const handleDayPress = pressedDay => {
    const convertToEthiopic = toEthiopic(year, month, pressedDay);
    setSelectedDate({
      ethiopian: {
        date: convertToEthiopic.day,
        month: convertToEthiopic.month,
        year: convertToEthiopic.year
      },
      gregorian: {
        date: pressedDay,
        month: month,
        year: year
      }
    });
    onDatePress({
      ethiopian: {
        date: convertToEthiopic.day,
        month: convertToEthiopic.month,
        year: convertToEthiopic.year
      },
      gregorian: {
        date: pressedDay,
        month: month,
        year: year
      }
    });
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Header, {
    currentDay: currentDay,
    today: gotoToday,
    next: next,
    prev: prev,
    month: month,
    year: year,
    locals: 'ENG',
    mode: "GC",
    theme: theme,
    onModeChange: onModeChange,
    hideHeaderButtons: hideHeaderButtons
  }), /*#__PURE__*/React.createElement(View, {
    style: [styles.daysWrapper]
  }, iterator(firstDayOfTheMonthIndex).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: lastDayOfPreviousMonth - firstDayOfTheMonthIndex + i - 1,
    extraDays: true,
    theme: theme
  })), iterator(lastDayOfTheCurrentMonth).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: i + 1,
    today: today(i + 1),
    selected: selected(i + 1),
    onPress: () => handleDayPress(i + 1),
    theme: theme
  })), iterator(nextDays).map((_item, i) => /*#__PURE__*/React.createElement(Day, {
    key: i,
    dayNumber: i + 1,
    extraDays: true,
    theme: theme
  }))));
};
//# sourceMappingURL=GregorianCalender.js.map