flipCalendar関数
リファレンスの説明と例は英語です。見出しと目次は日本語です。
Turns the icon in host from one date to another.
It needs a browser (the Web Animations API). The host's content afterwards is the one new icon, as if drawn plainly.
インポート
import { flipCalendar } from "@johnmorrisdotca/koyomi-calendars/animate";定義
function flipCalendar(host: HTMLElement, options: FlipOptions): Promise<FlipDate>引数
| 名前 | 型 | 説明 |
|---|---|---|
host | HTMLElement | The element that holds the icon now. |
options | FlipOptions | How to draw a date, the two dates and the animation: |
戻り値
Promise<FlipDate>
The date now shown, once the turn has finished (options.to).
例
import { calendarIcon } from "@johnmorrisdotca/koyomi-calendars";
import { flipCalendar } from "@johnmorrisdotca/koyomi-calendars/animate";
const host = document.querySelector<HTMLElement>("#today")!;
await flipCalendar(host, {
render: (date) => calendarIcon({ theme: "pins", ...date }),
from: { year: 2026, month: 11, day: 3 },
to: { year: 2026, month: 11, day: 4 },
});この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。