Created
April 8, 2026 03:14
-
-
Save a70437043b/d9b0aad3095eb6dfb45e678ebade8b4b to your computer and use it in GitHub Desktop.
Notion Calendar Widget
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <style> | |
| :root { --main-bg: #191919; --text-color: #ffffff; --today-bg: #eb5757; } | |
| body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background: transparent; color: var(--text-color); display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; } | |
| .calendar { width: 280px; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); } | |
| .header { text-align: center; font-weight: bold; margin-bottom: 10px; font-size: 1.1em; color: #f1f1f1; } | |
| .days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; } | |
| .day-name { font-size: 0.7em; color: #888; padding-bottom: 5px; } | |
| .day { font-size: 0.9em; padding: 8px 0; border-radius: 6px; } | |
| .today { background: var(--today-bg); color: white; font-weight: bold; } | |
| .other-month { color: #444; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calendar"> | |
| <div class="header" id="monthYear"></div> | |
| <div class="days-grid" id="daysGrid"></div> | |
| </div> | |
| <script> | |
| function createCalendar() { | |
| const now = new Date(); | |
| const year = now.getFullYear(); | |
| const month = now.getMonth(); | |
| const today = now.getDate(); | |
| const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]; | |
| document.getElementById('monthYear').innerText = `${year}年 ${monthNames[month]}`; | |
| const grid = document.getElementById('daysGrid'); | |
| const dayNames = ["日", "一", "二", "三", "四", "五", "六"]; | |
| dayNames.forEach(d => grid.innerHTML += `<div class="day-name">${d}</div>`); | |
| const firstDay = new Date(year, month, 1).getDay(); | |
| const daysInMonth = new Date(year, month + 1, 0).getDate(); | |
| for (let i = 0; i < firstDay; i++) grid.innerHTML += `<div></div>`; | |
| for (let d = 1; d <= daysInMonth; d++) { | |
| const isToday = d === today ? 'today' : ''; | |
| grid.innerHTML += `<div class="day ${isToday}">${d}</div>`; | |
| } | |
| } | |
| createCalendar(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment