calendar widget
This commit is contained in:
parent
c207f494c7
commit
dfc08b920a
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user