台灣月曆
完整月曆網格，含民國年標題、週末色調、國定假日標記（整合 TaiwanHolidayBadge）、前後月切換按鈕、完整鍵盤導覽支援。
Full month calendar grid with ROC year header, weekday labels, weekend tinting, holiday badges (via TaiwanHolidayBadge), prev/next navigation, and full keyboard support (arrow keys, Enter to select).
CLI
npx taiwan-ui add taiwan-calendar-monthnpm package
npm install @taiwan-ui/reactRequires: components/taiwan/TaiwanHolidayBadge
Default view: Feb 2026 (春節 + 和平紀念日 visible). Click prev/next to navigate, click any date to select.
民國 115 年 · 2026
2 月
| Prop | Type | Default |
|---|---|---|
year* | number | — |
month* | number | — |
value | Date | null | — |
onSelect | (date: Date) => void | — |
onMonthChange | (year: number, month: number) => void | — |
showNav | boolean | true |
english | boolean | false |
西元年
月份（0 = 一月）
顯示前後月按鈕
英文星期標題
import TaiwanCalendarMonth from "@/components/taiwan/TaiwanCalendarMonth";
export default function Example() {
return (
<TaiwanCalendarMonth
showNav={true}
/>
);
}
import { useState } from "react";
import TaiwanCalendarMonth from "@/components/taiwan/TaiwanCalendarMonth";
export default function MonthView() {
const [date, setDate] = useState<Date | null>(null);
const [year, setYear] = useState(2026);
const [month, setMonth] = useState(1); // February (0-indexed)
return (
<TaiwanCalendarMonth
year={year}
month={month}
value={date}
onSelect={setDate}
onMonthChange={(y, m) => { setYear(y); setMonth(m); }}
/>
);
}