diff --git a/components/wizard/calendar.tsx b/components/wizard/calendar.tsx index 435138a..c76d0a6 100644 --- a/components/wizard/calendar.tsx +++ b/components/wizard/calendar.tsx @@ -29,11 +29,15 @@ export default function MyCalendar({ ...props }) { const prevBooked = inSelection && getNextSmaller(daysBooked, start) const nextBooked = inSelection && getNextBigger(daysBooked, start) - function isSelected(date: Date) { + function isDateSelected(date: Date) { if (!startDate) { return false } + if (isSameDay(date, startDate)) { + return true + } + // if end is before start, it is not within if (endDate && !isAfter(endDate, startDate)) { return false @@ -50,18 +54,22 @@ export default function MyCalendar({ ...props }) { const isDaysBookedLoaded = !!daysBooked const isInPast = isPast(endOfDay(date)) const isBooked = daysBooked?.includes(dateFormatBackend(date)) + const isSelected = isDateSelected(date) return classnames({ 'react-calendar__tile--past': isMonthView && isInPast, 'react-calendar__tile--booked': isMonthView && isDaysBookedLoaded && isBooked && !isInPast, 'react-calendar__tile--free': - isMonthView && isDaysBookedLoaded && !isBooked && !isInPast, + isMonthView && + isDaysBookedLoaded && + !isBooked && + !isInPast && + !isSelected, 'react-calendar__tile--selected-start': isMonthView && isSameDay(date, startDate), 'react-calendar__tile--selected-end': isMonthView && isSameDay(date, endDate), - 'react-calendar__tile--selected': - isSelected(date) || isSameDay(date, startDate), + 'react-calendar__tile--selected': isSelected, 'react-calendar__tile--unselectable': inSelection && ((prevBooked && date < new Date(prevBooked)) || diff --git a/styles/index.css b/styles/index.css index 12490f1..7033890 100644 --- a/styles/index.css +++ b/styles/index.css @@ -205,6 +205,10 @@ @apply bg-blue-400; } +.react-calendar__tile--selected:hover { + @apply bg-blue-600; +} + .react-calendar__tile--unselectable { @apply cursor-not-allowed; }