農民曆今日卡｜React 元件

農民曆日曆卡：國曆大字＋農曆日期、宜／忌條列、沖煞與吉時，撕日曆翻頁動畫切換日期

台灣家庭牆上那本紅色農民曆的數位版：直式日曆頁上有紅底白字月份列與撕頁孔洞、國曆大數字（週末自動標紅）、農曆與干支生肖列、節慶徽章、兩欄「宜｜忌」小籤條、底部沖煞與吉時。切換日期時整頁沿著撕孔往下翻摺撕開、新頁從後方浮現，適合日曆、婚慶、命理、廟宇網站。資料完全由 props 供給，元件不做萬年曆推算——農曆換算可自行接資料源，或搭配 lunar-date-picker 產生。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add "https://webberui.com/r/almanac-day-card.json?t=<安裝 token>"

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

緊湊模式compact

主色accent

顯示吉時showLuckyHours

標題文字title

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<AlmanacDayCard/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add "https://webberui.com/r/almanac-day-card.json?t=<安裝 token>"

或在 components.json 設定 registries 後，改用 @webberui/almanac-day-card 安裝。

使用

import {
  AlmanacDayCard,
  type AlmanacDay,
} from "@/components/ui/almanac-day-card";

// 資料由你的資料源供給（此處數值為示意，非依曆書推算）
const day: AlmanacDay = {
  date: "2026-08-19",
  lunar: {
    monthName: "七月",
    dayName: "初七",
    ganzhi: "丙午年 丙申月 戊午日",
    zodiac: "馬",
  },
  suitable: ["嫁娶", "納采", "會親友", "立券"],
  avoid: ["破土", "作灶", "掘井"],
  clash: "沖鼠(壬子)煞北",
  luckyHours: ["寅時 3-5", "巳時 9-11", "午時 11-13"],
  festival: "七夕",
};

<AlmanacDayCard
  day={day}
  onPrev={() => goTo(-1)}
  onNext={() => goTo(1)}
/>;

Props

Prop	型別	預設值	說明
`day`	`AlmanacDay`	—	當日完整資料（見下方子型別）；元件不做萬年曆推算，資料由外部供給
`onPrev`	`() => void`	—	切換到前一日；有提供才顯示左箭頭
`onNext`	`() => void`	—	切換到後一日；有提供才顯示右箭頭
`accent`	`string`	`"#b91c1c"`	主色（頂欄、宜籤條、節慶徽章與週末大字），任何合法 CSS 顏色
`compact`	`boolean`	`false`	緊湊模式：縮小字級與間距
`showLuckyHours`	`boolean`	`true`	是否顯示吉時列
`maxItems`	`number`	`6`	宜／忌各自最多顯示幾項，超出摺疊為「+N 項」；`0` 表示全部顯示
`title`	`string`	`"農民曆"`	頂欄標題文字（`labels.title` 的捷徑）
`labels`	`Partial<AlmanacLabels>`	—	各區塊標題文字覆寫
`className`	`string`	—	透傳到最外層容器

AlmanacDay

欄位	型別	預設值	說明
`date`	`string`	—	國曆日期，ISO 格式 `YYYY-MM-DD`
`lunar`	`AlmanacLunar`	—	農曆日期資訊
`suitable`	`string[]`	—	宜（嫁娶、開市、入宅…）
`avoid`	`string[]`	—	忌
`clash`	`string`	—	沖煞（如「沖鼠(丙子)煞北」）
`luckyHours`	`string[]`	—	吉時（如「子時 23-1」）
`festival`	`string`	—	節慶名稱（如「七夕」），有值時顯示徽章

AlmanacLunar

欄位	型別	預設值	說明
`monthName`	`string`	—	農曆月名（如「七月」）
`dayName`	`string`	—	農曆日名（如「初八」）
`ganzhi`	`string`	—	干支（如「丙午年丙申月壬子日」）
`zodiac`	`string`	—	生肖（如「馬」）

AlmanacLabels

欄位	型別	預設值	說明
`title`	`string`	`"農民曆"`	頂欄標題
`suitable`	`string`	`"宜"`	宜欄標題
`avoid`	`string`	`"忌"`	忌欄標題
`clash`	`string`	`"沖煞"`	沖煞列標題
`luckyHours`	`string`	`"吉時"`	吉時列標題

另外具名匯出 AlmanacDay、AlmanacLunar 與 AlmanacLabels 型別，方便在資料層先組好資料再傳入。

細節

不做曆法推算：農曆換算、宜忌與沖煞的規則各家曆書不盡相同，元件刻意只負責「呈現」，資料一律由 day prop 供給。要自動換算農曆日期，可以接自己的資料源或曆法庫，也可以搭配本站的 lunar-date-picker（內建 2026 年對照表）產生農曆欄位
撕頁動畫：往後一天時，舊頁以頂端撕孔為軸 rotateX 往下翻摺淡出、新頁從後方浮現；往前一天則反向——新頁從摺起狀態以 spring 翻回定位，落定時帶一點擺動，如同把撕下的頁子貼回去
日期解析：date 以字串解析（不經 new Date(iso) 的時區轉換），星期與週末判斷在伺服器與客戶端結果一致，不會因使用者時區把日期推前推後
自訂 accent 時，籤條底色與徽章淡色由 color-mix() 自動從主色調出，深淺主題都不用另外指定

可及性

整卡為 role="group"，aria-label 含當日國曆與農曆日期；宜／忌以語意化 ul 清單呈現，欄位標題以 aria-labelledby 關聯
有提供 onPrev 或 onNext 時整卡可聚焦，聚焦後可用 ← / → 鍵切換日期；箭頭按鈕附 aria-label（前一日／後一日）與 focus-visible 焦點環
切換日期時，新日期（含農曆與節慶）經由 aria-live="polite" 區域宣告，螢幕閱讀器使用者不需重讀整卡
使用者系統開啟「減少動態效果」時，停用撕頁翻摺與籤條 stagger 進場動畫，改為單純淡入淡出

農民曆今日卡

把這個效果裝進你的專案

本頁目錄