74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import dayjs from "dayjs";
|
|
import { Calendar } from "@arco-design/web-react";
|
|
import "./index.css";
|
|
|
|
const CalendarTaskModule = ({ tasks = [], selectedDate, onDateChange }) => {
|
|
// 格式化今天的日期
|
|
const today = new Date();
|
|
const formattedToday = `${today.getFullYear()}-${String(
|
|
today.getMonth() + 1
|
|
).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
|
|
|
|
// 获取有任务的日期集合
|
|
const datesWithTasks = new Set(tasks?.map((task) => task.date) || []);
|
|
|
|
// 日历单元格渲染函数
|
|
const dateRender = (current) => {
|
|
const dateStr = current.format("YYYY-MM-DD");
|
|
const hasTasks = datesWithTasks.has(dateStr); // 存在任务
|
|
const isCurrentDay = dateStr === dayjs(selectedDate).format("YYYY-MM-DD");
|
|
const isToday = dateStr === formattedToday;
|
|
|
|
return (
|
|
<div
|
|
className={`calendar-date-cell ${hasTasks ? "has-tasks" : ""} ${
|
|
isCurrentDay ? "is-current-day" : ""
|
|
} ${isToday ? "is-today" : ""}`}
|
|
>
|
|
<div className="date-number">{current.date()}</div>
|
|
{hasTasks && <div className="task-dot"></div>}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const handleDateChange = (date, dateString) => {
|
|
if (onDateChange) {
|
|
// Arco Calendar passes a dayjs object
|
|
if (date && date.format) {
|
|
// Convert dayjs to Date object
|
|
const dateStr = date.format("YYYY-MM-DD");
|
|
const dateObj = new Date(dateStr + "T00:00:00");
|
|
if (!isNaN(dateObj.getTime())) {
|
|
onDateChange(dateObj);
|
|
}
|
|
} else if (dateString) {
|
|
// Fallback to dateString if available
|
|
const dateObj = new Date(dateString + "T00:00:00");
|
|
if (!isNaN(dateObj.getTime())) {
|
|
onDateChange(dateObj);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="module-calendar-task-wrapper">
|
|
<Calendar
|
|
panelWidth="300"
|
|
panel
|
|
defaultValue={formattedToday}
|
|
value={
|
|
selectedDate
|
|
? selectedDate.toISOString().split("T")[0]
|
|
: formattedToday
|
|
}
|
|
style={{ fontSize: "18px" }}
|
|
onChange={handleDateChange}
|
|
dateRender={dateRender}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CalendarTaskModule;
|