nice calendar

This commit is contained in:
Louis Mazin 2026-09-25 14:47:26 +02:00
parent 7e74d10e8e
commit 36463f8cbb

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