diff --git a/packages/ui-kit/src/components/calendar/CalendarMonth.tsx b/packages/ui-kit/src/components/calendar/CalendarMonth.tsx index df652e138..399df00f9 100644 --- a/packages/ui-kit/src/components/calendar/CalendarMonth.tsx +++ b/packages/ui-kit/src/components/calendar/CalendarMonth.tsx @@ -55,38 +55,57 @@ export const getCoords = (elem: HTMLElement | null): TElemCoords => { }; }; +const MAX_DOTS_PER_DAY = 30; + +// Track which events have been added to each day to avoid race conditions +const dayEventCounts = new Map>(); + const eventRender = (info: EventMountArg, widgetHash: string) => { const { event, backgroundColor } = info; const cal = document.querySelector(`#cal-${widgetHash}`); - const { start } = event; const end = moment(event.end || start) .add(1, "days") .format(); - // loop through event dates const now = moment(start); if (cal) { while (now.isBefore(end, "day")) { - const dot = document.createElement("span"); - dot.style.backgroundColor = backgroundColor; - dot.className = - "fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-start fc-event-end fc-event-today"; - dot.setAttribute("data-id", event.id); - - // append to calendar day + const dateStr = now.format("YYYY-MM-DD"); const daygrid = cal.querySelector( - `.fc-daygrid-day[data-date="${String( - now.format("YYYY-MM-DD") - )}"] .fc-daygrid-day-frame .fc-daygrid-day-events` + `.fc-daygrid-day[data-date="${dateStr}"] .fc-daygrid-day-frame .fc-daygrid-day-events` ); - // check if dot has been added before - const prevDot = daygrid?.querySelector( - `.fc-daygrid-event[data-id="${String(event.id)}"]` - ); + if (daygrid) { + // Initialize tracking for this day if needed + if (!dayEventCounts.has(dateStr)) { + dayEventCounts.set(dateStr, new Set()); + } - if (!prevDot && daygrid) daygrid.append(dot); + const eventsForDay = dayEventCounts.get(dateStr); + if (eventsForDay) { + // Check if we haven't already added this event and haven't exceeded limit + if ( + !eventsForDay.has(event.id) && + eventsForDay.size < MAX_DOTS_PER_DAY + ) { + const prevDot = daygrid.querySelector( + `[data-id="${event.id}"]` + ); + if (!prevDot) { + const dot = document.createElement("span"); + dot.style.backgroundColor = backgroundColor; + dot.className = + "fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-start fc-event-end fc-event-today"; + dot.setAttribute("data-id", event.id); + daygrid.append(dot); + + // Track that we added this event + eventsForDay.add(event.id); + } + } + } + } now.add(1, "days"); } } @@ -347,6 +366,8 @@ export const CalendarMonth: FC = ({ ); useEffect(() => { + // Clear the day event counts when calendar re-renders + dayEventCounts.clear(); setKey((prev) => prev + 1); }, [events, catFilters]); @@ -356,6 +377,7 @@ export const CalendarMonth: FC = ({ locale={locale} key={key} plugins={[dayGridPlugin, interactionPlugin]} + dayMaxEvents={MAX_DOTS_PER_DAY} headerToolbar={{ left: "", center: "prev, title,next", diff --git a/packages/ui-kit/src/globalStyles/calendar.scss b/packages/ui-kit/src/globalStyles/calendar.scss index 4135c12a0..8c43020c6 100644 --- a/packages/ui-kit/src/globalStyles/calendar.scss +++ b/packages/ui-kit/src/globalStyles/calendar.scss @@ -390,6 +390,13 @@ background-color: theme("colors.background"); } + .fc-daygrid-day-bottom { + margin: 0 !important; + width: 100%; + display: flex; + justify-content: center; + } + .fc-daygrid-day-events { display: flex; justify-content: flex-end;