react-life-design/src/DatePicker/components/Calendar.tsx

import * as React from 'react';
import * as R from 'ramda';

import { DAYS } from '../utils/days';
import { WrapperTable, DaysRow, DaysColumn } from '../DatePicker.styled';

interface IProps {
  year: number;
  month: number;
  day: number;
  dayOfTheWeek: number;
  onClick: (e?: any, i?: any) => any;
  selectedDayWeek: (e: number) => void;
}

export default ({ year, month, day, onClick, selectedDayWeek }: IProps) => {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  let offset = firstDay.getDay();
  let dayCount = 0;

  const isActive = (condition: boolean, dayWeek: number) => {
    if (condition) {
      selectedDayWeek(dayWeek);
      return true;
    }

    return false;
  }

  return (
    <WrapperTable>
      <thead>
        <DaysRow>{ DAYS.map(day => <td key={Math.random()}>{day}</td>) }</DaysRow>
      </thead>
      <tbody>
        { R.range(0, 6).map(() => (
          <tr key={Math.random()}>
            { R.range(0, 7).map((e, i) => {
              if (offset === 0) {
                if (dayCount >= lastDay.getDate()) {
                  return null;
                }
                dayCount++;
                return (
                  <DaysColumn active={isActive(dayCount === day, i)} key={Math.random()}>
                    <button
                      value={dayCount}
                      type='button'
                      onClick={(e) => onClick(e, i)}
                    >
                      {dayCount}
                    </button>
                  </DaysColumn>
                )
              }
              offset--;
              return <DaysColumn active={false} key={Math.random()}>&nbsp;</DaysColumn>
            })}
          </tr>
        )) }
      </tbody>
    </WrapperTable>
  );
}