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 * 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,61 +320,47 @@ 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) => (
{days.map((day, index) => ( <div
<Droppable key={day.toISOString()} droppableId={index.toString()}> key={day.toISOString()}
{(provided: any) => ( 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 <div
ref={provided.innerRef} key={event.id}
{...provided.droppableProps}
className={cn( className={cn(
"border rounded-lg p-2 min-h-[100px] dark:border-gray-600", "mt-1 p-1 text-sm rounded cursor-pointer",
!isSameMonth(day, currentDate) && "bg-gray-100 dark:bg-gray-700", event.color
isSameMonth(day, currentDate) && "dark:bg-gray-800"
)} )}
onClick={() => setSelectedEvent(event)}
> >
<div className="text-right dark:text-white">{format(day, 'd')}</div> <div className="flex items-center justify-between">
{events <span>{event.title}</span>
.filter((event) => isSameDay(parseISO(event.date), day)) {!event.isFullDay && (
.map((event, eventIndex) => ( <span className="text-xs opacity-75">
<Draggable key={event.id} draggableId={event.id} index={eventIndex}> <Clock className="h-3 w-3 inline-block mr-1" />
{(provided: any) => ( {event.time}
<div </span>
ref={provided.innerRef} )}
{...provided.draggableProps} </div>
{...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> </div>
)} ))}
</Droppable> </div>
))} ))}
</div> </div>
</DragDropContext>
{selectedEvent && ( {selectedEvent && (
<EventDetailView <EventDetailView
event={selectedEvent} event={selectedEvent}