alma/NeahFront7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

calendar 34

Browse Source
This commit is contained in:
Alma 2025-04-13 17:15:36 +02:00
parent 1996bdc5bb
commit 9736b05ad4
1 changed files with 65 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/calendar/calendar-client.tsx
View File

@ -1084,44 +1084,13 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
} }
.fc .fc-daygrid-event-harness { .fc .fc-daygrid-event-harness {
margin-bottom: 4px; margin-bottom: 2px;
} }
.fc-daygrid-day-frame { .fc-daygrid-day-frame {
min-height: 100px !important; min-height: 100px !important;
height: 100px !important; height: 100px !important;
} }
.fc-daygrid-event {
padding: 2px 4px !important;
border: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.fc-daygrid-event:hover {
filter: brightness(1.1);
}
.fc-daygrid-event .fc-event-title {
font-weight: 600 !important;
font-size: 0.8rem !important;
padding: 0 !important;
}
.fc-daygrid-event .fc-event-time {
font-size: 0.7rem !important;
opacity: 0.9 !important;
padding: 0 !important;
}
.fc-daygrid-event .event-location {
font-size: 0.7rem !important;
opacity: 0.8 !important;
}
.fc-event-title-container {
padding: 0 !important;
}
`}</style> `}</style>
<FullCalendar <FullCalendar
ref={calendarRef} ref={calendarRef}
@ -1156,58 +1125,31 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
})) }))
)} )}
eventContent={(arg) => ( eventContent={(arg) => (
<div className="flex flex-col gap-0.5 w-full overflow-hidden p-1"> <div className="p-1 overflow-hidden">
<div className="flex items-center gap-1"> <div className="font-semibold truncate">{arg.event.title}</div>
<div className="flex-1 font-semibold text-[0.8rem] truncate">
{arg.event.title}
</div>
{!arg.event.allDay && ( {!arg.event.allDay && (
<div className="text-[0.7rem] whitespace-nowrap"> <div className="text-xs opacity-90">
{new Date(arg.event.start).toLocaleTimeString('fr-FR', { {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
hour: '2-digit', hour: '2-digit',
minute: '2-digit' minute: '2-digit'
})} })}
</div> {arg.event.end && (
<> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
hour: '2-digit',
minute: '2-digit'
})}</>
)} )}
</div> </div>
)}
{arg.event.extendedProps.location && ( {arg.event.extendedProps.location && (
<div className="event-location flex items-center gap-1 truncate"> <div className="text-xs opacity-75 truncate">
<MapPin className="inline-block w-3 h-3" /> <MapPin className="inline-block w-3 h-3 mr-1" />
{arg.event.extendedProps.location} {arg.event.extendedProps.location}
</div> </div>
)} )}
</div> </div>
)} )}
eventClassNames={(arg) => { eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
// Generate a lighter version of the calendar color for the background
const color = arg.event.backgroundColor;
return [
'rounded-md',
'transition-all',
'duration-200',
'hover:shadow-md',
'cursor-pointer',
`hover:translate-y-[-1px]`,
'border-l-4'
];
}}
eventBackgroundColor={(arg) => {
const color = arg.event.backgroundColor;
// Convert hex to RGB and lighten it
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
if (result) {
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, 0.15)`;
}
return color;
}}
eventBorderColor={(arg) => arg.event.backgroundColor}
eventTextColor={(arg) => {
const color = arg.event.backgroundColor;
return color;
}}
locale={frLocale} locale={frLocale}
selectable={true} selectable={true}
selectMirror={true} selectMirror={true}