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

14
components/booking/DatePicker.tsx
View file

@ -142,12 +142,17 @@ const DatePicker = ({
setCalendar([ setCalendar([
...emptyDays, ...emptyDays,
...days.map((day) => ( ...days.map((day) => (
<button <div
key={day} key={day}
style={{
paddingTop: "100%",
}}
className="w-full relative">
<button
onClick={() => setSelectedDate(inviteeDate.date(day))} onClick={() => setSelectedDate(inviteeDate.date(day))}
disabled={isDisabled(day)} disabled={isDisabled(day)}
className={ className={
"text-center w-14 h-14 mx-auto hover:border hover:border-black dark:hover:border-white" + "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)
? " text-gray-400 font-light hover:border-0 cursor-default" ? " text-gray-400 font-light hover:border-0 cursor-default"
: " dark:text-white text-primary-500 font-medium") + : " dark:text-white text-primary-500 font-medium") +
@ -159,6 +164,7 @@ const DatePicker = ({
}> }>
{day} {day}
</button> </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;
}; };