flipCalendarfunction
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 it
import { flipCalendar } from "@johnmorrisdotca/koyomi-calendars/animate";Definition
function flipCalendar(host: HTMLElement, options: FlipOptions): Promise<FlipDate>Parameters
| Name | Type | Description |
|---|---|---|
host | HTMLElement | The element that holds the icon now. |
options | FlipOptions | How to draw a date, the two dates and the animation: |
Returns
Promise<FlipDate>
The date now shown, once the turn has finished (options.to).
Examples
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 },
});