Update calendar hover and slot label opacity logic

- Update hover effect to highlight 30-minute time slots instead of 1-hour slots
- Reset slot label opacity to full visibility when viewing other weeks/days
This commit is contained in:
lenhanphung
2025-10-01 13:25:52 +07:00
parent 7c6240442c
commit 1228f0a50e
2 changed files with 25 additions and 4 deletions
@@ -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);
@@ -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[],