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:
@@ -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[],
|
||||
|
||||
Reference in New Issue
Block a user