本文へ移動

Koyomi Calendars暦

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

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

目次

やり方

アイコンとデザイン

18種類のカレンダーデザイン、名前による選び方、今も使える古い名前、calendarIconのすべてのオプションを説明します。

English

calendarIconは、1日分をSVGの文字列として描きます。オプションのオブジェクトを受け取り、必須なのはmonthとdayだけです。

ライトの18種類のデザイン ダークの18種類のデザイン

オプション

オプション意味
month、day月（1から12）と日（1から31）。必須。
year4桁の年。渡すと曜日が付き、余裕のあるデザインでは小さな年も描かれます。省略すると、どちらも描かれません。
theme18種類のデザインのひとつ。初期値はpins。
scheme"light"（初期値）か"dark"。
size幅（CSSピクセル）。高さはデザインに合わせて決まります。初期値は96。
localeen、またはIntlが受け付ける任意のロケール。
housing、housingColour、rings、turn、preset枠：枠・リング・傾きを参照。
weekend、holidays、japanese、columns、mark、moon日めくりのページ：日本の暦を参照。

18種類のデザイン

名前ラベル見た目
pinsピン留め平らなページ、赤い見出し、2本のスレートグレーのピン
loopsリング綴じグレーの線、3つのリングピン
shadow長い影ラベンダー色のタイルに青い見出しと長い影
heavy極太太い黒の輪郭、リングの穴
cartoonマンガ風黒い輪郭、ピンクの見出し、つやのある数字
flipフリップ遠近のついた卓上カレンダー
stack重ね黒く塗った形、傾いたページ、下に重なる1枚
line線画黒い線画と青い数字
curl角めくれオレンジの見出し、2つのフック、めくれた角
softやわらか赤橙の見出し、琥珀色のリング、珊瑚色の数字
desk月間パッド小さな日付が並ぶ卓上パッド
thin細字白いページ、赤い曜日、とても細い数字
frame四色枠淡い四角を囲む4色の辺
badgeバッジ白いタイルと、やわらかな青いページ
sun日の丸赤い円の上に大きな日付が載った日めくり
roll壁掛け日めくり縦長の壁掛け日めくり
plain無地台紙つきの飾りのない日めくり。月の満ち欠け付き
squircle角丸タイル青緑から青へのグラデーションの角丸タイルに、2つの綴じ具が付いた白いページと、大きく太い日付

どの絵もこのパッケージ自身のものです。形、グラデーション、線で描いた数字だけでできています。画像もフォントファイルもロゴも、会社名もデザインには入っていません。

名前で選ぶ

名前はCALENDAR_THEMESに、英語と日本語のラベルはCALENDAR_THEME_LABELSにあります。calendarThemeOfは、フォームやアドレスの文字列をデザインに変換し、対応するものがなければnullを返します。最初のリリースの10個の名前（classic、outline、spiralなど）はCALENDAR_THEME_ALIASESにあり、それぞれ置き換わったデザインとして読み替えられます。

import { CALENDAR_THEME_ALIASES, CALENDAR_THEME_LABELS, calendarIcon, calendarThemeOf } from "@johnmorrisdotca/koyomi-calendars";

console.log(calendarThemeOf("squircle"));
console.log(calendarThemeOf("classic"));
console.log(calendarThemeOf("nope"));
console.log(Object.keys(CALENDAR_THEME_ALIASES).length);
console.log(CALENDAR_THEME_LABELS.sun.en);
const svg = calendarIcon({ theme: calendarThemeOf("tile") ?? "squircle", month: 7, day: 17, year: 2026, size: 120 });
console.log(svg.includes('width="120"'));
// squircle
// pins
// null
// 10
// Sun disc
// true
squircle
pins
null
10
Sun disc
true

デザイン1つだけを使う

各デザインは単独のインポートにもなっており、ほかのデザインは含まれません。calendarIconと、デザイン自身の定義であるtheme（テストやツール用）をエクスポートします。

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

const svg = calendarIcon({ month: 11, day: 2 });
console.log(svg.startsWith("<svg"));
// true
true

節約できる量は、サイズとバンドルを参照してください。

サイズ

sizeは幅（CSSピクセル、16から1024）で、高さはデザインに合わせて決まります。どのデザインも、小さいサイズまで読めるように描かれており、日付の数字がページで最も大きいものになっています。

squircleを16、32、64、128、256ピクセルで並べたもの

年のはたらき

yearを渡すと、アイコンに曜日が付き、余裕のあるデザインでは小さな年も描かれます。年の表示には、最小の大きさとページの下からの余白があります。CALENDAR_YEAR_MIN（幅の0.07）とCALENDAR_YEAR_CLEAR（0.03）です。アイコンの横に何かを置きたいときは、calendarLayout(theme, withYear)が、日付の位置と年の領域を、デザイン自身の単位で返します。

import { CALENDAR_YEAR_CLEAR, CALENDAR_YEAR_MIN, calendarLayout } from "@johnmorrisdotca/koyomi-calendars";

console.log(CALENDAR_YEAR_MIN, CALENDAR_YEAR_CLEAR);
console.log(JSON.stringify(calendarLayout("squircle", true).page));
console.log(JSON.stringify(calendarLayout("squircle", false).yearZone));
// 0.07 0.03
// [44,118,168,94]
// [44,118,168,94]
0.07 0.03
[44,118,168,94]
[44,118,168,94]

不正な入力

calendarIconはオプションを検証し、誤っているものを示すRangeErrorを投げます。1から12の整数ではない月、1から31の整数ではない日、未知のtheme、16から1024の外にあるsize、どちら向きでも45度を超えるturnです。検証するのは日の範囲だけで、その月の長さではありません。実在する日付であることが必要なら、月間カレンダーのdaysInMonthで先に確かめてください。

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

for (const options of [{ month: 13, day: 1 }, { month: 1, day: 1, theme: "nope" }, { month: 1, day: 1, turn: 60 }]) {
  try {
    calendarIcon(options);
  } catch (error) {
    console.log(error instanceof RangeError, error.message);
  }
}
// true month must be an integer 1–12
// true unknown calendar theme: nope
// true turn must be between -45 and 45 degrees
true month must be an integer 1–12
true unknown calendar theme: nope
true turn must be between -45 and 45 degrees

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

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