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) => {
|
||||
const calendarName = arg.event.extendedProps.calendarName;
|
||||
return (
|
||||
<div
|
||||
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`
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
<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>
|
||||
</div>
|
||||
<div className="text-[10px] text-white/90 truncate">
|
||||
{calendarName}
|
||||
</div>
|
||||
)}
|
||||
<span className="font-medium truncate">
|
||||
{arg.event.title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1169,110 +1163,80 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
|
||||
)}
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Titre</Label>
|
||||
<Input
|
||||
value={eventForm.title}
|
||||
onChange={(e) =>
|
||||
setEventForm({ ...eventForm, title: e.target.value })
|
||||
}
|
||||
placeholder="Titre de l'événement"
|
||||
/>
|
||||
</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 className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="title" className="text-base font-semibold">Titre</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="Titre de l'événement"
|
||||
value={eventForm.title}
|
||||
onChange={(e) => setEventForm({ ...eventForm, title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Fin</Label>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex-1">
|
||||
<DatePicker
|
||||
selected={getDateFromString(eventForm.end)}
|
||||
onChange={handleEndDateChange}
|
||||
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 />}
|
||||
minDate={getDateFromString(eventForm.start)}
|
||||
/>
|
||||
</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"
|
||||
/>
|
||||
<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={() => {
|
||||
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'
|
||||
: 'bg-gray-900 hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
<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-100'
|
||||
}`}>
|
||||
{cal.name}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</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 className="flex items-center space-x-2">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user