Koyomi Calendars documentation
Koyomi Calendars 暦 — calendar-page icons as SVG
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.
Install
npm install @johnmorrisdotca/koyomi-calendarsStart here
Entry points
Guides
How-to
- Icons and designsThe 18 calendar-page designs, how to choose one by name, the older names that still work, and every option of calendarIcon.
- Housing, rings and turnSet an icon on a disc, bind it with spiral rings, stand it a little askew, or take one of the five named presets that bundle those looks.
- Month pagesDraw a whole month as a poster, a memo board, a wall page or a desk pad, with a week start, notes of your own, and the grid as data.
- Turning the pageTurn the icon from one day to the next or back in four ways, with date helpers, reduced motion respected, and the options of flipCalendar.
- The Japanese calendarJapanese public holidays, old calendar dates and the six-day cycle, computed and never looked up, on the tear-off pages and as plain functions.
- Languages and localesMonth and weekday words in any language the browser or Node knows, how Japanese, Chinese and Korean change the order, and what happens with a locale that is not known.
- Frameworks and serversPut an icon or a month page in plain HTML, React, Vue, Svelte or Angular, render it on a server or to a file, and turn the page from a component.
- Plain HTML and a CDNDraw an icon on a page with no build step, from jsDelivr or unpkg, load one design alone, and turn the page from a button.
- Vite and webpackUse the package in a Vite or webpack project, import one design alone so the bundle stays small, and check what reached the bundle.
- Embed it with an iframePut a calendar icon or a month in any page with one iframe and no script, and choose what it shows in the address.
- TypeScript and NodeUse the package's types, draw icons and month pages on a server or in a build script, and write them to files.
Explanation
- Sizes and bundlesWhat each import costs a page, how to import one design alone, why nothing else comes with it, and the byte budgets that CI holds.
- Accessibility and themingWhat every icon and month page says to a screen reader, how light and dark work, what reduced motion does, and what you can and cannot change in a drawing.
- ArchitectureHow the package is split into small imports, what a design is, how a drawing is made, and the rules that keep the output, the sizes and the originality fixed.