如何让点击antd日历的特定单元格时打开一个窗口？

Question

下午好！ 我使用 ant design 的日历，我想这样做，当您单击任何带有日期的日历图块时，会在该图块的正上方打开一个小模式窗口，请告诉我如何实现？ 也就是说，窗口的位置根据单击的图块而变化。

说实话，我什至不知道如何完成这项任务

Answer 1

如果您可以对所有日期选择使用通用弹出窗口，最简单的方法是使用日历的

onSelect

事件。

import React from 'react';
import { Calendar } from 'antd';

const CalApp = () => {

  onSelect = (value) => {
    // Handle the click event on a calendar day
    alert(`Selected Date: ${value.format('YYYY-MM-DD')}`);
  };


  render() {
    return (
      <Calendar
        onSelect={this.onSelect}
        ...
      />
    );
  }
}

export default CalApp ;

如果您可以在日期单元格内添加按钮，则可以使用

cellRender

demo

import React from 'react';
import './index.css';
import type { Dayjs } from 'dayjs';
import { Button, CalendarProps, message, Popconfirm } from 'antd';
import { Calendar } from 'antd';

const App: React.FC = () => {
  const confirm = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    message.success('Click on Yes');
  };

  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    message.error('Click on No');
  };

  const dateCellRender = (value: Dayjs) => {
    return (
      <Popconfirm
        title="Delete the task"
        description={`Are you sure to delete this task${value}?`}
        onConfirm={confirm}
        onCancel={cancel}
        okText="Yes"
        cancelText="No"
      >
        <Button>pop up</Button>
      </Popconfirm>
    );
  };

  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
    if (info.type === 'date') return dateCellRender(current);
    return info.originNode;
  };

  return <Calendar cellRender={cellRender} />;
};

export default App;