mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

wip

Browse source
This commit is contained in:
Peer Richelsen 2021-08-14 14:19:57 +02:00
parent 7ff55b29e0
commit 8e2e798572
1 changed files with 24 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
components/booking/DatePicker.tsx
View file

@ -142,23 +142,29 @@ const DatePicker = ({
setCalendar([ setCalendar([
...emptyDays, ...emptyDays,
...days.map((day) => ( ...days.map((day) => (
<button <div
key={day} key={day}
onClick={() => setSelectedDate(inviteeDate.date(day))} style={{
disabled={isDisabled(day)} paddingTop: "100%",
className={ }}
"text-center w-14 h-14 mx-auto hover:border hover:border-black dark:hover:border-white" + className="w-full relative">
(isDisabled(day) <button
? " text-gray-400 font-light hover:border-0 cursor-default" onClick={() => setSelectedDate(inviteeDate.date(day))}
: " dark:text-white text-primary-500 font-medium") + disabled={isDisabled(day)}
(selectedDate && selectedDate.isSame(inviteeDate.date(day), "day") className={
? " bg-black text-white-important" "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto hover:border hover:border-black dark:hover:border-white" +
: !isDisabled(day) (isDisabled(day)
? " bg-gray-100 dark:bg-gray-600" ? " text-gray-400 font-light hover:border-0 cursor-default"
: "") : " dark:text-white text-primary-500 font-medium") +
}> (selectedDate && selectedDate.isSame(inviteeDate.date(day), "day")
{day} ? " bg-black text-white-important"
</button> : !isDisabled(day)
? " bg-gray-100 dark:bg-gray-600"
: "")
}>
{day}
</button>
</div>
)), )),
]); ]);
}, [selectedMonth, inviteeTimeZone, selectedDate]); }, [selectedMonth, inviteeTimeZone, selectedDate]);
@ -193,7 +199,7 @@ const DatePicker = ({
</button> </button>
</div> </div>
</div> </div>
<div className="grid grid-cols-7 gap-4 text-center border-b border-t sm:border-0"> <div className="grid grid-cols-7 gap-4 text-center border-b border-t dark:border-gray-800 sm:border-0">
{["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
.sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0)) .sort((a, b) => (weekStart.startsWith(a) ? -1 : weekStart.startsWith(b) ? 1 : 0))
.map((weekDay) => ( .map((weekDay) => (
@ -202,7 +208,7 @@ const DatePicker = ({
</div> </div>
))} ))}
</div> </div>
<div className="grid grid-cols-7 gap-y-2 gap-x-4 text-center">{calendar}</div> <div className="grid grid-cols-7 gap-2 text-center">{calendar}</div>
</div> </div>
) : null; ) : null;
}; };