plasmasphere.net -プラズマスフィア ドットネット-
Diary
Vanilla JavaScript でブログ用カレンダー皇歴(皇紀)表示付き
2022/10/23(Sun) 18:10
Vanilla もしくはネイティブのJavaScriptでカレンダーを作りました。
当サイトの日記に設置しているものです。
GotHubにあるので必要な方は持って行ってください。
https://github.com/sou1ka/koukicalendar
日付にリンクを付けたり、祝日を設定できたりします。詳しくはREADMEに書いてるんでそっち読んでください。
当サイトのカレンダーの祝日には、Holidays JP API を使わせてもらっています。
こんな感じで使います。
new KoukiCalendar(".koukicalendar", { changeCalendar: async function(d, past) { if(!this.holiday || new Date(d).getFullYear() != new Date(past).getFullYear()) { var f = await fetch("https://holidays-jp.github.io/api/v1/" + new Date(d).getFullYear() + "/date.json"); this.setHoliday(await f.json()); } } });
多分これはどのJSカレンダーも対応してない自信があるんですが、皇歴表示にも対応してます。
emperorTime: true で使えます。
new KoukiCalendar(".koukicalendar", { emperorTime: true });
表示するとこんな感じ。
デザイン情報はカレンダーとしての体をなす部分しか書いていません。幅はターゲットにしたエレメントに準拠します。それぞれクラス情報書いてますが、必要な箇所は開発コンソールで確認してもらえればと。需要あれば追記します。
使い方わかんなかったら twitter 辺りでリプもらえれば説明するかもしれないししないかもしれません。