|
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'; |
| 4 | +import { useCallback, useEffect, useRef, useState } from 'react'; |
| 5 | +import { DB_Events, Events } from '@/utils'; |
| 6 | +import { formatDateRange } from '@/utils/dateUtils.ts'; |
8 | 7 | import CreateEventDialog from '@/components/MyCalendar/CreateEventButton.tsx';
|
9 | 8 | import Dialog from './Dialog.tsx';
|
10 | 9 |
|
@@ -37,20 +36,6 @@ export default function Calendar({ db_events, onDeleteClicked }: CalendarProps)
|
37 | 36 | const [selectedEvents, setSelectedEvents] = useState<DB_Events[]>([]);
|
38 | 37 | const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
39 | 38 |
|
40 |
| - /* |
41 |
| - const handleDateClick = (clickInfo: EventClickArg) => { |
42 |
| - if (clickInfo.event.start) { |
43 |
| - const clickStartDate = new Date(clickInfo.event.start); |
44 |
| - setSelectedDate(clickStartDate); |
45 |
| -
|
46 |
| - const clickedStartDate = new Date(clickInfo.event.start).toDateString(); |
47 |
| - setSelectedEvents(events.filter((event) => new Date(event.start).toDateString() === clickedStartDate)); |
48 |
| - } else { |
49 |
| - console.log('not available'); |
50 |
| - } |
51 |
| - }; |
52 |
| - */ |
53 |
| - |
54 | 39 | const handleDateSelection = (dateClickInfo: { dateStr: string }) => {
|
55 | 40 | console.log(dateClickInfo);
|
56 | 41 | const clickedDateStr = dateClickInfo.dateStr;
|
@@ -88,47 +73,12 @@ export default function Calendar({ db_events, onDeleteClicked }: CalendarProps)
|
88 | 73 | setCalendarHeight(window.innerWidth < 768 ? 500 : 'auto');
|
89 | 74 | }, []);
|
90 | 75 |
|
91 |
| - /* |
92 |
| - const updateTitle = () => { |
93 |
| - const calendarApi = calendarRef?.current?.getApi(); |
94 |
| - if (calendarApi) { |
95 |
| - const calendarView = calendarApi.view; |
96 |
| - console.log('View start date:', calendarView.currentStart); |
97 |
| -
|
98 |
| - const date = new Date(calendarView.currentStart); |
99 |
| - const year = date.getFullYear(); |
100 |
| - const month = (date.getMonth() + 1).toString().padStart(2, '0'); |
101 |
| - const newTitle = `${year}.${month}`; |
102 |
| -
|
103 |
| - const titleElement = document.querySelector('.fc-toolbar-title'); |
104 |
| - if (titleElement) { |
105 |
| - titleElement.textContent = newTitle; |
106 |
| - } |
107 |
| - } |
108 |
| - }; |
109 |
| - */ |
110 |
| - |
111 | 76 | useEffect(() => {
|
112 |
| - /* |
113 |
| - const calendarApi = calendarRef?.current?.getApi(); |
114 |
| - if (calendarApi) { |
115 |
| - calendarApi.on('datesSet', updateTitle); |
116 |
| - } |
117 |
| -
|
118 |
| - updateTitle(); // 컴포넌트 마운트 시 제목 업데이트 |
119 |
| - */ |
120 |
| - |
121 |
| - /* 캘린더 - 반응형 사이즈 */ |
122 | 77 | window.addEventListener('resize', updateSize);
|
123 | 78 | updateSize(); // 컴포넌트 마운트 시 화면 크기에 따른 업데이트
|
124 | 79 |
|
125 | 80 | return () => {
|
126 | 81 | window.removeEventListener('resize', updateSize);
|
127 |
| - /* |
128 |
| - if (calendarApi) { |
129 |
| - calendarApi.off('datesSet', updateTitle); |
130 |
| - } |
131 |
| - */ |
132 | 82 | };
|
133 | 83 | }, [updateSize]);
|
134 | 84 |
|
|
0 commit comments