antd Calendar 動態接受數據和單獨月份處理

主要的功能是獲取時間后，將時間通過請求發送到後端，後端返回數據 根據數據渲染到日曆上去。 主要難點就是在switch語句上怎麽判斷動態生成的數據。 const getListData = (value) => {

let listData;

switch (value.date()) {

case value.date():
  restTest.items?.map(item=>{
    if(item.case === value.date()) listData = item.listData;
    return listData
  })
  break;

default:

}

return listData || []; }; 我的想法是通過value.date()與後端返回的日期進行比較，如果相等就可以渲染到日曆上

另一個是antd複製的日曆每個月份上顯示的假數據的位置都一樣。一般來説這是不可能的，所以我們也需要根據需要改變。 主要在日曆的dateCellRender方法 api上做修改（dateCellRender：自定义渲染日期单元格，返回内容会被追加到单元格）

let day1 = new Date();

console.log(day1.toISOString().slice(0,7)); //獲取當前時間

const dateCellRender = (value) => {

let listss = []

if(day1.toISOString().slice(0,7) === value._d.toISOString().slice(0,7))

{ listss = getListData(value); }

return (

<ul className="events">
  {listss.map((item) => (
    <li key={item.content}>
      <Badge status={item.type} text={item.content} />
    </li>
  ))}
</ul>

); };

這只是個小例子，所以比較粗糙，但大體功能已經可以了。