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

CalendarIconOptionstype

What calendarIcon takes: the date, the design and the look of one calendar page.

Only month and day are required.

Import it

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

Definition

interface CalendarIconOptions {
    month: number;
    day: number;
    year?: number;
    theme?: CalendarTheme;
    locale?: string;
    scheme?: "light" | "dark";
    size?: number;
    weekend?: "split";
    holidays?: Readonly<Record<string, string | {
        readonly en?: string;
        readonly ja?: string;
    }>>;
    mark?: string;
    columns?: boolean;
    japanese?: boolean | {
        readonly holidays?: boolean;
        readonly oldDate?: boolean;
        readonly rokuyo?: boolean;
    };
    moon?: boolean;
    housing?: CalendarHousing;
    housingColour?: string;
    rings?: boolean | number;
    turn?: number;
    preset?: CalendarPreset;
}

Members

NameTypeDescription
monthnumber

Month 1–12.

daynumber

Day of the month 1–31.

year (optional)number | undefined

Four-digit year. Names the weekday (and a small year) where a theme draws them; omit it to leave both off.

theme (optional)"pins" | "loops" | "shadow" | "heavy" | "cartoon" | "flip" | "stack" | "line" | "curl" | "soft" | "desk" | "thin" | "frame" | "badge" | "sun" | "roll" | "plain" | "squircle" | undefined
locale (optional)string | undefined

en (the default) or any locale Intl accepts.

scheme (optional)"light" | "dark" | undefined
size (optional)number | undefined

Width in CSS pixels. Height follows the theme's shape. Default 96.

weekend (optional)"split" | undefined

"split" draws a Saturday and the Sunday after it on one page, cut by a diagonal (themes sun and roll, and only when a year is given and the day is a Saturday or a Sunday). Any other day keeps its own page.

holidays (optional)Readonly<Record<string, string | { readonly en?: string; readonly ja?: string; }>> | undefined

Holiday names for the side columns, by date ("2027-01-01") or by day of every year ("01-01"): one string, or one per language. The library knows none itself; a date with no name leaves its cell empty.

mark (optional)string | undefined

SVG shapes that replace the sun's red disc: drawn in a box from -100,-100 to 100,100 centred behind the day. Your own markup, written as given: no scripts, styles, event attributes or foreign objects.

columns (optional)boolean | undefined

The side columns of sun and roll (weekday, month, holiday). Default true.

japanese (optional)boolean | { readonly holidays?: boolean; readonly oldDate?: boolean; readonly rokuyo?: boolean; } | undefined

What the side columns add from the Japanese calendar, computed (src/japaneseCalendar.ts), never looked up: holidays the day's public holiday (国民の祝日, 2000 to 2099; a name in holidays above wins), oldDate the old calendar date (旧暦, 1900 to 2100) and rokuyo the day of the six-day cycle (六曜). true is all three; a cell the method cannot settle is left empty. Off by default, so a page drawn without it is as before. A weekend page shows the holiday only.

moon (optional)boolean | undefined

The moon phase on plain, drawn when a year is given. Default true.

housing (optional)"square" | "circle" | undefined

"circle" sets the icon on a coloured disc. Default "square": the icon alone.

housingColour (optional)string | undefined

The disc's colour, any CSS colour. A soft blue (a deep one in dark) by default.

rings (optional)number | boolean | undefined

Spiral rings across the top of the page, on the themes that have no binding of their own (badge, frame, sun, roll, plain, squircle); the others ignore it. true fits the page; a number sets how many (0–24). Default off.

turn (optional)number | undefined

A slight turn of the whole icon, in degrees, clockwise when positive (older macOS icons stood a little askew). −45 to 45. Default 0.

preset (optional)"flat" | "disc" | "ringed" | "tilted" | "disc-ringed" | undefined

A named set of the three options above (CALENDAR_PRESETS). An option you give yourself wins over it.

Examples

import { calendarIcon, type CalendarIconOptions } from "@johnmorrisdotca/koyomi-calendars";

const options: CalendarIconOptions = { month: 7, day: 17, year: 2026, theme: "badge", scheme: "light" };
console.log(calendarIcon(options).length > 100);
true

What it prints (run when this page was built)

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