freeflowuniverse/heroweb
28
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
despiegk 2024-10-31 09:28:13 +01:00
parent 663bb672e4
commit d2289e41c3
1 changed files with 36 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
react-shadcn-starter/src/components/calendar/calendar.tsx
View File

@ -1,7 +1,6 @@
import * as React from 'react'
import { addDays, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, parseISO } from 'date-fns'
import { ChevronLeft, ChevronRight, Plus, Moon, Sun, Clock, X } from 'lucide-react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
@ -272,20 +271,6 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
await saveCalendarData(events.filter(event => event.id !== id))
}
const onDragEnd = async (result: any) => {
if (!result.destination) return
const newEvents = Array.from(events)
const [reorderedItem] = newEvents.splice(result.source.index, 1)
newEvents.splice(result.destination.index, 0, {
...reorderedItem,
date: days[result.destination.droppableId].toISOString().split('T')[0],
})
setEvents(newEvents)
await saveCalendarData(newEvents)
}
return (
<div className={`container mx-auto p-4 ${isDarkMode ? 'dark' : ''}`}>
<div className="dark:bg-gray-800 min-h-screen transition-colors duration-300">
@ -335,61 +320,47 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
</div>
</div>
</div>
<DragDropContext onDragEnd={onDragEnd}>
<div className="grid grid-cols-7 gap-2">
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
<div key={day} className="text-center font-bold p-2 dark:text-white">
{day}
</div>
))}
{days.map((day, index) => (
<Droppable key={day.toISOString()} droppableId={index.toString()}>
{(provided: any) => (
<div className="grid grid-cols-7 gap-2">
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
<div key={day} className="text-center font-bold p-2 dark:text-white">
{day}
</div>
))}
{days.map((day) => (
<div
key={day.toISOString()}
className={cn(
"border rounded-lg p-2 min-h-[100px] dark:border-gray-600",
!isSameMonth(day, currentDate) && "bg-gray-100 dark:bg-gray-700",
isSameMonth(day, currentDate) && "dark:bg-gray-800"
)}
>
<div className="text-right dark:text-white">{format(day, 'd')}</div>
{events
.filter((event) => isSameDay(parseISO(event.date), day))
.map((event) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
key={event.id}
className={cn(
"border rounded-lg p-2 min-h-[100px] dark:border-gray-600",
!isSameMonth(day, currentDate) && "bg-gray-100 dark:bg-gray-700",
isSameMonth(day, currentDate) && "dark:bg-gray-800"
"mt-1 p-1 text-sm rounded cursor-pointer",
event.color
)}
onClick={() => setSelectedEvent(event)}
>
<div className="text-right dark:text-white">{format(day, 'd')}</div>
{events
.filter((event) => isSameDay(parseISO(event.date), day))
.map((event, eventIndex) => (
<Draggable key={event.id} draggableId={event.id} index={eventIndex}>
{(provided: any) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={cn(
"mt-1 p-1 text-sm rounded cursor-pointer",
event.color
)}
onClick={() => setSelectedEvent(event)}
>
<div className="flex items-center justify-between">
<span>{event.title}</span>
{!event.isFullDay && (
<span className="text-xs opacity-75">
<Clock className="h-3 w-3 inline-block mr-1" />
{event.time}
</span>
)}
</div>
</div>
)}
</Draggable>
))}
{provided.placeholder}
<div className="flex items-center justify-between">
<span>{event.title}</span>
{!event.isFullDay && (
<span className="text-xs opacity-75">
<Clock className="h-3 w-3 inline-block mr-1" />
{event.time}
</span>
)}
</div>
</div>
)}
</Droppable>
))}
</div>
</DragDropContext>
))}
</div>
))}
</div>
{selectedEvent && (
<EventDetailView
event={selectedEvent}