diff --git a/src/components/Calendar/handlers/mouseHandlers.ts b/src/components/Calendar/handlers/mouseHandlers.ts index fe73bd3..ad4bcf9 100644 --- a/src/components/Calendar/handlers/mouseHandlers.ts +++ b/src/components/Calendar/handlers/mouseHandlers.ts @@ -47,14 +47,14 @@ export const createMouseHandlers = (props: MouseHandlersProps) => { if (targetColumn) { const rect = targetColumn.getBoundingClientRect(); const relativeY = e.clientY - rect.top; - const hourHeight = rect.height / 24; - const hourIndex = Math.floor(relativeY / hourHeight); + const slotHeight = rect.height / 48; + const slotIndex = Math.floor(relativeY / slotHeight); if (relativeY >= 0 && relativeY <= rect.height) { const highlight = document.createElement("div"); highlight.className = "hour-highlight"; - highlight.style.top = `${hourIndex * hourHeight}px`; - highlight.style.height = `${hourHeight}px`; + highlight.style.top = `${slotIndex * slotHeight}px`; + highlight.style.height = `${slotHeight}px`; (targetColumn as HTMLElement).style.position = "relative"; targetColumn.appendChild(highlight); diff --git a/src/components/Calendar/utils/calendarUtils.ts b/src/components/Calendar/utils/calendarUtils.ts index 85ae9d8..4510ef0 100644 --- a/src/components/Calendar/utils/calendarUtils.ts +++ b/src/components/Calendar/utils/calendarUtils.ts @@ -5,6 +5,16 @@ import { getCalendarDetailAsync } from "../../../features/Calendars/CalendarSlic export const updateSlotLabelVisibility = (currentTime: Date) => { const slotLabels = document.querySelectorAll(".fc-timegrid-slot-label"); + const isCurrentWeekOrDay = checkIfCurrentWeekOrDay(); + + if (!isCurrentWeekOrDay) { + slotLabels.forEach((label) => { + const labelElement = label as HTMLElement; + labelElement.style.opacity = "1"; + }); + return; + } + const currentMinutes = currentTime.getHours() * 60 + currentTime.getMinutes(); slotLabels.forEach((label) => { @@ -30,6 +40,17 @@ export const updateSlotLabelVisibility = (currentTime: Date) => { }); }; +const checkIfCurrentWeekOrDay = (): boolean => { + const todayColumn = document.querySelector(".fc-day-today"); + + if (!todayColumn) { + return false; + } + + const nowIndicator = document.querySelector(".fc-timegrid-now-indicator-arrow"); + return !!nowIndicator; +}; + export const eventToFullCalendarFormat = ( filteredEvents: CalendarEvent[], filteredTempEvents: CalendarEvent[],