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 · /month

MonthCalendarOptionstype

What monthCalendar takes: the month, the design and the look of one month page.

Only year and month are required.

Import it

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

Definition

interface MonthCalendarOptions {
    year: number;
    month: number;
    design?: MonthDesign;
    weekStart?: WeekStart;
    locale?: string;
    scheme?: "light" | "dark";
    size?: number;
    notes?: Readonly<Record<string, string>>;
    tint?: boolean;
    outside?: boolean;
    mini?: boolean;
}

Members

NameTypeDescription
yearnumber

Four-digit year, 1–9999.

monthnumber

Month 1–12.

design (optional)"desk" | "poster" | "board" | "wall" | undefined
weekStart (optional)WeekStart | undefined

The first column: "sunday" (the default) or "monday".

locale (optional)string | undefined

en (the default) or any locale Intl accepts. Japanese, Chinese and Korean put the year before the month.

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

Width in CSS pixels. Height follows the design. Default 480.

notes (optional)Readonly<Record<string, string>> | undefined

A short note for a day, by date ("2026-11-07") or by day of every year ("11-07"). Two lines fit; more is cut. The library knows no holiday: every note is yours.

tint (optional)boolean | undefined

Saturday blue and Sunday red. Default: on for Japanese, off for any other language.

outside (optional)boolean | undefined

The days of the months either side, faint, in the first and last row. Default true for wall and desk, false for the others.

mini (optional)boolean | undefined

A small calendar of the next month (poster and board). Default true for poster.

Examples

import { monthCalendar, type MonthCalendarOptions } from "@johnmorrisdotca/koyomi-calendars/month";

const options: MonthCalendarOptions = { year: 2026, month: 11, design: "wall", weekStart: "monday", notes: { "2026-11-07": "Dinner" } };
console.log(monthCalendar(options).includes("Dinner"));
true

What it prints (run when this page was built)

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