Hugging Face's logo

Spaces:
openfree
/
testhtml2
Running

App Files Community
openfree commited on
Commit
b5d652f
·
verified ·
1 Parent(s): 1bd4bc0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +22 -8
index.html CHANGED
@@ -3,8 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Interactive Calendar</title>
7
  <style>
 
8
  * {
9
  margin: 0;
10
  padding: 0;
@@ -248,7 +249,24 @@
248
  let selectedDate = null;
249
  let draggedEvent = null;
250
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
251
  function initCalendar() {
 
252
  updateMonthDisplay();
253
  renderCalendar();
254
  initEventListeners();
@@ -265,7 +283,6 @@
265
  const grid = document.querySelector('.calendar-grid');
266
  grid.innerHTML = '';
267
 
268
- // Add day headers
269
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
270
  days.forEach(day => {
271
  const dayHeader = document.createElement('div');
@@ -277,7 +294,6 @@
277
  const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
278
  const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
279
 
280
- // Add padding days from previous month
281
  const paddingDays = firstDay.getDay();
282
  const prevLastDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
283
  for (let i = paddingDays - 1; i >= 0; i--) {
@@ -285,13 +301,11 @@
285
  grid.appendChild(dayCell);
286
  }
287
 
288
- // Add current month days
289
  for (let day = 1; day <= lastDay.getDate(); day++) {
290
  const dayCell = createDayCell(day, false);
291
  grid.appendChild(dayCell);
292
  }
293
 
294
- // Add padding days for next month
295
  const remainingDays = 42 - (paddingDays + lastDay.getDate());
296
  for (let i = 1; i <= remainingDays; i++) {
297
  const dayCell = createDayCell(i, true);
@@ -306,7 +320,6 @@
306
  cell.addEventListener('dragover', e => e.preventDefault());
307
  cell.addEventListener('drop', handleDrop);
308
 
309
- // Add events for this day
310
  if (!isDifferentMonth) {
311
  const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
312
  const dayEvents = events.filter(event => {
@@ -352,10 +365,10 @@
352
  const dayNumber = dayCell.querySelector('.day-number').textContent;
353
  const newDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayNumber);
354
 
355
- // Update event date
356
  const eventIndex = events.findIndex(e => e.id === draggedEvent.id);
357
  events[eventIndex].date = newDate;
358
 
 
359
  draggedEvent = null;
360
  renderCalendar();
361
  }
@@ -388,6 +401,7 @@
388
  };
389
 
390
  events.push(newEvent);
 
391
  renderCalendar();
392
  closeModal();
393
  document.getElementById('eventTitle').value = '';
@@ -411,7 +425,7 @@
411
  });
412
  }
413
 
414
- // Initialize calendar
415
  initCalendar();
416
  </script>
417
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Interactive Calendar with LocalStorage</title>
7
  <style>
8
+ /* 이전 스타일 코드는 동일하게 유지 */
9
  * {
10
  margin: 0;
11
  padding: 0;
 
249
  let selectedDate = null;
250
  let draggedEvent = null;
251
 
252
+ // LocalStorage에서 이벤트 데이터 로드
253
+ function loadEvents() {
254
+ const savedEvents = localStorage.getItem('calendarEvents');
255
+ if (savedEvents) {
256
+ events = JSON.parse(savedEvents).map(event => ({
257
+ ...event,
258
+ date: new Date(event.date)
259
+ }));
260
+ }
261
+ }
262
+
263
+ // LocalStorage에 이벤트 데이터 저장
264
+ function saveEvents() {
265
+ localStorage.setItem('calendarEvents', JSON.stringify(events));
266
+ }
267
+
268
  function initCalendar() {
269
+ loadEvents(); // 초기화 시 저장된 이벤트 로드
270
  updateMonthDisplay();
271
  renderCalendar();
272
  initEventListeners();
 
283
  const grid = document.querySelector('.calendar-grid');
284
  grid.innerHTML = '';
285
 
 
286
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
287
  days.forEach(day => {
288
  const dayHeader = document.createElement('div');
 
294
  const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
295
  const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
296
 
 
297
  const paddingDays = firstDay.getDay();
298
  const prevLastDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
299
  for (let i = paddingDays - 1; i >= 0; i--) {
 
301
  grid.appendChild(dayCell);
302
  }
303
 
 
304
  for (let day = 1; day <= lastDay.getDate(); day++) {
305
  const dayCell = createDayCell(day, false);
306
  grid.appendChild(dayCell);
307
  }
308
 
 
309
  const remainingDays = 42 - (paddingDays + lastDay.getDate());
310
  for (let i = 1; i <= remainingDays; i++) {
311
  const dayCell = createDayCell(i, true);
 
320
  cell.addEventListener('dragover', e => e.preventDefault());
321
  cell.addEventListener('drop', handleDrop);
322
 
 
323
  if (!isDifferentMonth) {
324
  const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
325
  const dayEvents = events.filter(event => {
 
365
  const dayNumber = dayCell.querySelector('.day-number').textContent;
366
  const newDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), dayNumber);
367
 
 
368
  const eventIndex = events.findIndex(e => e.id === draggedEvent.id);
369
  events[eventIndex].date = newDate;
370
 
371
+ saveEvents(); // 드래그 앤 드롭 후 저장
372
  draggedEvent = null;
373
  renderCalendar();
374
  }
 
401
  };
402
 
403
  events.push(newEvent);
404
+ saveEvents(); // 새 이벤트 추가 후 저장
405
  renderCalendar();
406
  closeModal();
407
  document.getElementById('eventTitle').value = '';
 
425
  });
426
  }
427
 
428
+ // 초기화
429
  initCalendar();
430
  </script>
431
  </body>