calendar 42
This commit is contained in:
Alma
parent
c08287ecbc
commit
f02dc53330
@ -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,23 +1066,18 @@ 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">
|
{new Date(arg.event.start).toLocaleTimeString('fr-FR', {
|
||||||
{new Date(arg.event.start).toLocaleTimeString('fr-FR', {
|
hour: '2-digit',
|
||||||
hour: '2-digit',
|
minute: '2-digit'
|
||||||
minute: '2-digit'
|
})}
|
||||||
})}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<span className="font-medium truncate">
|
|
||||||
{arg.event.title}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
)}
|
||||||
<div className="text-[10px] text-white/90 truncate">
|
<span className="font-medium truncate">
|
||||||
{calendarName}
|
{arg.event.title}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -1169,110 +1163,80 @@ 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">
|
||||||
<Input
|
<Label htmlFor="title" className="text-base font-semibold">Titre</Label>
|
||||||
value={eventForm.title}
|
<Input
|
||||||
onChange={(e) =>
|
id="title"
|
||||||
setEventForm({ ...eventForm, title: e.target.value })
|
placeholder="Titre de l'événement"
|
||||||
}
|
value={eventForm.title}
|
||||||
placeholder="Titre de l'événement"
|
onChange={(e) => setEventForm({ ...eventForm, title: e.target.value })}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label className="text-base font-semibold">Calendrier</Label>
|
|
||||||
<div className="grid grid-cols-2 gap-2">
|
|
||||||
{calendars.map((cal) => (
|
|
||||||
<button
|
|
||||||
key={cal.id}
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
console.log('Selecting calendar:', cal.id);
|
|
||||||
setEventForm(prev => ({
|
|
||||||
...prev,
|
|
||||||
calendarId: cal.id
|
|
||||||
}));
|
|
||||||
}}
|
|
||||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
|
|
||||||
eventForm.calendarId === cal.id
|
|
||||||
? 'bg-white ring-2 ring-primary ring-offset-2'
|
|
||||||
: 'bg-gray-50 hover:bg-gray-100'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="w-3 h-3 rounded-full"
|
|
||||||
style={{ backgroundColor: cal.color }}
|
|
||||||
/>
|
|
||||||
<span className={`text-sm ${
|
|
||||||
eventForm.calendarId === cal.id
|
|
||||||
? 'font-medium text-gray-900'
|
|
||||||
: 'text-gray-600'
|
|
||||||
}`}>
|
|
||||||
{cal.name}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label>Début</Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<div className="flex-1">
|
|
||||||
<DatePicker
|
|
||||||
selected={getDateFromString(eventForm.start)}
|
|
||||||
onChange={handleStartDateChange}
|
|
||||||
dateFormat="dd/MM/yyyy"
|
|
||||||
locale="fr"
|
|
||||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
|
||||||
placeholderText="Date"
|
|
||||||
customInput={<Input />}
|
|
||||||
/>
|
|
||||||
</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>
|
||||||
|
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Label>Fin</Label>
|
<Label className="text-base font-semibold">Calendrier</Label>
|
||||||
<div className="flex gap-2">
|
<div className="grid grid-cols-2 gap-2">
|
||||||
<div className="flex-1">
|
{calendars.map((cal) => (
|
||||||
<DatePicker
|
<button
|
||||||
selected={getDateFromString(eventForm.end)}
|
key={cal.id}
|
||||||
onChange={handleEndDateChange}
|
type="button"
|
||||||
dateFormat="dd/MM/yyyy"
|
onClick={() => {
|
||||||
locale="fr"
|
setEventForm(prev => ({
|
||||||
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
...prev,
|
||||||
placeholderText="Date"
|
calendarId: cal.id
|
||||||
customInput={<Input />}
|
}));
|
||||||
minDate={getDateFromString(eventForm.start)}
|
}}
|
||||||
/>
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
|
||||||
</div>
|
eventForm.calendarId === cal.id
|
||||||
<Input
|
? 'bg-white ring-2 ring-primary'
|
||||||
type="time"
|
: 'bg-gray-900 hover:bg-gray-800'
|
||||||
value={eventForm.end ? formatTimeForInput(new Date(eventForm.end)) : ''}
|
}`}
|
||||||
onChange={(e) => {
|
>
|
||||||
const [hours, minutes] = e.target.value.split(':');
|
<div
|
||||||
const date = getDateFromString(eventForm.end);
|
className="w-3 h-3 rounded-full"
|
||||||
date.setHours(parseInt(hours), parseInt(minutes));
|
style={{ backgroundColor: cal.color }}
|
||||||
handleEndDateChange(date);
|
/>
|
||||||
}}
|
<span className={`text-sm ${
|
||||||
className="w-32"
|
eventForm.calendarId === cal.id
|
||||||
/>
|
? 'font-medium text-gray-900'
|
||||||
|
: 'text-gray-100'
|
||||||
|
}`}>
|
||||||
|
{cal.name}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="start" className="text-base font-semibold">Début</Label>
|
||||||
|
<DatePicker
|
||||||
|
selected={eventForm.start ? new Date(eventForm.start) : null}
|
||||||
|
onChange={(date) => setEventForm({ ...eventForm, start: date?.toISOString() || "" })}
|
||||||
|
showTimeSelect
|
||||||
|
timeFormat="HH:mm"
|
||||||
|
timeIntervals={15}
|
||||||
|
dateFormat="dd/MM/yyyy HH:mm"
|
||||||
|
placeholderText="Sélectionner une date et heure"
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="end" className="text-base font-semibold">Fin</Label>
|
||||||
|
<DatePicker
|
||||||
|
selected={eventForm.end ? new Date(eventForm.end) : null}
|
||||||
|
onChange={(date) => setEventForm({ ...eventForm, end: date?.toISOString() || "" })}
|
||||||
|
showTimeSelect
|
||||||
|
timeFormat="HH:mm"
|
||||||
|
timeIntervals={15}
|
||||||
|
dateFormat="dd/MM/yyyy HH:mm"
|
||||||
|
placeholderText="Sélectionner une date et heure"
|
||||||
|
className="w-full"
|
||||||
|
minDate={eventForm.start ? new Date(eventForm.start) : undefined}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user