community增加事件详情
This commit is contained in:
@@ -279,6 +279,31 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
|
|||||||
dataMapRef.current = dataMap;
|
dataMapRef.current = dataMap;
|
||||||
}, [dataMap]);
|
}, [dataMap]);
|
||||||
|
|
||||||
|
// 当数据变化时,更新所有已挂载的单元格内容
|
||||||
|
useEffect(() => {
|
||||||
|
if (!calendarRef.current) return;
|
||||||
|
|
||||||
|
// 获取所有日期单元格并更新内容
|
||||||
|
const calendarEl = calendarRef.current.getApi().el;
|
||||||
|
const dayCells = calendarEl?.querySelectorAll('.fc-daygrid-day');
|
||||||
|
|
||||||
|
dayCells?.forEach((cell: Element) => {
|
||||||
|
const dateAttr = cell.getAttribute('data-date');
|
||||||
|
if (!dateAttr) return;
|
||||||
|
|
||||||
|
const date = new Date(dateAttr);
|
||||||
|
const dateStr = dayjs(date).format('YYYYMMDD');
|
||||||
|
const dateData = dataMapRef.current.get(dateStr);
|
||||||
|
const isToday = dayjs(date).isSame(dayjs(), 'day');
|
||||||
|
|
||||||
|
// 找到 day-top 容器并更新内容
|
||||||
|
const dayTop = cell.querySelector('.fc-daygrid-day-top');
|
||||||
|
if (dayTop) {
|
||||||
|
dayTop.innerHTML = createCellContentHTML(date, dateData, isToday);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [dataMap]);
|
||||||
|
|
||||||
// 处理日期点击
|
// 处理日期点击
|
||||||
const handleDateClick = useCallback((arg: { date: Date; dateStr: string }) => {
|
const handleDateClick = useCallback((arg: { date: Date; dateStr: string }) => {
|
||||||
const dateStr = dayjs(arg.date).format('YYYYMMDD');
|
const dateStr = dayjs(arg.date).format('YYYYMMDD');
|
||||||
@@ -396,15 +421,6 @@ export const FullCalendarPro: React.FC<FullCalendarProProps> = ({
|
|||||||
);
|
);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// 当数据变化时,需要重新渲染日历
|
|
||||||
useEffect(() => {
|
|
||||||
if (calendarRef.current) {
|
|
||||||
const api = calendarRef.current.getApi();
|
|
||||||
// 触发重新渲染
|
|
||||||
api.render();
|
|
||||||
}
|
|
||||||
}, [data]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
height={height}
|
height={height}
|
||||||
|
|||||||
Reference in New Issue
Block a user