本文へ移動

Koyomi Calendars暦

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

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

目次

はじめに

はじめに

最初のカレンダーアイコン、月間カレンダー、ページめくりを、依存なし・追加のビルドなしで、数分で描いてみます。

English

Koyomi Calendarsは、カレンダーのページをSVGの文字列として描きます。日付を渡すと、ページに入れても、ファイルに保存しても、サーバーに渡してもよい文字列が返ります。画像もフォントファイルも依存もなく、ライブラリが時計を読むこともありません。日付はいつも、呼び出す側が渡す引数です。

squircleのアイコンを、平らなタイル、円盤、リング付き、傾き付き、円盤とリング付きで並べたもの。ライトとダーク

インストール

npm install @johnmorrisdotca/koyomi-calendars

Node 22以降、または最近のブラウザーで動きます。すべてESモジュールで、型も付いています。

1日分のアイコン

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

const svg = calendarIcon({ theme: "squircle", month: 11, day: 2, year: 2026, scheme: "dark" });
console.log(svg.startsWith("<svg"));
console.log(svg.includes('aria-label="Monday Nov 2 2026"'));
// true
// true
true
true

結果は、titleとaria-labelを持つSVGの文字列です。innerHTMLでページに入れる、.svgファイルに書き出す、サーバーで描くページに埋め込む、のどれでも使えます。yearは省略できます。渡すと曜日が付き、余裕のあるデザインでは小さな年も描かれます。省略すると、どちらも描かれません。

18種類のデザインから選ぶ

themeで18種類のデザインのひとつを、schemeで"light"か"dark"を選びます。一覧はデータなので、メニューも作れます。

import { CALENDAR_THEMES, CALENDAR_THEME_LABELS } from "@johnmorrisdotca/koyomi-calendars";

console.log(CALENDAR_THEMES.length);
console.log(CALENDAR_THEMES.slice(0, 4).map((name) => CALENDAR_THEME_LABELS[name].en).join(", "));
// 18
// Pins, Loops, Long shadow, Heavy
18
Pins, Loops, Long shadow, Heavy

ライトの18種類のデザイン

デザインの一覧と見た目は、アイコンとデザインにあります。

枠と傾き

housing、rings、turnは、デザイン自身の絵には手を加えず、アイコン全体を変えます。

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

const round = calendarIcon({ theme: "badge", month: 3, day: 9, housing: "circle", rings: true, turn: -8 });
console.log(round.includes("<circle"));
console.log(round.includes("rotate(-8"));
// true
// true
true
true

月間カレンダー

monthCalendarは別のインポートなので、小さなアイコンには含まれません。

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

const svg = monthCalendar({ year: 2026, month: 11, design: "poster", weekStart: "monday", notes: { "11-07": "Dentist 14:00" } });
console.log(svg.includes("Dentist"));
console.log(svg.includes('aria-label="November 2026"'));
// true
// true
true
true

2026年11月の4種類の月間カレンダー

ページをめくる

ブラウザーでは、flipCalendarでアイコンを次の日へめくれます。要素と、日付を描く関数を渡します。

import { flipCalendar, nextDay } from "@johnmorrisdotca/koyomi-calendars/animate";
import { calendarIcon } from "@johnmorrisdotca/koyomi-calendars/themes/squircle";

const element = document.querySelector("#today");
const from = { year: 2026, month: 12, day: 31 };
element.innerHTML = calendarIcon({ ...from });
await flipCalendar(element, { render: (date) => calendarIcon({ ...date }), from, to: nextDay(from), animation: "tear-down" });

次に読むもの

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

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