完整的教务系统前端项目 - 包含所有修复和9月份数据

src/pages/Dashboard/components/CalendarTaskModule/index.jsx

@@ -0,0 +1,73 @@
+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;