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

calendar 34

Browse Source
This commit is contained in:
Alma 2025-04-13 17:15:36 +02:00
parent 1996bdc5bb
commit 9736b05ad4
1 changed files with 65 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -897,9 +897,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
// Update CalendarSelector to handle visibility // Update CalendarSelector to handle visibility
const CalendarSelector = () => ( const CalendarSelector = () => (
<div className="flex flex-wrap items-center gap-2 mb-4"> <div className="flex flex-wrap items-center gap-2 mb-4">
{calendars.map((calendar) => ( {calendars.map((calendar) => (
<div key={calendar.id} className="relative group"> <div key={calendar.id} className="relative group">
<Button <Button
variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"} variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
className="flex items-center gap-2 pr-8" className="flex items-center gap-2 pr-8"
onClick={() => { onClick={() => {
@ -920,9 +920,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
) : null} ) : null}
</div> </div>
</Button> </Button>
{calendar.name !== "Calendrier principal" && ( {calendar.name !== "Calendrier principal" && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity" className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
@ -933,7 +933,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
}} }}
> >
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
</Button> </Button>
)} )}
</div> </div>
))} ))}
@ -1005,9 +1005,9 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
<span className="font-medium">Nouveau calendrier</span> <span className="font-medium">Nouveau calendrier</span>
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
setSelectedEvent(null); setSelectedEvent(null);
setEventForm({ setEventForm({
title: "", title: "",
description: null, description: null,
@ -1023,38 +1023,38 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
> >
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
<span className="font-medium">Nouvel événement</span> <span className="font-medium">Nouvel événement</span>
</Button> </Button>
</div> </div>
<Tabs value={view} className="w-auto"> <Tabs value={view} className="w-auto">
<TabsList> <TabsList>
<TabsTrigger <TabsTrigger
value="dayGridMonth" value="dayGridMonth"
onClick={() => handleViewChange("dayGridMonth")} onClick={() => handleViewChange("dayGridMonth")}
> >
Mois Mois
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="timeGridWeek" value="timeGridWeek"
onClick={() => handleViewChange("timeGridWeek")} onClick={() => handleViewChange("timeGridWeek")}
> >
Semaine Semaine
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger
value="timeGridDay" value="timeGridDay"
onClick={() => handleViewChange("timeGridDay")} onClick={() => handleViewChange("timeGridDay")}
> >
Jour Jour
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
</Tabs> </Tabs>
</div> </div>
<CalendarSelector /> <CalendarSelector />
</Card> </Card>
<StatisticsPanel statistics={statistics} /> <StatisticsPanel statistics={statistics} />
</div> </div>
{/* Calendar */} {/* Calendar */}
<div className="flex-1 bg-white rounded-lg shadow"> <div className="flex-1 bg-white rounded-lg shadow">
@ -1084,54 +1084,23 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
} }
.fc .fc-daygrid-event-harness { .fc .fc-daygrid-event-harness {
margin-bottom: 4px; margin-bottom: 2px;
} }
.fc-daygrid-day-frame { .fc-daygrid-day-frame {
min-height: 100px !important; min-height: 100px !important;
height: 100px !important; height: 100px !important;
} }
.fc-daygrid-event {
padding: 2px 4px !important;
border: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.fc-daygrid-event:hover {
filter: brightness(1.1);
}
.fc-daygrid-event .fc-event-title {
font-weight: 600 !important;
font-size: 0.8rem !important;
padding: 0 !important;
}
.fc-daygrid-event .fc-event-time {
font-size: 0.7rem !important;
opacity: 0.9 !important;
padding: 0 !important;
}
.fc-daygrid-event .event-location {
font-size: 0.7rem !important;
opacity: 0.8 !important;
}
.fc-event-title-container {
padding: 0 !important;
}
`}</style> `}</style>
<FullCalendar <FullCalendar
ref={calendarRef} ref={calendarRef}
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView={view} initialView={view}
headerToolbar={{ headerToolbar={{
left: "prev,next today", left: "prev,next today",
center: "title", center: "title",
right: "", right: "",
}} }}
events={calendars events={calendars
.filter(cal => visibleCalendarIds.includes(cal.id)) .filter(cal => visibleCalendarIds.includes(cal.id))
.flatMap(cal => .flatMap(cal =>
@ -1141,8 +1110,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
start: new Date(event.start), start: new Date(event.start),
end: new Date(event.end), end: new Date(event.end),
allDay: event.isAllDay, allDay: event.isAllDay,
description: event.description, description: event.description,
location: event.location, location: event.location,
calendarId: event.calendarId, calendarId: event.calendarId,
backgroundColor: cal.color, backgroundColor: cal.color,
borderColor: cal.color, borderColor: cal.color,
@ -1156,67 +1125,40 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
})) }))
)} )}
eventContent={(arg) => ( eventContent={(arg) => (
<div className="flex flex-col gap-0.5 w-full overflow-hidden p-1"> <div className="p-1 overflow-hidden">
<div className="flex items-center gap-1"> <div className="font-semibold truncate">{arg.event.title}</div>
<div className="flex-1 font-semibold text-[0.8rem] truncate"> {!arg.event.allDay && (
{arg.event.title} <div className="text-xs opacity-90">
</div> {new Date(arg.event.start).toLocaleTimeString('fr-FR', {
{!arg.event.allDay && ( hour: '2-digit',
<div className="text-[0.7rem] whitespace-nowrap"> minute: '2-digit'
{new Date(arg.event.start).toLocaleTimeString('fr-FR', { })}
{arg.event.end && (
<> - {new Date(arg.event.end).toLocaleTimeString('fr-FR', {
hour: '2-digit', hour: '2-digit',
minute: '2-digit' minute: '2-digit'
})} })}</>
</div> )}
)} </div>
</div> )}
{arg.event.extendedProps.location && ( {arg.event.extendedProps.location && (
<div className="event-location flex items-center gap-1 truncate"> <div className="text-xs opacity-75 truncate">
<MapPin className="inline-block w-3 h-3" /> <MapPin className="inline-block w-3 h-3 mr-1" />
{arg.event.extendedProps.location} {arg.event.extendedProps.location}
</div> </div>
)} )}
</div> </div>
)} )}
eventClassNames={(arg) => { eventClassNames="rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer"
// Generate a lighter version of the calendar color for the background
const color = arg.event.backgroundColor;
return [
'rounded-md',
'transition-all',
'duration-200',
'hover:shadow-md',
'cursor-pointer',
`hover:translate-y-[-1px]`,
'border-l-4'
];
}}
eventBackgroundColor={(arg) => {
const color = arg.event.backgroundColor;
// Convert hex to RGB and lighten it
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
if (result) {
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
return `rgba(${r}, ${g}, ${b}, 0.15)`;
}
return color;
}}
eventBorderColor={(arg) => arg.event.backgroundColor}
eventTextColor={(arg) => {
const color = arg.event.backgroundColor;
return color;
}}
locale={frLocale} locale={frLocale}
selectable={true} selectable={true}
selectMirror={true} selectMirror={true}
dayMaxEvents={false} dayMaxEvents={false}
weekends={true} weekends={true}
select={handleDateSelect} select={handleDateSelect}
eventClick={handleEventClick} eventClick={handleEventClick}
height="auto" height="auto"
aspectRatio={1.8} aspectRatio={1.8}
slotMinTime="06:00:00" slotMinTime="06:00:00"
slotMaxTime="22:00:00" slotMaxTime="22:00:00"
allDaySlot={true} allDaySlot={true}
@ -1230,7 +1172,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
</div> </div>
{/* Calendar dialog */} {/* Calendar dialog */}
<CalendarDialog <CalendarDialog
open={isCalendarModalOpen} open={isCalendarModalOpen}
onClose={() => setIsCalendarModalOpen(false)} onClose={() => setIsCalendarModalOpen(false)}
onSave={handleCalendarSave} onSave={handleCalendarSave}