Almanac Day Card

A digital version of the red farmer's almanac hanging on Taiwanese family walls: a vertical calendar page with an accent-colored month bar and tear-off perforation holes, a big Gregorian day number (weekends turn red automatically), the lunar date with sexagenary cycle and zodiac, a festival badge, two columns of Auspicious｜Inauspicious (do/avoid) tags, and clash and lucky-hour rows at the bottom. Switching days tears the whole page off along the perforation while the new page surfaces from behind — great for calendar, wedding, fortune-telling, and temple sites. All data comes in through props; the component does no perpetual-calendar maths — wire up your own data source, or generate the lunar fields with lunar-date-picker.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

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>
  );
}

Installation

Usage

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

// Data comes from your own source (values here are illustrative, not from a real almanac)
const day: AlmanacDay = {
  date: "2026-08-19",
  lunar: {
    monthName: "July",
    dayName: "Seventh Day",
    ganzhi: "Year of Bingwu, Month of Bingshen, Day of Wuwu",
    zodiac: "Horse",
  },
  suitable: ["Marriage", "Betrothal", "Visiting Relatives and Friends", "Signing Contracts"],
  avoid: ["Breaking Ground", "Building a Stove", "Digging a Well"],
  clash: "Clashes with Rat (Renzi), unfavorable direction: North",
  luckyHours: ["Yin Hour 3-5", "Si Hour 9-11", "Wu Hour (11 AM - 1 PM) 11-13"],
  festival: "Qixi Festival",
};

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

Props

AlmanacDay

AlmanacLunar

AlmanacLabels

The AlmanacDay, AlmanacLunar, and AlmanacLabels types are also named exports, so the data can be assembled at the data layer before being passed in.

How it works

• No calendar maths: lunar conversion and the do/avoid and clash rules differ between almanac publishers, so the component deliberately only renders — all data comes through the day prop. To convert lunar dates automatically, wire up your own data source or calendar library, or generate the lunar fields with this site's lunar-date-picker (which ships a 2026 lookup table)
• The tear-off animation: moving forward a day, the old page folds down and away with rotateX hinged on the perforation at the top, while the new page surfaces from behind; moving back a day runs in reverse — the new page springs back into place from the folded state, settling with a slight wobble, like sticking the torn page back on
• Date parsing: date is parsed as a string (bypassing the timezone conversion of new Date(iso)), so the weekday and weekend checks give the same result on the server and the client, and the date never shifts by a day with the user's timezone
• With a custom accent, the tag and badge tints are derived from the accent via color-mix(), so light and dark themes need no extra configuration

Accessibility

• The whole card is a role="group" whose aria-label includes the Gregorian and lunar dates; the do/avoid lists are semantic ul lists, with their column headings linked via aria-labelledby
• When onPrev or onNext is provided the card is focusable, and ← / → switch days while it has focus; the arrow buttons carry aria-labels and focus-visible rings
• On a day switch, the new date (including the lunar date and festival) is announced through an aria-live="polite" region, so screen reader users do not need to re-read the whole card
• When the user has "reduce motion" enabled at the system level, the tear-off fold and the staggered tag entrances are disabled in favor of a plain cross-fade