Moment.jsを利用して、Onsen UI上にカレンダーを表示する方法を紹介します。
※カレンダー表示処理はOnsen UIなしでも利用できます。


Monacaデバッガーの表示結果です。
ツールバーの左右の矢印を押すと、その月のカレンダーが表示されます。

まず、Moment.jsにアクセスして、「moment-with-locales.min.js」というファイルをダウンロードし、Monacaのlibフォルダにアップロードします。

処理内容は、指定した月の第1週の日曜日の日付を取得してhtml生成後、日付を+1日追加します。
7日単位でループし、次の日付が翌月の場合はforループを抜けます。
ステップ実行すれば、どのような動きになっているか理解できると思います。

Recommended Posts