@zohodesk/components/es/DateTime/CalendarView.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { Span_propTypes, CalendarView_propTypes } from "./props/propTypes";
import { CalendarView_defaultProps, Span_defaultProps } from "./props/defaultProps";
import { Container, Box } from "../Layout";
import style from "./DateTime.module.css";
import { getMonthEnd } from "../utils/datetime/common";
import DaysRow from "./DaysRow";
/* eslint css-modules/no-unused-class: [0, { markAsUsed: ['container', 'header', 'thArrowConatainer', 'thArrow', 'thMonYear', 'days', 'daysStr', 'timesection', 'timeStr', 'dropDownContainer', 'dropDown', 'footer', 'space'] }] */

export default class CalendarView extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelect(day, month, year, e) {
    const {
      onSelect
    } = this.props;
    onSelect(day, month, year, e);
  }

  render() {
    const {
      date,
      year,
      month,
      dataId,
      needBorder,
      dayNames,
      dayNamesShort,
      todayMonth,
      todayDate,
      todayYear,
      weekStartDay,
      holidays
    } = this.props;
    const userSeeDate = new Date(year, month, 1);
    const userSeeDay = (userSeeDate.getDay() - weekStartDay + dayNames.length) % dayNames.length + 1;
    const userSeeYear = userSeeDate.getFullYear();
    const userSeeMonth = userSeeDate.getMonth();
    const monthEnd = getMonthEnd(month, year);
    const lastMonth = 11;
    const firstMonth = 0; // let noOfRow = 5;
    // if (
    //   (monthEnd === 31 && userSeeDay >= 6) ||
    //   (monthEnd === 30 && userSeeDay === 7)
    // ) {
    //   noOfRow = 6;
    // } else if (monthEnd === 28 && userSeeDay === 1) {
    //   noOfRow = 4;
    // }

    let incremday = 1;
    let incremleti = 1;
    let isSelectedDay = false;
    let isToday = false;

    const rows = (() => {
      const rowArr = [];

      for (let j = 1; j <= 6; j++) {
        const dayArr = [];
        let output = null;

        for (let i = 1; i < 8; i++) {
          isSelectedDay = false;
          let tdclass = `${style.datesStr} ${style.grid}`;

          if (holidays.includes(i - 1)) {
            tdclass += ` ${style.holiday}`;
          }

          if (incremleti >= userSeeDay && incremday <= monthEnd) {
            if (parseInt(date) === incremday && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
              isSelectedDay = true;
            } else if (todayDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear) {
              isToday = true;
              isSelectedDay = false;
            } else {
              isSelectedDay = false;
              isToday = false;
            }

            output = /*#__PURE__*/React.createElement(Span, {
              i: i,
              isActive: isSelectedDay,
              tdclass: tdclass,
              handleSelect: this.handleSelect,
              incremday: incremday,
              userSeeMonth: userSeeMonth,
              userSeeYear: userSeeYear,
              dataId: isSelectedDay ? `${dataId}_dateSelected` : `${dataId}_date`,
              isToday: isToday
            });
            incremday++;
          } else if (incremleti < userSeeDay) {
            let prevMonth = userSeeMonth - 1;
            let prevYear = userSeeYear;

            if (userSeeMonth === firstMonth) {
              prevMonth = lastMonth;
              prevYear = userSeeYear - 1;
            }

            const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
            const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti; // isSelectedDay =
            // prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
            // isToday = prevDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;

            output = /*#__PURE__*/React.createElement(Span, {
              i: i //isActive={isSelectedDay}
              ,
              tdclass: `${tdclass} ${style.invalidDate}`,
              handleSelect: this.handleSelect,
              incremday: prevDate,
              userSeeMonth: prevMonth,
              userSeeYear: prevYear,
              dataId: `${dataId}_invalidDate` // isToday={isToday}

            });
          } else if (incremleti > monthEnd) {
            let nextMonth = userSeeMonth + 1;
            let nextYear = userSeeYear;

            if (userSeeMonth === lastMonth) {
              nextMonth = firstMonth;
              nextYear = userSeeYear + 1;
            }

            const nextDate = incremleti - (userSeeDay - 1) - monthEnd; // console.log('last dates',incremleti, monthEnd,'nextDate',nextDate,'monthEnd',monthEnd,'userSeeDay',userSeeDay)
            // isSelectedDay =
            // nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
            // isToday = nextDate === incremday && todayMonth === userSeeMonth && todayYear === userSeeYear ? true : false;

            output = /*#__PURE__*/React.createElement(Span, {
              i: i // isActive={isSelectedDay}
              ,
              tdclass: `${style.invalidDate} ${tdclass}`,
              handleSelect: this.handleSelect,
              incremday: nextDate,
              userSeeMonth: nextMonth,
              userSeeYear: nextYear,
              dataId: `${dataId}_invalidDate` //isToday={isToday}

            });
          } else {
            output = /*#__PURE__*/React.createElement(Box, {
              key: i,
              className: `${style.grid}`
            });
          }

          incremleti++;
          dayArr.push(output);
        }
        /* eslint-disable react/forbid-component-props */


        rowArr.push( /*#__PURE__*/React.createElement(Container, {
          key: j,
          alignBox: "row",
          align: "center",
          isCover: false,
          className: style.dateRow
        }, dayArr));
      }

      return rowArr;
    })();

    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
      dayNames: dayNames,
      dayNamesShort: dayNamesShort,
      ariaLabel: dayNamesShort,
      holidays: holidays
    }), /*#__PURE__*/React.createElement("div", {
      "data-id": `${dataId}_dateContainer`,
      "data-test-id": `${dataId}_dateContainer`,
      className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
    }, rows));
  }

}
CalendarView.propTypes = CalendarView_propTypes;
CalendarView.defaultProps = CalendarView_defaultProps;
export class Span extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleSelectChild = this.handleSelectChild.bind(this);
  }

  handleSelectChild(e) {
    const {
      handleSelect,
      incremday,
      userSeeMonth,
      userSeeYear
    } = this.props;
    handleSelect(incremday, userSeeMonth, userSeeYear, e);
  }

  render() {
    const {
      tdclass,
      incremday,
      i,
      dataId,
      isActive,
      isToday
    } = this.props;
    return /*#__PURE__*/React.createElement(Box, {
      dataId: dataId,
      className: `${isActive ? style.active : ''} ${isToday ? style.today : ''} ${tdclass} `,
      key: i,
      onClick: this.handleSelectChild,
      "aria-label": incremday
    }, incremday);
  }

}
Span.propTypes = Span_propTypes;
Span.defaultProps = Span_defaultProps;