お月様カレンダー

React と Typescript の練習として、月の満ち欠けを表示するカレンダーを作りました。Javascriptファイルを読み取るだけで簡単に設置できます。

成果物

 

機能

カレンダーを、月の満ち欠けを添えて表示します。年を書き換えたり月をクリックして選択することで、他の年月のカレンダーを表示できます。

月の満ち欠けの表示には絵文字を利用していますが、ブラウザによっては白黒で表示されてしまうようです。他のページで表示する際は、css でフォントを指定してそのフォントファイルをサーバ上に置くことで確実にカラーで表示できますが、その場合はフォントのライセンス等に十分注意してください。

設置の仕方

このカレンダーは簡単に設置できます。bundle.js ファイル(GitHub にて公開)を HTML の中で読み込むだけで、HTML ファイル内の moonCalendar クラスのブロック要素の中にカレンダーが埋め込まれます。

カレンダー内の各要素にはクラスを指定してあるので、css ファイルを作ることでデザインをある程度自由に変更できます。上の例では css を指定していないので、この web ページが標準的に用いているスタイルがそのまま使用されています。

GitHub には、使用例としての index.html を置いてあります(実際の表示例はこちら)。この使用例では、scss で作ったスタイルファイルを参照するため、上記のものとは異なる見た目になります。

利用と改変

どうとでもしてください。WTFPL とします。

自作ソフト  2019/02/16  k.izumi