1
1
import FullCalendar from '@fullcalendar/react' ;
2
2
import dayGridPlugin from '@fullcalendar/daygrid' ;
3
3
import interactionPlugin from '@fullcalendar/interaction' ;
4
- import { useRef , useState , useEffect , useCallback } from 'react' ;
5
- // import { formatDateRange, formatTime } from '../../utils/dateUtils';
6
- import { Events , DB_Events } from '../../utils/index.ts' ;
7
- import { formatDateRange } from '../../utils/dateUtils' ;
8
- import CreateEventButton from '@/components/MyCalendar/CreateEventButton.tsx' ;
4
+ import { useCallback , useEffect , useRef , useState } from 'react' ;
5
+ import { DB_Events , Events } from '@/utils' ;
6
+ import { formatDateRange } from '@/utils/dateUtils.ts' ;
7
+ import CreateEventDialog from '@/components/MyCalendar/CreateEventButton.tsx' ;
8
+ import Dialog from './Dialog.tsx' ;
9
+
10
+ interface DialogElement {
11
+ openModal : ( ) => void ;
12
+ closeModal : ( ) => void ;
13
+ }
9
14
10
15
interface EventInfo {
11
16
timeText : string ;
@@ -31,20 +36,6 @@ export default function Calendar({ db_events, onDeleteClicked }: CalendarProps)
31
36
const [ selectedEvents , setSelectedEvents ] = useState < DB_Events [ ] > ( [ ] ) ;
32
37
const [ selectedDate , setSelectedDate ] = useState < string | null > ( null ) ;
33
38
34
- /*
35
- const handleDateClick = (clickInfo: EventClickArg) => {
36
- if (clickInfo.event.start) {
37
- const clickStartDate = new Date(clickInfo.event.start);
38
- setSelectedDate(clickStartDate);
39
-
40
- const clickedStartDate = new Date(clickInfo.event.start).toDateString();
41
- setSelectedEvents(events.filter((event) => new Date(event.start).toDateString() === clickedStartDate));
42
- } else {
43
- console.log('not available');
44
- }
45
- };
46
- */
47
-
48
39
const handleDateSelection = ( dateClickInfo : { dateStr : string } ) => {
49
40
console . log ( dateClickInfo ) ;
50
41
const clickedDateStr = dateClickInfo . dateStr ;
@@ -82,47 +73,12 @@ export default function Calendar({ db_events, onDeleteClicked }: CalendarProps)
82
73
setCalendarHeight ( window . innerWidth < 768 ? 500 : 'auto' ) ;
83
74
} , [ ] ) ;
84
75
85
- /*
86
- const updateTitle = () => {
87
- const calendarApi = calendarRef?.current?.getApi();
88
- if (calendarApi) {
89
- const calendarView = calendarApi.view;
90
- console.log('View start date:', calendarView.currentStart);
91
-
92
- const date = new Date(calendarView.currentStart);
93
- const year = date.getFullYear();
94
- const month = (date.getMonth() + 1).toString().padStart(2, '0');
95
- const newTitle = `${year}.${month}`;
96
-
97
- const titleElement = document.querySelector('.fc-toolbar-title');
98
- if (titleElement) {
99
- titleElement.textContent = newTitle;
100
- }
101
- }
102
- };
103
- */
104
-
105
76
useEffect ( ( ) => {
106
- /*
107
- const calendarApi = calendarRef?.current?.getApi();
108
- if (calendarApi) {
109
- calendarApi.on('datesSet', updateTitle);
110
- }
111
-
112
- updateTitle(); // μ»΄ν¬λνΈ λ§μ΄νΈ μ μ λͺ© μ
λ°μ΄νΈ
113
- */
114
-
115
- /* μΊλ¦°λ - λ°μν μ¬μ΄μ¦ */
116
77
window . addEventListener ( 'resize' , updateSize ) ;
117
78
updateSize ( ) ; // μ»΄ν¬λνΈ λ§μ΄νΈ μ νλ©΄ ν¬κΈ°μ λ°λ₯Έ μ
λ°μ΄νΈ
118
79
119
80
return ( ) => {
120
81
window . removeEventListener ( 'resize' , updateSize ) ;
121
- /*
122
- if (calendarApi) {
123
- calendarApi.off('datesSet', updateTitle);
124
- }
125
- */
126
82
} ;
127
83
} , [ updateSize ] ) ;
128
84
@@ -191,6 +147,13 @@ function EventCards({ events, date, onDelete }: EventCardsProps) {
191
147
console . log ( events , date ) ;
192
148
const [ menuOpen , setMenuOpen ] = useState ( - 1 ) ;
193
149
150
+ const dialogRef = useRef < DialogElement | null > ( null ) ;
151
+ const openModal = ( dialogRef : React . RefObject < DialogElement > ) => {
152
+ if ( dialogRef . current ) {
153
+ dialogRef . current ?. openModal ( ) ;
154
+ }
155
+ } ;
156
+
194
157
if ( ! events . length ) {
195
158
return (
196
159
< div className = "min-h-[150px] min-w-[240px] bg-white p-4 text-black" >
@@ -225,14 +188,22 @@ function EventCards({ events, date, onDelete }: EventCardsProps) {
225
188
{ menuOpen === index && (
226
189
< div className = "absolute right-0 top-10 z-10 rounded-lg bg-white shadow-md" >
227
190
< ul >
228
- < li className = "cursor-pointer p-2 hover:bg-gray-100" >
229
- < CreateEventButton
230
- id = { event . id }
231
- title = { event . title }
232
- start_date = { event . start_date }
233
- end_date = { event . end_date }
234
- />
191
+ < li className = "cursor-pointer p-2 hover:bg-gray-100" onClick = { ( ) => openModal ( dialogRef ) } >
192
+ μμ
235
193
</ li >
194
+ < Dialog
195
+ ref = { dialogRef }
196
+ title = "μΌμ μμ "
197
+ desc = { '' }
198
+ children = {
199
+ < CreateEventDialog
200
+ id = { event . id }
201
+ title = { event . title }
202
+ start_date = { event . start_date }
203
+ end_date = { event . end_date }
204
+ />
205
+ }
206
+ />
236
207
< li className = "cursor-pointer p-2 hover:bg-gray-100" onClick = { ( ) => onDelete ( event . id ) } >
237
208
μμ
238
209
</ li >
0 commit comments