Skip to the content

Koyomi Calendars暦

Calendar pages as SVG: a day as an icon in 18 original designs, a whole month as a poster or a desk pad, and the page turning from one day to the next.

Koyomi is the Japanese word 暦 for the calendar. About the name

Contents

Reference · /animate

FlipOptionstype

What flipCalendar takes: how to draw a date, the two dates, and how the page turns.

Import it

import type { FlipOptions } from "@johnmorrisdotca/koyomi-calendars/animate";

Definition

interface FlipOptions {
    render: (date: FlipDate) => string;
    from: FlipDate;
    to: FlipDate;
    animation?: CalendarFlip;
    duration?: number;
    motion?: "auto" | "never" | "always";
}

Members

NameTypeDescription
render(date: FlipDate) => string

Draws a date: it returns the SVG of an icon. (d) => calendarIcon({ theme: "pins", ...d }), or one theme's own calendarIcon.

fromFlipDate

The date the host shows now.

toFlipDate

The date to turn to. Later than from turns forwards, earlier turns backwards (the page that left comes back).

animation (optional)"tear-down" | "fly-up" | "rip-corner" | "flip-down" | undefined
duration (optional)number | undefined

Milliseconds. Default 650.

motion (optional)"auto" | "never" | "always" | undefined

"auto" (the default) respects the reader's reduced-motion setting; "never" never animates; "always" ignores the setting.

Examples

import { calendarIcon } from "@johnmorrisdotca/koyomi-calendars";
import type { FlipOptions } from "@johnmorrisdotca/koyomi-calendars/animate";

const options: FlipOptions = {
  render: (date) => calendarIcon({ theme: "pins", ...date }),
  from: { year: 2026, month: 11, day: 3 },
  to: { year: 2026, month: 11, day: 4 },
  animation: "fly-up",
};
console.log(options.animation);
fly-up

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/koyomi-calendars 0.3.0.