Skip to the content

Koyomi Calendars暦

Calendar pages as SVG: a day as an icon in 18 original designs, a whole month as a poster or a desk pad, and the page turning from one day to the next.

Koyomi is the Japanese word 暦 for the calendar. About the name

Contents

Reference · Calendar icons

CalendarLayouttype

Where a theme puts the day and the year; a theme's layout says it once and the drawing and the tests both read it.

Import it

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

Definition

interface CalendarLayout {
    page: Rect;
    yearZone: Rect | null;
    split?: {
        saturday: readonly [
            number,
            number
        ];
        sunday: readonly [
            number,
            number
        ];
        height: number;
        line: readonly [
            number,
            number,
            number,
            number
        ];
    };
}

Members

NameTypeDescription
pageRect

The page the day is centred in, across and (as one block with the month word and the year, when the page shares them) down.

yearZoneRect | null

The room the year chip sits in: it keeps the minimum size and the margin from the bottom of this. null for a look with no year chip.

split (optional){ saturday: readonly [number, number]; sunday: readonly [number, number]; height: number; line: readonly [number, number, number, number]; } | undefined

Only on a weekend page: where the two numerals sit (their centres), how tall they are, and the diagonal that cuts the page (from top right to bottom left).

Examples

import { calendarLayout, type CalendarLayout } from "@johnmorrisdotca/koyomi-calendars";

const layout: CalendarLayout = calendarLayout("pins", false);
console.log(layout.page.join(" "));
35 105 243 180

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/koyomi-calendars 0.3.0.