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

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

@ -1,7 +1,6 @@
import * as React from 'react' import * as React from 'react'
import { addDays, format, startOfWeek, endOfWeek, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, parseISO } from 'date-fns' 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 { ChevronLeft, ChevronRight, Plus, Moon, Sun, Clock, X } from 'lucide-react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { import {
@ -272,20 +271,6 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
await saveCalendarData(events.filter(event => event.id !== id)) 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 ( return (
<div className={`container mx-auto p-4 ${isDarkMode ? 'dark' : ''}`}> <div className={`container mx-auto p-4 ${isDarkMode ? 'dark' : ''}`}>
<div className="dark:bg-gray-800 min-h-screen transition-colors duration-300"> <div className="dark:bg-gray-800 min-h-screen transition-colors duration-300">
@ -335,19 +320,15 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
</div> </div>
</div> </div>
</div> </div>
<DragDropContext onDragEnd={onDragEnd}>
<div className="grid grid-cols-7 gap-2"> <div className="grid grid-cols-7 gap-2">
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => ( {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => (
<div key={day} className="text-center font-bold p-2 dark:text-white"> <div key={day} className="text-center font-bold p-2 dark:text-white">
{day} {day}
</div> </div>
))} ))}
{days.map((day, index) => ( {days.map((day) => (
<Droppable key={day.toISOString()} droppableId={index.toString()}>
{(provided: any) => (
<div <div
ref={provided.innerRef} key={day.toISOString()}
{...provided.droppableProps}
className={cn( className={cn(
"border rounded-lg p-2 min-h-[100px] dark:border-gray-600", "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) && "bg-gray-100 dark:bg-gray-700",
@ -357,13 +338,9 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
<div className="text-right dark:text-white">{format(day, 'd')}</div> <div className="text-right dark:text-white">{format(day, 'd')}</div>
{events {events
.filter((event) => isSameDay(parseISO(event.date), day)) .filter((event) => isSameDay(parseISO(event.date), day))
.map((event, eventIndex) => ( .map((event) => (
<Draggable key={event.id} draggableId={event.id} index={eventIndex}>
{(provided: any) => (
<div <div
ref={provided.innerRef} key={event.id}
{...provided.draggableProps}
{...provided.dragHandleProps}
className={cn( className={cn(
"mt-1 p-1 text-sm rounded cursor-pointer", "mt-1 p-1 text-sm rounded cursor-pointer",
event.color event.color
@ -380,16 +357,10 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
)} )}
</div> </div>
</div> </div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
))} ))}
</div> </div>
</DragDropContext> ))}
</div>
{selectedEvent && ( {selectedEvent && (
<EventDetailView <EventDetailView
event={selectedEvent} event={selectedEvent}