955de3133c
* Add correct start/end time for weekly calendar by looking at calendar's availability * Always show 24h in weekly calendar, added scroll functionality, current time and events in correct timezone * Improved current time style * Show slots for every minute, so also odd timeslots due to offsets work * Show correct timeformat for weekly view on left side time stamps * Fix data attr for debug * Position events differently so we can accomodate for offset start times. * Removed schedule from public event api, because we don't use it anymore * Fixed alignment of timeslots in weekview calendar. * Added loading spinner to weekly calendar * Force weekly view calendar hour labels to show 00 minutes, also for gmt x.5 timezones that are offset 30 mins. * Change event duration blocks in weekly calendar when user changes duration in multi duration event * Improved week view slot time label alignments for shorter durations --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com>
44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
import { Calendar, Clock } from "lucide-react";
|
|
|
|
import dayjs from "@calcom/dayjs";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { Badge, Dialog, DialogContent } from "@calcom/ui";
|
|
|
|
import { useTimePreferences } from "../../../lib";
|
|
import { useBookerStore } from "../../store";
|
|
import { useEvent } from "../../utils/event";
|
|
import { BookEventForm } from "./BookEventForm";
|
|
|
|
export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCancel: () => void }) {
|
|
const { t } = useLocale();
|
|
const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
|
|
const selectedDuration = useBookerStore((state) => state.selectedDuration);
|
|
const { data } = useEvent();
|
|
const parsedSelectedTimeslot = dayjs(selectedTimeslot);
|
|
const { timeFormat } = useTimePreferences();
|
|
|
|
return (
|
|
<Dialog open={visible} onOpenChange={onCancel}>
|
|
<DialogContent
|
|
type={undefined}
|
|
enableOverflow
|
|
className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-8 [&_.modalsticky]:py-4">
|
|
<h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
|
|
<div className="my-4 flex space-x-2 rounded-md leading-none">
|
|
<Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
|
|
<span>
|
|
{parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.format(timeFormat)}
|
|
</span>
|
|
</Badge>
|
|
{(selectedDuration || data?.length) && (
|
|
<Badge variant="grayWithoutHover" startIcon={Clock} size="lg">
|
|
<span>{selectedDuration || data?.length}</span>
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<BookEventForm onCancel={onCancel} />
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|