mirror of
https://github.com/m1ngsama/FUJI.git
synced 2025-12-24 10:51:27 +00:00
Merge pull request #88 from wen-templari/schedule
refactor: refactor calendar page
This commit is contained in:
clas
GitHub
commit
87eb9ef897
9 changed files with 360 additions and 18 deletions
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
|
|
@ -8,7 +8,10 @@
|
|||
],
|
||||
"eslint.experimental.useFlatConfig": true,
|
||||
"cSpell.words": [
|
||||
"ical",
|
||||
"Logto",
|
||||
"qrcode"
|
||||
"qrcode",
|
||||
"Subcomponents",
|
||||
"vevent"
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@
|
|||
"Rehype",
|
||||
"rehypePlugins",
|
||||
"shiki",
|
||||
"tseslint"
|
||||
"tseslint",
|
||||
"ical",
|
||||
"ICAL",
|
||||
"vevents",
|
||||
"getAllSubcomponents"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: {}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default function App() {
|
|||
},
|
||||
{
|
||||
link: "/calendar",
|
||||
name: "日历",
|
||||
name: "日程",
|
||||
},
|
||||
{
|
||||
link: "/about",
|
||||
|
|
|
|||
335
src/pages/calendar/Schedule.tsx
Normal file
335
src/pages/calendar/Schedule.tsx
Normal file
|
|
@ -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<ICAL.Component> => {
|
||||
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<ScheduleEvent>((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<ScheduleEvent>((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<ScheduleEvent[]>([])
|
||||
|
||||
const defaultDate = today(getLocalTimeZone())
|
||||
const [focusedDate, setFocusedDate] = useState(defaultDate)
|
||||
const dateRefs = useRef<Record<string, HTMLDivElement | null>>({})
|
||||
const calendarRef = useRef<ICAL.Component | null>(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<string, ScheduleEvent[]>()
|
||||
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 (
|
||||
<div className="box-border flex justify-center">
|
||||
<section className="max-w-[1024px] px-[22px] mb-24 flex flex-col w-full">
|
||||
<div className="my-8 text-2xl font-bold">日程</div>
|
||||
|
||||
{/* Mobile Date Selector */}
|
||||
<div className="sm:hidden sticky top-0 bg-white z-10 py-4 -mx-[22px] px-[22px] border-b border-gray-200 mb-4">
|
||||
<div className="flex gap-4">
|
||||
<Select
|
||||
placeholder="选择年份"
|
||||
selectedKeys={[currentYear.toString()]}
|
||||
defaultSelectedKeys={[currentYear.toString()]}
|
||||
onSelectionChange={(keys) => {
|
||||
const year = parseInt(Array.from(keys)[0] as string)
|
||||
setFocusedDate(focusedDate.set({ year }))
|
||||
}}
|
||||
className="flex-1"
|
||||
size="sm"
|
||||
aria-label="选择年份"
|
||||
renderValue={(items) => {
|
||||
return items.map(item => `${item.key}年`)
|
||||
}}
|
||||
>
|
||||
{years.map(year => (
|
||||
<SelectItem key={year.toString()} textValue={year.toString()}>
|
||||
{year}年
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
<Select
|
||||
placeholder="选择月份"
|
||||
selectedKeys={[currentMonth.toString()]}
|
||||
defaultSelectedKeys={[currentMonth.toString()]}
|
||||
onSelectionChange={(keys) => {
|
||||
const month = parseInt(Array.from(keys)[0] as string)
|
||||
setFocusedDate(focusedDate.set({ month }))
|
||||
}}
|
||||
className="flex-1"
|
||||
size="sm"
|
||||
aria-label="选择月份"
|
||||
renderValue={(items) => {
|
||||
return items.map(item => `${item.key}月`)
|
||||
}}
|
||||
>
|
||||
{months.map(month => (
|
||||
<SelectItem key={month.toString()} textValue={month.toString()}>
|
||||
{month}月
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Alert
|
||||
title="你可以在日历 App 中订阅我们的日程"
|
||||
className="my-4 items-center"
|
||||
endContent={(
|
||||
<Button
|
||||
color="default"
|
||||
showAnchorIcon
|
||||
size="sm"
|
||||
as={Link}
|
||||
variant="flat"
|
||||
onPress={e => console.log(e)}
|
||||
href="webcal://ical.nbtca.space"
|
||||
target="_blank"
|
||||
>
|
||||
订阅
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col sm:flex-row gap-8 pt-4">
|
||||
<div className="flex flex-col grow">
|
||||
<div className="text-2xl font-bold w-full">
|
||||
{
|
||||
dayjs(focusedDate.toDate()).format("MMMM YYYY")
|
||||
}
|
||||
</div>
|
||||
<div className="h-[0.5px] bg-gray-300 my-4" />
|
||||
{loading && (
|
||||
<div className="text-gray-500 h-[30vh] flex items-center justify-center w-full">
|
||||
<Spinner label="加载中..."></Spinner>
|
||||
</div>
|
||||
)}
|
||||
{groupedEvents.length === 0 && !loading && (
|
||||
<div className="text-gray-500">本月暂无日程</div>
|
||||
)}
|
||||
{
|
||||
groupedEvents.map(([date, events]) => (
|
||||
<div
|
||||
key={date}
|
||||
ref={el => dateRefs.current[date] = el}
|
||||
className="mb-6"
|
||||
>
|
||||
<div className="text-lg mb-2">
|
||||
<span className="text-lg mr-1"> { dayjs(date).format("MM.DD") } </span>
|
||||
<span className="text-base"> { dayjs(date).format("ddd") } </span>
|
||||
</div>
|
||||
{events.map((event, index) => (
|
||||
<div key={index} className="p-4 mb-2 border rounded-lg ">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="text-lg sm:text-xl font-semibold">{event.summary}</div>
|
||||
{event.recurrenceId && (
|
||||
// <span className="text-sm text-blue-500 border border-blue-500 px-1 rounded">重复</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-4 text-gray-500">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||||
</svg>
|
||||
|
||||
)}
|
||||
</div>
|
||||
<span className="text-sm text-gray-600">{formatTimePair(event.start, event.end)}</span>
|
||||
{
|
||||
event.description && (
|
||||
<p className="mt-2">{event.description}</p>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="flex-shrink-0 hidden sm:block">
|
||||
<div className="sticky top-6">
|
||||
<Calendar
|
||||
aria-label="Date (Controlled Focused Value)"
|
||||
focusedValue={focusedDate}
|
||||
value={defaultDate}
|
||||
onFocusChange={(v) => {
|
||||
isUserChangeRef.current = true
|
||||
setFocusedDate(v)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import FullCalendar from "./Calendar"
|
||||
import Schedule from "./Schedule"
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro"
|
||||
---
|
||||
|
||||
<BaseLayout primaryTitle="日历">
|
||||
<FullCalendar client:load />
|
||||
<Schedule client:load />
|
||||
</BaseLayout>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue