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