本文へ移動

Koyomi Calendars暦

カレンダーのページをSVGで描きます。1日を18種類のアイコンで、1か月をポスターや卓上カレンダーで、そして日めくりも使えます。

「暦」(こよみ) は、カレンダーのことです。 名前について（英語）

目次

リファレンス · /animate

FlipOptions型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

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

インポート

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

定義

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

メンバー

名前型説明
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 (省略可)"tear-down" | "fly-up" | "rip-corner" | "flip-down" | undefined
duration (省略可)number | undefined

Milliseconds. Default 650.

motion (省略可)"auto" | "never" | "always" | undefined

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

例

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

出力（このページを作ったときに実行した結果）

ソースを見るGitHub で編集@johnmorrisdotca/koyomi-calendars 0.3.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。