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

calendar 42

Browse Source
This commit is contained in:
Alma 2025-04-13 18:13:13 +02:00
parent c08287ecbc
commit f02dc53330
1 changed files with 80 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1058,7 +1058,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
})) }))
)} )}
eventContent={(arg) => { eventContent={(arg) => {
const calendarName = arg.event.extendedProps.calendarName;
return ( return (
<div <div
className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110" className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110"
@ -1067,7 +1066,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
boxShadow: `inset 0 0 0 1px ${arg.event.borderColor}, 0 2px 4px ${arg.event.borderColor}40` 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"> <div className="flex items-center gap-1.5 text-xs text-white">
{!arg.event.allDay && ( {!arg.event.allDay && (
<span className="font-medium whitespace-nowrap"> <span className="font-medium whitespace-nowrap">
@ -1081,10 +1079,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
{arg.event.title} {arg.event.title}
</span> </span>
</div> </div>
<div className="text-[10px] text-white/90 truncate">
{calendarName}
</div>
</div>
</div> </div>
); );
}} }}
@ -1169,14 +1163,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
)} )}
<div className="space-y-4 py-4"> <div className="space-y-4 py-4">
<div className="space-y-2"> <div className="grid gap-4 py-4">
<Label>Titre</Label> <div className="grid gap-2">
<Label htmlFor="title" className="text-base font-semibold">Titre</Label>
<Input <Input
value={eventForm.title} id="title"
onChange={(e) =>
setEventForm({ ...eventForm, title: e.target.value })
}
placeholder="Titre de l'événement" placeholder="Titre de l'événement"
value={eventForm.title}
onChange={(e) => setEventForm({ ...eventForm, title: e.target.value })}
/> />
</div> </div>
@ -1188,7 +1182,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
key={cal.id} key={cal.id}
type="button" type="button"
onClick={() => { onClick={() => {
console.log('Selecting calendar:', cal.id);
setEventForm(prev => ({ setEventForm(prev => ({
...prev, ...prev,
calendarId: cal.id calendarId: cal.id
@ -1196,8 +1189,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
}} }}
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${ className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
eventForm.calendarId === cal.id eventForm.calendarId === cal.id
? 'bg-white ring-2 ring-primary ring-offset-2' ? 'bg-white ring-2 ring-primary'
: 'bg-gray-50 hover:bg-gray-100' : 'bg-gray-900 hover:bg-gray-800'
}`} }`}
> >
<div <div
@ -1207,7 +1200,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
<span className={`text-sm ${ <span className={`text-sm ${
eventForm.calendarId === cal.id eventForm.calendarId === cal.id
? 'font-medium text-gray-900' ? 'font-medium text-gray-900'
: 'text-gray-600' : 'text-gray-100'
}`}> }`}>
{cal.name} {cal.name}
</span> </span>
@ -1216,63 +1209,34 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid gap-2">
<div className="space-y-2"> <Label htmlFor="start" className="text-base font-semibold">Début</Label>
<Label>Début</Label>
<div className="flex gap-2">
<div className="flex-1">
<DatePicker <DatePicker
selected={getDateFromString(eventForm.start)} selected={eventForm.start ? new Date(eventForm.start) : null}
onChange={handleStartDateChange} onChange={(date) => setEventForm({ ...eventForm, start: date?.toISOString() || "" })}
dateFormat="dd/MM/yyyy" showTimeSelect
locale="fr" timeFormat="HH:mm"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" timeIntervals={15}
placeholderText="Date" dateFormat="dd/MM/yyyy HH:mm"
customInput={<Input />} placeholderText="Sélectionner une date et heure"
className="w-full"
/> />
</div> </div>
<Input
type="time"
value={eventForm.start ? formatTimeForInput(new Date(eventForm.start)) : ''}
onChange={(e) => {
const [hours, minutes] = e.target.value.split(':');
const date = getDateFromString(eventForm.start);
date.setHours(parseInt(hours), parseInt(minutes));
handleStartDateChange(date);
}}
className="w-32"
/>
</div>
</div>
<div className="space-y-2"> <div className="grid gap-2">
<Label>Fin</Label> <Label htmlFor="end" className="text-base font-semibold">Fin</Label>
<div className="flex gap-2">
<div className="flex-1">
<DatePicker <DatePicker
selected={getDateFromString(eventForm.end)} selected={eventForm.end ? new Date(eventForm.end) : null}
onChange={handleEndDateChange} onChange={(date) => setEventForm({ ...eventForm, end: date?.toISOString() || "" })}
dateFormat="dd/MM/yyyy" showTimeSelect
locale="fr" timeFormat="HH:mm"
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary" timeIntervals={15}
placeholderText="Date" dateFormat="dd/MM/yyyy HH:mm"
customInput={<Input />} placeholderText="Sélectionner une date et heure"
minDate={getDateFromString(eventForm.start)} className="w-full"
minDate={eventForm.start ? new Date(eventForm.start) : undefined}
/> />
</div> </div>
<Input
type="time"
value={eventForm.end ? formatTimeForInput(new Date(eventForm.end)) : ''}
onChange={(e) => {
const [hours, minutes] = e.target.value.split(':');
const date = getDateFromString(eventForm.end);
date.setHours(parseInt(hours), parseInt(minutes));
handleEndDateChange(date);
}}
className="w-32"
/>
</div>
</div>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">