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

calendar 39

Browse Source
This commit is contained in:
Alma 2025-04-13 17:39:28 +02:00
parent 1c0c494852
commit c8effe3fa7
1 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1127,8 +1127,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
})) }))
)} )}
eventContent={(arg) => ( eventContent={(arg) => (
<div className="px-1 py-0.5 overflow-hidden w-full bg-opacity-90 hover:bg-opacity-100 transition-all"> <div
<div className="flex items-center gap-1 text-xs"> className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm"
style={{
backgroundColor: `${arg.event.backgroundColor}dd`, // Add transparency
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">
{!arg.event.allDay && ( {!arg.event.allDay && (
<span className="font-medium whitespace-nowrap"> <span className="font-medium whitespace-nowrap">
{new Date(arg.event.start).toLocaleTimeString('fr-FR', { {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
@ -1144,10 +1150,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
</div> </div>
)} )}
eventClassNames={(arg) => [ eventClassNames={(arg) => [
'rounded border-l-4', 'hover:ring-2 hover:ring-offset-1',
'hover:ring-2 hover:ring-offset-1 hover:ring-opacity-50',
'transition-all duration-200', 'transition-all duration-200',
'shadow-sm hover:shadow',
arg.event.allDay ? 'py-1' : '' arg.event.allDay ? 'py-1' : ''
]} ]}
locale={frLocale} locale={frLocale}
@ -1163,7 +1167,17 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
slotMinTime="06:00:00" slotMinTime="06:00:00"
slotMaxTime="22:00:00" slotMaxTime="22:00:00"
allDaySlot={true} allDaySlot={true}
allDayText="Toute la journée" allDayText=""
views={{
timeGridWeek: {
allDayText: "",
dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'numeric' }
},
timeGridDay: {
allDayText: "",
dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'numeric' }
}
}}
slotLabelFormat={{ slotLabelFormat={{
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
@ -1225,8 +1239,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>Calendrier</Label> <Label className="text-base font-semibold">Calendrier</Label>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2 p-2 bg-gray-50 rounded-lg border border-gray-100">
{calendars.map((cal) => ( {calendars.map((cal) => (
<button <button
key={cal.id} key={cal.id}
@ -1238,17 +1252,22 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
calendarId: cal.id calendarId: cal.id
})); }));
}} }}
className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-all ${ className={`flex items-center gap-2 px-4 py-2.5 rounded-md transition-all ${
eventForm.calendarId === cal.id eventForm.calendarId === cal.id
? 'border-primary bg-primary/5' ? 'bg-white shadow-md border border-gray-200'
: 'border-gray-200 hover:border-gray-300' : 'hover:bg-white/50'
}`} }`}
style={{
borderLeft: `4px solid ${cal.color}`,
}}
> >
<div <div
className="w-3 h-3 rounded-full" className="w-3 h-3 rounded-full"
style={{ backgroundColor: cal.color }} style={{ backgroundColor: cal.color }}
/> />
<span className="text-sm font-medium">{cal.name}</span> <span className={`text-sm ${eventForm.calendarId === cal.id ? 'font-medium' : ''}`}>
{cal.name}
</span>
</button> </button>
))} ))}
</div> </div>