Antd calendar control to achieve a calendar year

Version “ANTD “: “^4.7.0” implementation idea: through traversal render out 12 months of calendar. Points to note: DateCellRender appends to the cell and dateFullCellRender overwrites the cell. Add validRange to this API. Otherwise, clicking on the blank will trigger the selected event even if the date is not the current month. 3. The custom cell drop-down menu cannot be displayed and the binding event cannot be triggered, which needs to be solved through the style control hierarchy.

import React, { useState, useEffect } from 'react';
import { Calendar, Dropdown, Menu, Row, Col } from 'antd';
import moment from 'moment';
import './index.less';

const FullYearPage = (props) = > {
  const arr = ['01'.'02'.'03'.'04'.'05'.'06'.'07'.'08'.'09'.'10'.'11'.'12'];
    const [currentDate, setCurrentDate] = useState(' ');

  const menu = (
    <Menu onClick={onClick}>
      <Menu.Item key={'delete'} >delete</Menu.Item>
    </Menu>
  );

  const dateFullCellRender = (value, item) = > {
    const panelDate = value.format('YYYY-MM-DD');
    const currentDate = value.valueOf();
    const startDate = moment(` 2021 -${item}`)
      .startOf('month')
      .valueOf(); // The first day of the month
    const endDate = moment(` 2021 -${item}`)
      .endOf('month')
      .valueOf(); // Last day of the month
    // Take the timestamp of the first and last day of the current month, within this interval indicates the date of the current month, other extra dates are not rendered
    // The events bound to the Dropdown menu are not triggered
    return currentDate >= startDate && currentDate <= endDate ? (
      <Dropdown overlay={menu} trigger={['contextMenu']} >
        <div className="custom-cell"  onContextMenu={()= > setCurrentDate(panelDate)}>
          <div>{panelDate.slice(-2)}</div>
        </div>
      </Dropdown>
    ) : null;
  };

  return (
    <div className="holiday-page">
      <Row gutter={20}>
        {arr.map((item) => {
          const startDate = moment(`2021-${item}`).startOf('month');
          const endDate = moment(`2021-${item}`).endOf('month');
          return (
            <Col span={6} key={item}>
              <Calendar
                headerRender={()= > <div className="custom-header">{item + 'month '}</div>} // dateFullCellRender={(value) => dateFullCellRender(value, Item)} fullscreen={false} defaultValue={moment(' 2021-${item} ')} // But clicking on the blank of a date other than the current month will still trigger the selected event. // So I added the validRange configuration. The value of this configuration is a range, the start and end dates of the current month. validRange={[startDate, endDate]} /></Col>
          );
        })}
      </Row>
    </div>
  );
};

export default FullYearPage;

Copy the code

To the end.