LouisMazin/Boulangerie_Website
LouisMazin/Boulangerie_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nice calendar

Browse Source
This commit is contained in:
Louis Mazin 2026-09-25 14:47:26 +02:00
parent 7e74d10e8e
commit 36463f8cbb
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/pages/CalendarPage.jsx
View File

@ -85,13 +85,13 @@ const DAYS_IN_MONTH = [
]; ];
const HEADER_HEIGHT = 52; const HEADER_HEIGHT = 35;
const DAY_COLUMN_WIDTH = 52; const DAY_COLUMN_WIDTH = 45;
const MIN_MONTH_WIDTH = 90; const MIN_MONTH_WIDTH = 90;
const MIN_ROW_HEIGHT = 28; const MIN_ROW_HEIGHT = 17.5;
const DEFAULT_EVENT_COLOR = '#2563eb'; const DEFAULT_EVENT_COLOR = '#2563eb';
@ -99,7 +99,7 @@ const EVENT_BAR_WIDTH = 8;
const EVENT_LANE_GAP = 11; const EVENT_LANE_GAP = 11;
const EVENT_LEFT_PADDING = 5; const EVENT_LEFT_PADDING = 3;
const CalendarPage = () => { const CalendarPage = () => {
const [requestError, setRequestError] = useState(''); const [requestError, setRequestError] = useState('');
@ -1452,7 +1452,7 @@ const CalendarPage = () => {
</> </>
} }
> >
<CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden p-4"> <CardContent className="flex min-h-0 flex-1 flex-col overflow-hidden">
{requestError && ( {requestError && (
<Alert variant="destructive" className="mb-3"> <Alert variant="destructive" className="mb-3">
<AlertDescription>{requestError}</AlertDescription> <AlertDescription>{requestError}</AlertDescription>
@ -1461,7 +1461,7 @@ const CalendarPage = () => {
<Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0"> <Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
<div <div
ref={calendarRef} ref={calendarRef}
className="relative min-h-0 flex-1 overflow-auto p-0" className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
style={{ style={{
WebkitOverflowScrolling: WebkitOverflowScrolling:
'touch', 'touch',
@ -1679,8 +1679,8 @@ const CalendarPage = () => {
left-1/2 left-1/2
top-1/2 top-1/2
flex flex
h-6 h-[min(14px,calc(100%))]
min-w-6 min-w-[min(14px,calc(100%))]
-translate-x-1/2 -translate-x-1/2
-translate-y-1/2 -translate-y-1/2
items-center items-center
@ -1735,17 +1735,13 @@ const CalendarPage = () => {
absolute absolute
z-20 z-20
cursor-pointer cursor-pointer
rounded-full
" "
style={{ style={{
left: `${EVENT_LEFT_PADDING + laneOffset}px`, left: `${EVENT_LEFT_PADDING + laneOffset}px`,
width: `${EVENT_BAR_WIDTH}px`, width: `${EVENT_BAR_WIDTH}px`,
top: isStart top: isStart ? '2px' : '-1px',
? 'calc(50% - 3px)' bottom: isEnd ? '2px' : '-1px',
: '-3px', borderRadius: `${isStart ? '9999px' : '0'} ${isStart ? '9999px' : '0'} ${isEnd ? '9999px' : '0'} ${isEnd ? '9999px' : '0'}`,
bottom: isEnd
? 'calc(50% - 3px)'
: '-3px',
backgroundColor: backgroundColor:
eventColor, eventColor,
}} }}
@ -1808,14 +1804,13 @@ const CalendarPage = () => {
key={`single-${event.id}`} key={`single-${event.id}`}
className=" className="
pointer-events-auto pointer-events-auto
h-[18px]
w-[18px]
cursor-pointer cursor-pointer
rounded-full rounded-full
" "
style={{ style={{
backgroundColor: width: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
eventColor, height: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`,
backgroundColor: eventColor,
}} }}
onPointerDown={(pointerEvent) => { onPointerDown={(pointerEvent) => {
pointerEvent.stopPropagation(); pointerEvent.stopPropagation();