本文へ移動

Koyomi Calendars暦

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

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

目次

リファレンス · /themes/thin

theme定数

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

The thin design's drawing, for the package's own renderer: a plain white page, the weekday in red and a very thin number.

Most code wants calendarIcon from this file instead, which draws with it.

インポート

import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/thin";

定義

const theme: Def = {
    box: [0, 0, 412, 385],
    numeral: "centre",
    layout: () => ({ page: THIN, yearZone: THIN }),
    draw: ({ p, dark, l }) => {
        const k = dark ? { body: "#1c1c1e", head: "#ff5a48", ink: "#f4f4f6", muted: "#8e8e93" } : { body: "#ffffff", head: "#e8412c", ink: "#0a0a0a", muted: "#9a9a9e" };
        const word = p.weekday || p.month;
        const [x, y, w, h] = l.page;
        const cx = x + w / 2;
        const ws = fit(word, 76, 296, 0.52);
        const ink = (176 * 15) / 16 + 7;
        const [wb, db, yb] = stack(y, y + h, [[ws * CAP, 0], [ink, 24], ...(p.year ? [[29 * CAP, 20] as const] : [])]);
        return (rect(0, 0, 412, 385, 88, k.body) +
            part("month", tx(cx, wb!, word, ws, k.head, 300)) +
            part("day", digits(p.day, cx, db! - ink / 2, 176, 7, k.ink, { cap: "butt", gap: 4.5 })) +
            part("year", tx(cx, yb!, p.year, 29, k.muted, 300)));
    },
}

メンバー

名前型説明
boxRect

The drawing's own coordinate box: x, y, width, height.

numeral"centre"

Where the day sits in its page. Every theme centres it; a look that places it otherwise says so here, for 1, 9, 30 and 31 alike.

layout(year: boolean, weekend?: boolean) => CalendarLayout

The layout with a year and without one (the drawing is re-centred when the year is absent), and, for a theme with a weekend page, as that page.

draw(c: Ctx) => string
rings (省略可)readonly [x: number, y: number, width: number] | undefined

Where rings stand: x, y and width of the page's top edge, in the drawing's units. A theme without it ignores rings.

weekend (省略可)true | undefined

The theme has a weekend page (weekend: "split").

extras (省略可)((input: ExtrasInput) => Extras) | undefined

Works out the extra data a tear-off page draws. A theme without it is given none.

例

import { theme } from "@johnmorrisdotca/koyomi-calendars/themes/thin";

console.log(theme.box.length);
4

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

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

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