update

jirlong · Oct 11, 2024 · 27d0efa · 27d0efa
1 parent 8ed8523
commit 27d0efa
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 2 deletions.
diff --git a/calendar_generator.html b/calendar_generator.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>月曆顯示</title>
+    <style>
+        #calendar table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        #calendar th, #calendar td {
+            border: 1px solid #ddd;
+            text-align: center;
+            padding: 8px;
+        }
+
+        #calendar th {
+            background-color: #f2f2f2;
+        }
+
+        .weekend {
+            background-color: #cceeff;
+        }
+    </style>
+</head>
+<body>
+    <h1>月曆顯示</h1>
+    <label for="year">年份:</label>
+    <select id="year"></select>
+
+    <label for="month">月份:</label>
+    <select id="month"></select>
+
+    <div id="calendar"></div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const yearSelect = document.getElementById('year');
+            const monthSelect = document.getElementById('month');
+            const calendarDiv = document.getElementById('calendar');
+
+            // 填充年份選單
+            const currentYear = new Date().getFullYear();
+            for (let i = currentYear - 10; i <= currentYear + 10; i++) {
+                const option = document.createElement('option');
+                option.value = i;
+                option.textContent = i;
+                yearSelect.appendChild(option);
+            }
+
+            // 填充月份選單
+            const months = [
+                "1月", "2月", "3月", "4月", "5月", 
+                "6月", "7月", "8月", "9月", "10月", 
+                "11月", "12月"
+            ];
+            months.forEach((month, index) => {
+                const option = document.createElement('option');
+                option.value = index;
+                option.textContent = month;
+                monthSelect.appendChild(option);
+            });
+
+            // 當年份或月份更改時生成月曆
+            yearSelect.addEventListener('change', generateCalendar);
+            monthSelect.addEventListener('change', generateCalendar);
+
+            function generateCalendar() {
+                const year = parseInt(yearSelect.value);
+                const month = parseInt(monthSelect.value);
+                if (!year || isNaN(month)) return;
+
+                const firstDay = new Date(year, month, 1).getDay();
+                const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+                // 清除先前的月曆
+                calendarDiv.innerHTML = '';
+
+                // 建立月曆表格
+                const table = document.createElement('table');
+                const headerRow = document.createElement('tr');
+                const daysOfWeek = ["日", "一", "二", "三", "四", "五", "六"];
+                daysOfWeek.forEach(day => {
+                    const th = document.createElement('th');
+                    th.textContent = day;
+                    headerRow.appendChild(th);
+                });
+                table.appendChild(headerRow);
+
+                // 填充日期
+                let row = document.createElement('tr');
+                for (let i = 0; i < firstDay; i++) {
+                    row.appendChild(document.createElement('td'));
+                }
+
+                for (let day = 1; day <= daysInMonth; day++) {
+                    const cell = document.createElement('td');
+                    cell.textContent = day;
+                    // 如果是週末，設置淺藍色
+                    if ((firstDay + day - 1) % 7 === 0 || (firstDay + day - 1) % 7 === 6) {
+                        cell.classList.add('weekend');
+                    }
+                    row.appendChild(cell);
+                    if ((firstDay + day) % 7 === 0) {
+                        table.appendChild(row);
+                        row = document.createElement('tr');
+                    }
+                }
+
+                table.appendChild(row);
+                calendarDiv.appendChild(table);
+            }
+
+            // 預設為當前月份
+            yearSelect.value = currentYear;
+            monthSelect.value = new Date().getMonth();
+            generateCalendar();
+        });
+    </script>
+</body>
+</html>
diff --git a/index.md b/index.md
@@ -1,12 +1,14 @@
+# Tools
+- [Montely Calendar Generator](calendar_generator.html)
+- [Booking jilung](https://calendar.app.google/mpHGC3EpuvnNZ8GAA)
+
 # 2024
 - [MOE Final Report 0827](https://docs.google.com/presentation/d/1YFt0Lh080Mf_w0YMg1POzWbsqKoeHbMsZvcOfx6DH9A/edit?usp=sharing)
 - [Youth Representation 0616](https://docs.google.com/presentation/d/1H2HCB07gZ9eOmrQsQ5dnYi4-pgtzn86mXjJKIY5BK_4/edit?usp=sharing)
 - [NTU Journalism 0603](https://docs.google.com/presentation/d/1FK2Q71AO9DiQeXe3bcqEJHxFfkgNiSuQDkXdDIOXH20/edit?usp=sharing)
 - [Netizen](https://docs.google.com/presentation/d/1E-dg2aSJU_1E9Sd3o8nK5c4K_vPNyWDfpfZ9aKNfdU4/edit?usp=sharing)
 - [Web113-syllabus](https://docs.google.com/document/d/15Wbha4cWBWXKrfmkw2Lpkl5lebcuU2MPR83m9HU2ynY/edit?usp=sharing)
 
-# 2023-12-01 
-
 # 2023
 - AI and Social Resilience Forum
   - [2023-12-01 David](https://docs.google.com/presentation/d/1fFiz8XIlpiIWBDUQu9_x-nQevLgVI5m09GB7yU43Gm8/edit?usp=sharing)