calendar widget

This commit is contained in:
Alma 2025-04-13 17:49:23 +02:00
parent c207f494c7
commit dfc08b920a

View File

@ -1115,10 +1115,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
description: event.description,
location: event.location,
calendarId: event.calendarId,
backgroundColor: cal.color,
backgroundColor: `${cal.color}dd`,
borderColor: cal.color,
textColor: '#ffffff',
extendedProps: {
calendarName: cal.name,
location: event.location,
description: event.description,
calendarId: event.calendarId,
@ -1127,34 +1128,45 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
}
}))
)}
eventContent={(arg) => (
<div
className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110"
style={{
backgroundColor: `${arg.event.backgroundColor}`,
boxShadow: `inset 0 0 0 1px ${arg.event.backgroundColor}, 0 1px 2px ${arg.event.backgroundColor}40`
}}
>
<div className="flex items-center gap-1.5 text-xs text-white">
{!arg.event.allDay && (
<span className="font-medium whitespace-nowrap">
{new Date(arg.event.start).toLocaleTimeString('fr-FR', {
hour: '2-digit',
minute: '2-digit'
})}
</span>
)}
<span className="font-medium truncate">
{arg.event.title}
</span>
eventContent={(arg) => {
const calendarName = arg.event.extendedProps.calendarName;
return (
<div
className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110"
style={{
backgroundColor: `${arg.event.backgroundColor}`,
boxShadow: `inset 0 0 0 1px ${arg.event.borderColor}, 0 2px 4px ${arg.event.borderColor}40`
}}
>
<div className="flex flex-col gap-0.5">
<div className="flex items-center gap-1.5 text-xs text-white">
{!arg.event.allDay && (
<span className="font-medium whitespace-nowrap">
{new Date(arg.event.start).toLocaleTimeString('fr-FR', {
hour: '2-digit',
minute: '2-digit'
})}
</span>
)}
<span className="font-medium truncate">
{arg.event.title}
</span>
</div>
<div className="text-[10px] text-white/90 truncate">
{calendarName}
</div>
</div>
</div>
</div>
)}
eventClassNames={(arg) => [
'hover:ring-2 hover:ring-offset-1',
'transition-all duration-150',
arg.event.allDay ? 'py-1' : ''
]}
);
}}
eventClassNames="rounded-md overflow-hidden"
dayCellContent={(arg) => {
return (
<div className="text-xs font-medium">
{arg.dayNumberText}
</div>
);
}}
locale={frLocale}
selectable={true}
selectMirror={true}