diff --git a/.vscode/settings.json b/.vscode/settings.json index b0d60c1..ca847d7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,7 +8,10 @@ ], "eslint.experimental.useFlatConfig": true, "cSpell.words": [ + "ical", "Logto", - "qrcode" + "qrcode", + "Subcomponents", + "vevent" ], } diff --git a/cspell.json b/cspell.json index d16f8f1..efe88c3 100644 --- a/cspell.json +++ b/cspell.json @@ -21,6 +21,10 @@ "Rehype", "rehypePlugins", "shiki", - "tseslint" + "tseslint", + "ical", + "ICAL", + "vevents", + "getAllSubcomponents" ] -} +} \ No newline at end of file diff --git a/package.json b/package.json index b37903b..60b6338 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "astro": "^4.16.18", "dayjs": "^1.11.13", "framer-motion": "^11.18.2", - "ical.js": "^1.5.0", + "ical.js": "^2.1.0", "md5": "^2.3.0", "openapi-fetch": "^0.12.5", "qrcode": "^1.5.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d75f95e..e26975f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -28,7 +28,7 @@ importers: version: 6.1.17(@fullcalendar/core@6.1.17) '@fullcalendar/icalendar': specifier: ^6.1.17 - version: 6.1.17(@fullcalendar/core@6.1.17)(ical.js@1.5.0) + version: 6.1.17(@fullcalendar/core@6.1.17)(ical.js@2.1.0) '@fullcalendar/react': specifier: ^6.1.17 version: 6.1.17(@fullcalendar/core@6.1.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -60,8 +60,8 @@ importers: specifier: ^11.18.2 version: 11.18.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) ical.js: - specifier: ^1.5.0 - version: 1.5.0 + specifier: ^2.1.0 + version: 2.1.0 md5: specifier: ^2.3.0 version: 2.3.0 @@ -3828,8 +3828,8 @@ packages: engines: {node: '>=18'} hasBin: true - ical.js@1.5.0: - resolution: {integrity: sha512-7ZxMkogUkkaCx810yp0ZGKvq1ZpRgJeornPttpoxe6nYZ3NLesZe1wWMXDdwTkj/b5NtXT+Y16Aakph/ao98ZQ==} + ical.js@2.1.0: + resolution: {integrity: sha512-BOVfrH55xQ6kpS3muGvIXIg2l7p+eoe12/oS7R5yrO3TL/j/bLsR0PR+tYQESFbyTbvGgPHn9zQ6tI4FWyuSaQ==} ignore@5.3.2: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} @@ -6302,10 +6302,10 @@ snapshots: dependencies: '@fullcalendar/core': 6.1.17 - '@fullcalendar/icalendar@6.1.17(@fullcalendar/core@6.1.17)(ical.js@1.5.0)': + '@fullcalendar/icalendar@6.1.17(@fullcalendar/core@6.1.17)(ical.js@2.1.0)': dependencies: '@fullcalendar/core': 6.1.17 - ical.js: 1.5.0 + ical.js: 2.1.0 '@fullcalendar/react@6.1.17(@fullcalendar/core@6.1.17)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: @@ -10623,7 +10623,7 @@ snapshots: husky@9.1.7: {} - ical.js@1.5.0: {} + ical.js@2.1.0: {} ignore@5.3.2: {} diff --git a/src/components/header/HeaderNavigation.tsx b/src/components/header/HeaderNavigation.tsx index 079f728..2df2dc1 100644 --- a/src/components/header/HeaderNavigation.tsx +++ b/src/components/header/HeaderNavigation.tsx @@ -13,7 +13,7 @@ export default function App() { }, { link: "/calendar", - name: "日历", + name: "日程", }, { link: "/about", diff --git a/src/pages/calendar/Schedule.tsx b/src/pages/calendar/Schedule.tsx new file mode 100644 index 0000000..52d758d --- /dev/null +++ b/src/pages/calendar/Schedule.tsx @@ -0,0 +1,335 @@ +import ICAL from "ical.js" +import dayjs from "dayjs" +import { useEffect, useMemo, useRef, useState } from "react" +import { Alert, Button, Calendar, Link, Spinner, Select, SelectItem } from "@heroui/react" +import { today, getLocalTimeZone } from "@internationalized/date" + +import "dayjs/locale/zh-cn" + +dayjs.locale("zh-cn") + +type ScheduleEvent = { + start: Date + end: Date + summary: string + description: string + recurrenceId?: string +} + +const parseCal = async (): Promise => { + const res = await fetch("https://ical.nbtca.space/").then(res => res.text()) + const jcalData = ICAL.parse(res) + return new ICAL.Component(jcalData) +} + +const extractScheduleEventsInRange = ( + icalComp: ICAL.Component, + rangeStart: ICAL.Time, + rangeEnd: ICAL.Time, +): ScheduleEvent[] => { + const vevents = icalComp.getAllSubcomponents("vevent") + return vevents + .flatMap((vevent) => { + const event = new ICAL.Event(vevent) + if (!event.isRecurring()) { + if (event.startDate.compare(rangeEnd) > 0 || event.endDate.compare(rangeStart) < 0) return [] + return [{ + start: event.startDate.toJSDate(), + end: event.endDate.toJSDate(), + summary: event.summary, + description: event.description, + recurrenceId: undefined, + }] + } + return expandEventOccurrences(event, rangeStart, rangeEnd) + }) + .sort((a, b) => b.start.getTime() - a.start.getTime()) +} + +const expandEventOccurrences = ( + event: ICAL.Event, + rangeStart: ICAL.Time, + rangeEnd: ICAL.Time, +): ScheduleEvent[] => { + const occurrences: ScheduleEvent[] = [] + const iterator = event.iterator() + let next: ICAL.Time | null = null + while ((next = iterator.next())) { + if (!next) break + if (next.compare(rangeEnd) > 0) break + if (next.compare(rangeStart) < 0) continue + const details = event.getOccurrenceDetails(next) + occurrences.push({ + start: details.startDate.toJSDate(), + end: details.endDate.toJSDate(), + summary: event.summary, + description: event.description, + recurrenceId: next.toString(), + }) + } + return occurrences +} + +const extractScheduleEvents = (icalComp: ICAL.Component): ScheduleEvent[] => { + const vevents = icalComp.getAllSubcomponents("vevent") + const rangeEnd = ICAL.Time.fromDateString("2026-01-01") + + return vevents + .flatMap((vevent) => { + const event = new ICAL.Event(vevent) + if (event.iterator().complete) { + return [{ + start: event.startDate.toJSDate(), + end: event.endDate.toJSDate(), + summary: event.summary, + description: event.description, + recurrenceId: event.uid || event.startDate.toString(), + + }] + } + return expandEventOccurrences(event, rangeEnd) + }) + .sort((a, b) => b.start.getTime() - a.start.getTime()) +} + +const formatTimePair = (s: Date, e: Date): string => { + const start = dayjs(s) + const end = dayjs(e) + if (start.isSame(end, "day")) { + return `${start.format("HH:mm")} - ${end.format("HH:mm")}` + } + return `${start.format("MM.DD")} - ${end.format("MM.DD")}` +} + +export default function Schedule() { + const [scheduledEvents, setScheduledEvents] = useState([]) + + const defaultDate = today(getLocalTimeZone()) + const [focusedDate, setFocusedDate] = useState(defaultDate) + const dateRefs = useRef>({}) + const calendarRef = useRef(null) + const [loading, setLoading] = useState(true) + + const currentYear = focusedDate.year + const currentMonth = focusedDate.month + + const years = Array.from({ length: 10 }, (_, i) => currentYear - 5 + i) + const months = Array.from({ length: 12 }, (_, i) => i + 1) + + useEffect(() => { + const rangeStart = ICAL.Time.fromJSDate(dayjs(focusedDate.toDate(getLocalTimeZone())).startOf("month").toDate()) + const rangeEnd = ICAL.Time.fromJSDate(dayjs(focusedDate.toDate(getLocalTimeZone())).endOf("month").toDate()) + if (!calendarRef.current) { + setLoading(true) + parseCal().then((icalComp) => { + calendarRef.current = icalComp + const events = extractScheduleEventsInRange( + icalComp, + rangeStart, + rangeEnd, + ) + setScheduledEvents(events) + setLoading(false) + }) + } + else { + const events = extractScheduleEventsInRange( + calendarRef.current, + rangeStart, + rangeEnd, + ) + setScheduledEvents(events) + } + }, [focusedDate]) + + useEffect(() => { + setLoading(true) + parseCal().then((icalComp) => { + setScheduledEvents(extractScheduleEvents(icalComp)) + setLoading(false) + }) + }, []) + + const groupedEvents = useMemo(() => { + const grouped = new Map() + scheduledEvents.forEach((event) => { + const dateKey = dayjs(event.start).format("YYYY-MM-DD") + if (!grouped.has(dateKey)) { + grouped.set(dateKey, []) + } + grouped.get(dateKey)!.push(event) + }) + + // 可选：对每个日期内部事件排序（按开始时间升序） + for (const events of grouped.values()) { + events.sort((a, b) => a.start.getTime() - b.start.getTime()) + } + + // 可选：按照日期从早到晚排序 + return Array.from(grouped.entries()).sort(([a], [b]) => a.localeCompare(b)) + }, [scheduledEvents]) + + const isUserChangeRef = useRef(false) + + useEffect(() => { + if (!isUserChangeRef.current) return + isUserChangeRef.current = false + + const dateKey = dayjs(focusedDate.toDate(getLocalTimeZone())).format("YYYY-MM-DD") + const target = dateRefs.current[dateKey] + if (target) { + target.scrollIntoView({ behavior: "smooth", block: "start" }) + } + else { + // to nearest date if not found + const dates = Object.keys(dateRefs.current).map(d => dayjs(d)) + const closestDate = dates.reduce((prev, curr) => { + return Math.abs(curr.diff(focusedDate.toDate(getLocalTimeZone()), "day")) < Math.abs(prev.diff(focusedDate.toDate(getLocalTimeZone()), "day")) ? curr : prev + }, dates[0]) + const closestKey = closestDate.format("YYYY-MM-DD") + const closestTarget = dateRefs.current[closestKey] + if (closestTarget) { + closestTarget.scrollIntoView({ behavior: "smooth", block: "start" }) + } + } + }, [focusedDate, groupedEvents]) + + return ( +
+
+
日程
+ + {/* Mobile Date Selector */} +
+
+ + +
+
+ console.log(e)} + href="webcal://ical.nbtca.space" + target="_blank" + > + 订阅 + + )} + /> +
+
+
+ { + dayjs(focusedDate.toDate()).format("MMMM YYYY") + } +
+
+ {loading && ( +
+ +
+ )} + {groupedEvents.length === 0 && !loading && ( +
本月暂无日程
+ )} + { + groupedEvents.map(([date, events]) => ( +
dateRefs.current[date] = el} + className="mb-6" + > +
+ { dayjs(date).format("MM.DD") } + { dayjs(date).format("ddd") } +
+ {events.map((event, index) => ( +
+
+
{event.summary}
+ {event.recurrenceId && ( + // 重复 + + + + + )} +
+ {formatTimePair(event.start, event.end)} + { + event.description && ( +

{event.description}

+ ) + } +
+ ))} +
+ )) + } +
+
+
+ { + isUserChangeRef.current = true + setFocusedDate(v) + }} + /> +
+
+
+
+
+ ) +} diff --git a/src/pages/calendar/index.astro b/src/pages/calendar/index.astro index 9716dd6..78e7fe8 100644 --- a/src/pages/calendar/index.astro +++ b/src/pages/calendar/index.astro @@ -1,8 +1,8 @@ --- -import FullCalendar from "./Calendar" +import Schedule from "./Schedule" import BaseLayout from "../../layouts/BaseLayout.astro" --- - + diff --git a/src/pages/join-us.astro b/src/pages/join-us.astro index 41f13da..148c13f 100644 --- a/src/pages/join-us.astro +++ b/src/pages/join-us.astro @@ -121,7 +121,7 @@ import logoAnimated from "./_assets/nbtca.gif"; -webkit-font-smoothing: antialiased; direction: ltr; font-weight: 400; - font-size: 17px; + font-size: 16px; line-height: 1.82353; --body-container-width: 645px; text-align: center; diff --git a/src/styles/global.css b/src/styles/global.css index e05d037..c89fa63 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -149,12 +149,12 @@ button:disabled { html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif; - font-size: 106.25%; + /* font-size: 106.25%; */ quotes: "“" "”"; } body { - font-size: 17px; + /* font-size: 17px; */ line-height: 1.47059; font-weight: 400; letter-spacing: -0.022em;