本文へ移動

Koyomi Calendars暦

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

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

目次

リファレンス · /themes/badge

theme定数

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

The badge design's drawing, for the package's own renderer: a white tile and a soft blue page with a light top lip and a white number.

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

インポート

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

定義

const theme: Def = {
    box: [3.4, 7.8, 110.9, 110.9],
    numeral: "centre",
    rings: [31.5, 31, 56],
    layout: () => ({ page: BADGE, yearZone: BADGE }),
    draw: ({ p, dark, uid, l }) => {
        const k = dark ? { tile: "#2a303c", a: "#6f95f7", b: "#4d79e6", lip: "#c1d8fb", tint: "#a09cf7" } : { tile: "#fdfdfb", a: "#6a92f7", b: "#4b78e6", lip: "#cfe3fb", tint: "#9d99f5" };
        const [x, y, w, h] = l.page;
        const [db, yb] = stack(y, y + h, [[41 * CAP, 0], ...(p.year ? [[8.5 * CAP, 5] as const] : [])]);
        return (`<defs><linearGradient id="${uid}-g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${k.tint}"/><stop offset=".22" stop-color="${k.a}"/><stop offset="1" stop-color="${k.b}"/></linearGradient></defs>` +
            rect(5.6, 10, 106.5, 106.5, 9, k.tile, `stroke="${dark ? "#3a4150" : "#dde1e6"}" stroke-width="1.4"`) +
            `<g transform="translate(-1.65 0)">` +
            `<path d="M38 29Q60 25 82 29Q87 30 88 36H32Q33 30 38 29Z" fill="${k.lip}"/>` +
            `<path d="M38 34H82Q90 34 91 42C92 52 89 60 91 70C92 80 93 86 90 90Q88 97 80 97H40Q32 97 30 90C28 86 30 80 31 70C32 60 28 52 30 42Q31 34 38 34Z" fill="url(#${uid}-g)"/>` +
            `</g>` +
            part("day", dayText(x + w / 2, db!, p.day, 41, "#ffffff", 400)) +
            part("year", tx(x + w / 2, yb!, p.year, 8.5, "#ffffff", 600, { opacity: 0.85 })));
    },
}

メンバー

名前型説明
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/badge";

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

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

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

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